vue3.0引入高德地图行政查询

高德地图参考手册
高德地图api
高德行政查询实例
vue-map

npm install vue-amap --save

main.js

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
// 高德key
  key: 'key值',
// 插件集合 （插件按需引入）
 plugin: ['AMap','AMap.DistrictSearch'],
  // 高德 sdk 版本，默认为 1.4.4
  v:'1.4.4',
  uiVersion: '1.0'
});

map.vue

<template>
  <div class="warp">
    <div class="footers">
      <div class="amap-page-container">
      
        <el-amap
          vid="amapDemo"
          :zoom="zoom"
          :center="center"
          class="amap-demo"
          style=" height: 700px;"
          ref="map"
        >
        
        <el-amap-polygon  
            StrokeColor="#fff"   
            v-for="(polygon,index) in polygons" 
            :key="index" 
            :path="polygon.F.path">
        </el-amap-polygon>

        </el-amap>
      </div>
    </div>
  </div>
</template>

<script>

module.exports = {
  data() {
    return {
        zoom:7,
        center:[116.397128,39.916527],
        polygons:[],
        district:null
    }
  },
  methods: {
      drawBounds(){
          var that = this;
        //加载行政区划插件
        if(!that.district){
            var opts = {
                subdistrict: 0,   //获取边界不需要返回下级行政区
                extensions: 'all',  //返回行政区边界坐标组等具体信息
                level: 'city'  //查询行政级别为 市
            };
            //实例化DistrictSearch
           that.district = new AMap.DistrictSearch(opts);
        }
            //查询目标 江西
        that.district.search("九江", function(status, result) {
            // map.remove(polygons)//清除上次结果
            
            //创建行政区域变量   局部变量
            that.polygons = []; 
             
            //获取边界
            var bounds = result.districtList[0].boundaries;
            if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                    //生成行政区划polygon   绘制区域
                    var polygon = new AMap.Polygon({
                        // bubble:true,  //鼠标点击事件
                        cursor:"pointer",  //鼠标样式
                        strokeWeight: 2,   //轮廓线宽度
                        path: bounds[i],   //多边形节点
                        fillOpacity: 0,   //多边形填充透明度
                        fillColor: '#fff', //多边形填充颜色
                        strokeColor: '#0091ea'  //线条颜色
                    });
                    that.polygons.push(polygon); //添加查询结果
                }
            }
            AMap.Polygon.bind(that.polygons) //绑定地图 polygons 添加行政区域
            that.$refs.map.$amap.setFitView(that.polygons)//视口自适应
        });
      }
  },
  created(){
    setTimeout(()=>{
       this.drawBounds()
    },2000)
    
  }
};
</script>

<style scoped lang="scss">
.warp {
  .footers {
    height: 50%;
    //   background: cadetblue;s
  }
}
</style>

vue3.0引入