关于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
        }

      },