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

      },