vue-amap 行政区域，信息框，maker

最近做公司的项目由于要使用高德地图显示台区的图标，点击图标跳转到详细页，鼠标指针放到图标上显示信息框，还要有行政区，使用了高德地图，感觉vue-amap挺好的，就觉得使用它，那好，开干。

1.先下载vue-amap 这这一步自行百度

2.在main.js引入依赖

// 引入vue-amap

import VueAMap from 'vue-amap';

// 初始化vue-amap

VueAMap.initAMapApiLoader({

  // 高德的key

  key: 'xxxxxxxxxxx',

  // 插件集合

  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor','MarkerClusterer','AMap.DistrictSearch'],

  // 高德 sdk 版本，默认为 1.4.4

  v: '1.4.4'

});

3.在页面中引入vue-amap

<div class="map-container">

                <el-amap vid="amapDemo" ref="map" :zoom="zoom" :center="center" :events="events"  :plugin="plugin">

                    <el-amap-marker v-for="marker in markers" :key="marker.index" :icon="icon" :position="marker.position" :events="marker.events"></el-amap-marker>

                    <el-amap-info-window :offset="[20,-25]" v-if="window" :position="window.position" :visible="window.visible" :content="window.content"></el-amap-info-window>

                    <el-amap-polygon

                        strokeColor="red"

                        strokeOpacity="1"

                        fillColor="#80d8ff"

                        fillOpacity="0.01"

                        v-for="(polygon, index) in polygons"

                        :key="index"

                        strokeWeight="5"

                        :path="polygon.Ce.path">

                    </el-amap-polygon>

                </el-amap>

            </div>

 

4.data部分----------------------------------------------------------------

    data() {

       let self = this;

        return {

            markers: [],

            infoData: [{

                id: '22',

                name: 'xxxx小区',

                address:[108.36637,22.817746],

              

                

                }, {

                id: '21',

                name: 'xxxx小区',

                address: [108.361831,22.839278],

       

                }],

            plugin: ['AMap.Scale',  'AMap.ToolBar'],

            zoom: 11,

            center: [108.967055,22.83996],

            windows: [],

            window: '',

            icon:markerIcon, 

            markerRefs: [],

            polygons: [],

            district: null,

            events: {

              init(o) {

                setTimeout(() => {

                  console.log(self.markerRefs);

                  let cluster = new AMap.MarkerClusterer(o, self.markerRefs,{

                    gridSize: 80, minClusterSize:2, maxZoom:11,zoomOnClick:true

                  });

                }, 50);

              }

            }   

        }

    },

5.方法部分------------------------------------------------------------------------------------

   methods: {

      drawBounds() {

        var that = this;

        //加载行政区划插件

        if (!that.district) {

          //实例化DistrictSearch

          var opts = {

            subdistrict: 0, //获取边界不需要返回下级行政区

            extensions: "all", //返回行政区边界坐标组等具体信息

            level: "city", //查询行政级别为 市

          };

          that.district = new AMap.DistrictSearch(opts);

        }

        //行政区查询

        that.district.search('南宁市', function (status, result) {

          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({

                strokeWeight: 1,

                path: bounds[i],

                fillOpacity: 0.4,

                fillColor: "#80d8ff",

                strokeColor: "#0091ea",

              });

              that.polygons.push(polygon);

            }

          }

          console.log("polygons");

          console.log(that.polygons);

          AMap.Polygon.bind(that.polygons);

          that.$refs.map.$amap.setFitView(that.polygons); //视口自适应

        });

      }, 

    },

6.mounted部分---------------------------------------------------------------------------------------------------------

   mounted() {

        let markers = [];

        let windows = [];

        let self = this;

        for (let i = 0 ; i < this.infoData.length ; i ++) {

          markers.push({

            position: this.infoData[i].address,

            events: {

              mouseover() {

                self.windows.forEach(window => {

                  window.visible = false;

                });

                self.window = self.windows[i];

                self.$nextTick(() => {

                  self.window.visible = true;

                });

              },

              mouseout() {

                self.windows.forEach(window => {

                  window.visible = false;

                });

              },

              click() {

                  self.$router.replace(self.infoData[i].topo)

              },

              init(o) {

                self.markerRefs.push(o);

              }

            }

          });

          windows.push({

            position: this.infoData[i].address,

            content: `<div>名称：${this.infoData[i].name}</div><div>位置：${this.infoData[i].address}</div>`,

            visible: false

          });

        }

        this.markers = markers;

        this.windows = windows;

    },

7.created部分----------------------------------------这个地方一定要用定时器，否则会报错

 created() {

    setTimeout(() => {

        this.drawBounds();  

    }, 1000);

如果有更好的实现方式和代码中有错误，请您留言指正，不胜感激