|
@@ -0,0 +1,151 @@
|
|
|
+<template>
|
|
|
+ <div class="geo-container">
|
|
|
+ <Title name="地理信息" />
|
|
|
+ <div class="geo-content">
|
|
|
+ <div id="map-container"></div>
|
|
|
+ <div class="map-search-input">
|
|
|
+ <el-input id="tipinput" placeholder="搜索" v-model="inputVal2">
|
|
|
+ <i slot="prefix" class="el-input__icon el-icon-search"></i>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="form-content">
|
|
|
+ <FormItem label="省市区县" :initValue="geoFormData.district" />
|
|
|
+ <FormItem label="详细地址" :initValue="geoFormData.address" />
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <FormItem
|
|
|
+ label="经度"
|
|
|
+ :initValue="geoFormData.lng"
|
|
|
+ formType="input-unit"
|
|
|
+ unit="度"
|
|
|
+ />
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12"
|
|
|
+ ><FormItem
|
|
|
+ label="纬度"
|
|
|
+ :initValue="geoFormData.lat"
|
|
|
+ formType="input-unit"
|
|
|
+ unit="度"
|
|
|
+ /></el-col>
|
|
|
+ </el-row>
|
|
|
+ <FormItem
|
|
|
+ label="抗震设防烈度"
|
|
|
+ :initValue="geoFormData.level"
|
|
|
+ formType="select"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import Title from "./title.vue";
|
|
|
+import AMapLoader from "@amap/amap-jsapi-loader";
|
|
|
+import FormItem from "./formItem.vue";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ Title,
|
|
|
+ FormItem,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ map: null,
|
|
|
+ inputVal2: "",
|
|
|
+ autocomplete: null,
|
|
|
+ markers: [],
|
|
|
+
|
|
|
+ geoFormData: {
|
|
|
+ district: "",
|
|
|
+ address: "",
|
|
|
+ lng: "",
|
|
|
+ lat: "",
|
|
|
+ level: null,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ AMapLoader.load({
|
|
|
+ key: window.__systemConf.mapKey,
|
|
|
+ version: "2.0",
|
|
|
+ plugins: [],
|
|
|
+ }).then((Amap) => {
|
|
|
+ this.map = new Amap.Map("map-container", {
|
|
|
+ zoom: 11,
|
|
|
+ resizeEnable: true,
|
|
|
+ });
|
|
|
+ Amap.plugin(["AMap.PlaceSearch", "AMap.AutoComplete"], () => {
|
|
|
+ const autoOptions = {
|
|
|
+ input: "tipinput",
|
|
|
+ };
|
|
|
+ this.autocomplete = new Amap.Autocomplete(autoOptions);
|
|
|
+
|
|
|
+ this.autocomplete.on("select", (e) => {
|
|
|
+ console.log(e);
|
|
|
+ const location = e.poi.location;
|
|
|
+ if (location) {
|
|
|
+ this.setLocation(location);
|
|
|
+ this.addMarker(Amap, location, e.poi.name);
|
|
|
+ const { district, address } = e.poi;
|
|
|
+ this.geoFormData.district = district;
|
|
|
+ this.geoFormData.address = address;
|
|
|
+ this.geoFormData.lng = location.lng.toString();
|
|
|
+ this.geoFormData.lat = location.lat.toString();
|
|
|
+ this.geoFormData.level = null;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ pressEnter() {},
|
|
|
+ setLocation(location) {
|
|
|
+ if (location) {
|
|
|
+ this.map.setCenter([location.lng, location.lat], true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addMarker(Amap, location, name) {
|
|
|
+ this.clearMarker();
|
|
|
+ const marker = new Amap.Marker({
|
|
|
+ position: [location.lng, location.lat],
|
|
|
+ title: name,
|
|
|
+ });
|
|
|
+ marker.setLabel({
|
|
|
+ offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
|
|
|
+ content: `<div class='info'>${name}</div>`, //设置文本标注内容
|
|
|
+ direction: "right", //设置文本标注方位
|
|
|
+ });
|
|
|
+ this.markers.push(marker);
|
|
|
+ this.map.add(marker);
|
|
|
+ },
|
|
|
+ clearMarker(Amap) {
|
|
|
+ this.markers.forEach((marker) => this.map.remove(marker));
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.geo-container {
|
|
|
+ width: 100%;
|
|
|
+ .geo-content {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ padding: 0 16px;
|
|
|
+ position: relative;
|
|
|
+ #map-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ .map-search-input {
|
|
|
+ position: absolute;
|
|
|
+ top: 12px;
|
|
|
+ left: 24px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .form-content {
|
|
|
+ margin-top: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+/deep/ .amap-marker-label {
|
|
|
+ background-color: red;
|
|
|
+}
|
|
|
+</style>
|