高德地图JSAPI点位相关操作

---

新建点位获取地理信息

新建点位时要拿到地理信息，使用高德地图引擎提供的地理编码能力可获取真实的地理信息，还要考虑在部分地图位置上新建点位时获取不到经纬度信息的情况。

开启高德引擎的地理编码能力，首先是使用的key值必须是web端(JS API)，其次是key值要和安全密钥一起使用，所以要在全局注册安全密钥。

window._AMapSecurityConfig = {
  securityJsCode: 'xxxx', // 高德地图 key值对应的密钥
}

开启地理编码功能

// 在高德地图加载完成后即可开启此功能
window.AMap.plugin(['AMap.Geocoder'], () => {
     this.geocoder = new window.AMap.Geocoder();
  },
)

获取地理信息，进行新建点位操作。

addPoint(e) {
  this.geocoder.getAddress(e.lnglat, (status, result) => {
    if (status === 'complete' && result.info === 'OK') {
      this.marker = new window.AMap.Marker({
        position: e.lnglat,
        anchor: 'bottom-center',
        offset: new window.AMap.Pixel(0, 0),
        content: 'xxxxx', // 内容省略了
        map: window.map,
      });
    } else {
      // 获取不到经纬度信息的情况
      this.$message.warning('此位置无经纬度，无法新建点位');
    }
  });
}

点位渲染

点位渲染实现思路

1. 考虑到大数据点位性能问题，加入了点位聚合的方案，又考虑到浏览器内存的问题，最终采用了点位后端聚合的方案。
2. 由于是后端聚合，所以在绘制点位实例时，不能直接使用icon图标，要使用content进行自定义点位内容，主要是为了方便绘制聚合点与聚合数量。
3. 前端在每次地图可视区移动结束后，会重新调取获取点位接口进行点位重绘，入参为基础的当前地图可视区经纬度和当前地图层级。
4. 所有的点位实例要存储在一个对象中，这样点位实例可进行统一管理，方便查询与获取，点位名称的显示与隐藏也可进行统一处理。

自定义点位内容

1. 点位渲染分为聚合点位渲染与非聚合点位渲染，聚合点位只需要绘制在地图上即可，非聚合点位在绘制在地图上后还需要监听点击等事件，进行后续需求梳理。
2. 点位的渲染采用自定义点位内容content的形式，根据不同的点位图标渲染成不同的点位样式。

自定义点位内容content的方式有多种，提供两种简单思路：

	// 方式一，css中自己写content的样式
    marker = new window.AMap.Marker({
      position: v.lnglat,
      anchor: 'bottom-center',
      offset: new window.AMap.Pixel(0, 0),
      content:  `
      <div class="content" style="width:32px;background-image:url(${getIconName(v.icon)}.svg)"></div>
      `,
    }

	// 方式二，css中自己写content的样式
	marker = new window.AMap.Marker({
      position: v.lnglat,
      anchor: 'bottom-center',
      offset: new window.AMap.Pixel(0, 0),
      content:  this.contentDOM(list),
    }
    contentDOM(list) {
	  const htmlDom = document.createElement('div');
	  htmlDom.setAttribute('class', 'content');
	  list.forEach((v) => { // list为设备列表
	    const img = document.createElement('img');
	    img.src = `xxxxx.svg`;
	    img.onload = () => {
	      htmlDom.appendChild(img);
	    };
	  });
	  return htmlDom;
	},

点位名称显示与隐藏

1. 地图上所有点位的名称的显示与隐藏可通过点位的label值进行控制。
2. 当需要显示点位名称时，设置一个label值即可，当需要隐藏点位名称时，label值赋值空字符串即可。

// 显示点位名称
target.setLabel({
  content: `xxxxxx`,
  direction: 'bottom',
});
// 隐藏点位名称
target.setLabel({
  content: '',
  direction: 'bottom',
});