高德地图自定义marker

最新推荐文章于 2025-04-02 09:34:24 发布

原创最新推荐文章于 2025-04-02 09:34:24 发布 · 798 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#高德地图

高德地图js 专栏收录该内容

17 篇文章

订阅专栏

该博客详细介绍了如何利用高德地图API（AMap）创建并添加自定义Marker到地图上。通过设置Marker的内容、位置以及样式，实现了个性化地图标记的功能。这在地理信息系统或者地图应用开发中非常实用。

function AddPoint (arr) {
  let index = 1 + markerList.length // 序号
  var content = '<div class="marker-icon">' + index + '</div>'; // 自定义marker

  var marker = new AMap.Marker({
    content: content,
    position: arr,//位置
  })
  map.add(marker);//添加到地图
}

.marker-icon {
  width: 24px;
  height: 24px;
  color: #fff;
  background: url(images/mark.png);
  font-size: 14px;
  text-align: center;
  align-items: center;
}