【高德地图】自定义覆盖物点的样式

​

 为了跟系统的风格统一，有更丰富美观的呈现效果，有时我们需要自定义高德地图覆盖物点的样式，那么需要如何设置呢？

​编辑

 我们可以写一个方法设置点的样式，在初始化渲染点时，调用该设置样式方法。注意 marker.setOffset 设置值的大小，需要跟图片匹配，否则地图在缩放的时候，点会出现飘移的情况。

export function getMarkerContent(
  type: NodeType | undefined | null,
  count: number,
  isActive: boolean,
  extData?: any,
  isMouseIn?: boolean,
) {
  const nameDiv = isMouseIn
    ? `<div class='map-item__name'> <p class='map-item__dot ${
        isActive ? 'active' : 'normal'
      }'></p>${extData?.nodeName} </div>`
    : '';
  return `
  <div class="map-item ${isActive ? 'map-item--active' : ''}">
    ${nameDiv}
    <div class="map-item__base">
      <img src="${getCenterImg(type, isActive)}">
    </div>
    <div class="map-item__num ${count ? '' : 'map-item__num--hidden'}">${count}</div>
  </div>
  `;
}

export async function setMarkerStyle(
  type: NodeType | undefined | null,
  count: number,
  isActive: boolean,
  marker: any,
  extData?: any,
  isMouseIn?: boolean,
) {
  const AMap = await loadAmapModule();
  const content = getMarkerContent(type, count, isActive, extData, isMouseIn);
  const offsetNum = isActive ? -36 : -29;
  marker.setContent(content);
  marker.setOffset(new AMap.Pixel(offsetNum, offsetNum));
  if (extData) {
    marker.setExtData(extData);
  }
}

初始化地图，渲染覆盖物点

new AMap.MarkerCluster(this.amap, pointList, {
  renderClusterMarker: pointRender,
  renderMarker: pointRender,
});

​编辑

​