|
@@ -51,57 +51,72 @@ export default {
|
|
|
map: null,
|
|
|
inputVal2: "",
|
|
|
autocomplete: null,
|
|
|
- markers: [],
|
|
|
+ markers: [], // 标记数组
|
|
|
|
|
|
geoFormData: {
|
|
|
- district: "",
|
|
|
- address: "",
|
|
|
- lng: "",
|
|
|
- lat: "",
|
|
|
- level: null,
|
|
|
+ // 地理信息数据
|
|
|
+ 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.initMap();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 初始化地图
|
|
|
+ initMap() {
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ 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() {},
|
|
|
+ },
|
|
|
+ getDicData() {},
|
|
|
+ /**
|
|
|
+ * 设置当前定位
|
|
|
+ * @param {*} location
|
|
|
+ */
|
|
|
setLocation(location) {
|
|
|
if (location) {
|
|
|
this.map.setCenter([location.lng, location.lat], true);
|
|
|
}
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 添加标记点
|
|
|
+ * @param {*} Amap
|
|
|
+ * @param {*} location
|
|
|
+ * @param {*} name 标记点的标签内容
|
|
|
+ */
|
|
|
addMarker(Amap, location, name) {
|
|
|
this.clearMarker();
|
|
|
const marker = new Amap.Marker({
|
|
@@ -116,7 +131,10 @@ export default {
|
|
|
this.markers.push(marker);
|
|
|
this.map.add(marker);
|
|
|
},
|
|
|
- clearMarker(Amap) {
|
|
|
+ /**
|
|
|
+ * 清除地图所有标记点
|
|
|
+ */
|
|
|
+ clearMarker() {
|
|
|
this.markers.forEach((marker) => this.map.remove(marker));
|
|
|
},
|
|
|
},
|