vue高德地图marker批量标记与InfoWindow提示框

一、前言

          由于数据量大，如果一个一个添加marker会造成页面卡顿，所以在此就使用了批量标记，特此研究出一下几种方法  在高德平台获取key 高德开放平台 | 高德地图API

二、批量添加marker标记

        1、海量点标记  MassMarks

                优点：当需要在地图展示数量为十万以内的点并且需要较好的性能表现时

                缺点：只能使用图片标点，不能自定义标点

        用法：

var styleObject = { // 样式
    url: '//vdata.amap.com/icons/b18/1/2.png',  // 图标地址
    size: new AMap.Size(11,11),      // 图标大小
    anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角
} 
var styleObject2 = { // 样式
    url: '//vdata.amap.com/icons/b18/1/1.png',  // 图标地址
    size: new AMap.Size(11,11),      // 图标大小
    anchor: new AMap.Pixel(5,5) // 图标显示位置偏移量，基准点为图标左上角
} 

// 样式对象数组
var styleObjectArr = [ styleObject, styleObject2];

// 实例化 AMap.MassMarks
var massMarks = new AMap.MassMarks({
  zIndex: 5, 	// 海量点图层叠加的顺序
  zooms: [3, 19],	 // 在指定地图缩放级别范围内展示海量点图层
  style: styleObjectArr 	//多种样式对象的数组
});

// 设置了样式索引的点标记数组
var data = [{
  lnglat: [116.405285, 39.904989],
  name: 'beijing',
  id:1,
  style: 0  // 该数据的样式取值styleObjectArr对应的样式索引
},{
  lnglat: [116.405285, 39.904989],
  name: 'beijing',
  id:1,
  style: 1
} //, …,{}, …
];

// 将数组设置到 massMarks 图层
massMarks.setData(data);

// 将 massMarks 添加到地图实例
massMarks.setMap(map);

具体可看官方用例：加载海量点-点标记-示例中心-JS API 示例 | 高德地图API

        2、点聚合 MarkerClusterer

                   优点：在不同的地图缩放级别对海量的数据点进行聚合展示，可以通过renderClusterMarker自定义marker样式

                   由于本数据不需要聚合显示，而且还需要指定一marker样式内容，所以具体用法请看官方示例：点聚合-点标记-示例中心-JS API 示例 | 高德地图API

        3、map.add(markers)

                    优点：可以批量添加marker，并且可以自定义marker样式，刚好满足本人需求