关于vue.js:vue2-中使用高徳地图amap

我的项目中须要加载地图， 抉择应用高徳地图(更易懂易用稳固些)
1.首先须要在高徳地图官网申请一个开发者账号 失去一个key
2.在vue2 的index.html 中加载高徳js库

//AMap <script src="https://webapi.amap.com/maps?v=1.4.8&key=caaa086bdf5666322fba3baf5a6a2c03&plugin=AMap.DistrictSearch"></script>// AMapUI<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>

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

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

4.后果是这样的

5.开始你的地图代码了

<!-- 地图 -->        <div class="flex">          <div style="width:80%; height:450px;border:1px solid #dcdcdc" id="map_container">            <!-- 地图显示区 -->          </div>          <div style="width:20%" class="flex-column margin-left-10">            <div id="searchBar">                <input id="keyword" placeholder="请输出关键字" style="width:276px;height:30px;" />                </div>            <div id="searchResults">              <!-- 后果搜寻区 -->            </div>          </div>        </div>

在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        }      },