【vue高德地图】点位+多个覆盖物

点位

实现效果：

参考：基于vue+elementUI的网页中使用地图组件vue-amap高德地图
这个超详细！宝藏！

覆盖物

实现效果：
在上面地图基础配置上进行操作的。

<template>
  <div>
  	…………
    <el-container class="searchBox"> <!-- 这个控制地图显示位置大小 -->
      <!-- 显示地图的div -->
      <template>
        <div id="map"></div>
      </template>
    </el-container>
  </div>
</template>

<script
  type="text/javascript"
  src="https://webapi.amap.com/maps?key=申请的key&v=1.4.4&plugin=AMap.Geolocation,AMap.Autocomplete,AMap.PlaceSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MapType,AMap.PolyEditor,AMap.CircleEditor"
></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>
import api from "@/api";
import Vue from "vue";
import AMapLoader from '@amap/amap-jsapi-loader'
import VueAMap from "vue-amap";

export default {
  name: "neighborhood-gridding-droppoint",
  components: {},
  data() {
    return {
      map: null,
      center: [115.51661, 35.56921], //中心点坐标位置
      path:[],
      gridList: [],//查询出的网格信息
    };
  },
  mounted () {
    this.initMap();//初始化创建地图
  },

  methods: {
    // 初始化地图
    initMap () {
      AMapLoader.load({
        key: '申请的key值',
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        // 初始化地图
        this.map = new AMap.Map('map', {
          viewMode: '2D', //  是否为3D地图模式
          zoom: 16, // 初始化地图缩放级别
          center:this.center, // 中心点坐标
          resizeEnable: true
        })
        //查询数据
        this.getList(AMap);
      }).catch(e => {
        console.log(e)
      })
    },
    setPolygon (AMap) {
      this.gridList.forEach((item, index) => {
        if(item.length!=0){
          this.path = item.points;
          var polygon = new AMap.Polygon({
            map: this.map,
            path: this.path, // 设置多边形边界路径
            strokeColor: '#1791fc', // 线颜色
            strokeOpacity: 0.1, // 线透明度
            strokeWeight: 1, // 线宽
            fillColor: '#1E9FFF', // 填充色
            fillOpacity: 0.05, // 填充透明度
            bubble:true,
            zIndex:index,
        })
          //鼠标移入事件
          var _this=this;
          polygon.on('mouseover', function(e) {
          	  //改变颜色
              polygon.setOptions({
                fillOpacity: 0.2, 
                fillColor: '#FFB800', 
                zIndex: 50,
              });
              //显示信息窗体
              var content = ["<div style='background-color:white;border-radius:2px;padding:10px 15px';opacity:0.7;> " + item.orgName + '  </div>'];
              var infoWindow = new AMap.InfoWindow({
                isCustom: true, //使用自定义窗体
                content: content.join('<br>'),
                offset: new AMap.Pixel(15, -25),
              });
              //打开信息窗口
              infoWindow.open(_this.map, [e.lnglat.lng , e.lnglat.lat]); //后面的参数指的是经纬度，在此显示窗口
          })
          //鼠标移出事件
          polygon.on('mouseout', function(e) {
          	  //颜色恢复
               polygon.setOptions({
                    fillColor:'#1E9FFF',
                    fillOpacity: 0.05,
              })
              //窗体关闭
              _this.map.clearInfoWindow()
          })
          //画好后添加到地图上
          this.map.add(polygon)

      }
      })
	  //如果只有一个覆盖物的话可以用下面这个
      // 自动缩放并聚焦合适中心点
      // this.map.setFitView([polygon])
    },

    // 获取列表
    getList() {
    //调用接口
      api.xx.gridding
        .queryGridList(this.queryParams2)
        .then((data) => {
          this.gridList = data;
          //对获取的坐标进行处理
          this.polygonPath = [];
          //循环处理数据,处理好后画覆盖物
          this.gridList.forEach((item, index) => {
            var arry = [];
            var str; 
            //以下是把坐标变成[[xxx,xxx],[xxx,xxx],[xxx,xxx],...]这种格式
            str = item.points.replace(new RegExp('POLYGON', "g"), "")
            str = str.replace(/[()]/g, '');//去掉括号
            arry = str.split(",");
            item.points=[];
            if(arry.length!=1){//不为空
              arry.forEach((item2, index) => {
                var test=item2.replace(" ",',').split(",");
                // item.points.push(test);//!!!!!对数据格式进行处理!!!!!!
                item.points.push(new AMap.LngLat(test[0],test[1]));
              })
            }
          });
          // 循环调用画出覆盖物
          this.setPolygon(AMap);
        })
        .catch((error) => (this.loading = false));
    },
  },
};
</script>