vue2 中使用高徳地图amap vue.js

【vue2 中使用高徳地图amap】项目中需要加载地图，选择使用高徳地图(更易懂易用稳定些)
1.首先需要在高徳地图官网申请一个开发者账号得到一个key
2.在vue2 的index.html 中加载高徳js库

//AMap // AMapUI

3.在webpack.base.config.js 中外部库选项中引入

externals: { "AMap":"window.AMap", "AMapUI":"window.AMapUI", },

4.结果是这样的

文章图片

5.开始你的地图代码了

在mounted() 中初始化加载initMap

async initMap(){ this.map = await new AMap.Map('map_container', { resizeEnable: true })this.map.plugin(["AMap.ToolBar"],()=> { //设置地位标记为自定义标记 let toolBar = new AMap.ToolBar(); this.map.addControl(toolBar); }); //这是map上增加的图层 AMapUI.loadUI(['misc/PoiPicker'], (PoiPicker)=>{ this.poiPicker = new PoiPicker({ input: 'keyword', //搜索关键词id placeSearchOptions: { map: this.map, pageSize: 5 }, searchResultsContainer: 'searchResults'//搜索结果区 })//地图上增加信息窗体 this.infoWindow = new AMap.InfoWindow({ isCustom:true, offset: new AMap.Pixel(0, -20), content: this.$refs.lbsInfoComponent.$el, //窗体内容，使用vue 组件 })//选中搜索结果事件 this.poiPicker.on('poiPicked', (poiResult) =>{this.poiPicker.hideSearchResults() let source = poiResult.source let poi = poiResult.item let info = { source: source, id: poi.id, name: poi.name, location: poi.location.toString(), address: poi.address } this.infoWindow.setMap(this.map) this.infoWindow.setPosition(poi.location)this.$refs.lbsInfoComponent.initialize(info, this.lbsDistance) if (source !== 'search') { this.poiPicker.searchByKeyword(poi.name) } else { } })})//行政区划查询 let opts = { subdistrict: 1,//返回下一级行政区 showbiz:false//最后一级返回街道信息 } this.district = new AMap.DistrictSearch(opts) this.district.search('中国', (status, result)=>{ if(status=='complete'){this.getData(result.districtList[0])//加载省份 } }) },getData(data) { let bounds = data.boundaries if (bounds) { for (let bound of bounds) { let polygon = new AMap.Polygon({ map: this.map, strokeWeight: 1, strokeColor: '#CC66CC', fillColor: '#CCF3FF', fillOpacity: 0.5, path: bound }) this.polygons.push(polygon) } this.map.setFitView()//地图自适应 }let level = ""let curList = [] if(data.districtList){ for(let item of data.districtList){ level = item.level curList.push({name: item.name, center:item.center, adcode: item.adcode, cityCode: item.cityCode, level:item.level}) } }if(level === "province"){ this.provinces = curList } else if(level === "city"){ this.cities = curList } else if(level === "district"){ this.districts = curList } else if(level === "street"){ this.streets = curList }},