高德地图API之marker的坑

高德地图API是一款强大的工具，可帮助开发者轻松构建丰富的地图应用程序。然而，在使用该API时，难免会遇到一些坑。本文将讨论高德地图API中使用marker时遇到的一个问题，即marker无法通过鼠标滚轮滚动。

marker无法通过鼠标滚轮滚动

marker是地图上标记位置的元素，通常用于在地图上显示兴趣点或其他重要信息。默认情况下，高德地图API添加的marker无法通过鼠标滚轮滚动。这可能会导致一些问题，例如：

• 用户无法通过鼠标滚轮缩放地图时，marker可能会被遮挡。
• 用户无法通过鼠标滚轮平移地图时，marker可能会移出视野。

为了解决这个问题，可以设置marker的enableDragging属性为true。这将允许用户通过鼠标拖动marker来改变其位置。但是，需要注意的是，如果启用了enableDragging属性，则marker可能会被意外拖动到错误的位置。

解决方案

解决marker无法通过鼠标滚轮滚动这个问题的另一种方法是使用高德地图API提供的MarkerClusterer类。MarkerClusterer类可以将多个marker聚合成一个marker cluster，这样就可以通过鼠标滚轮缩放地图时，隐藏掉marker cluster中的marker。

// 创建地图
var map = new AMap.Map('map-container', {
  center: [116.48385, 39.990469],
  zoom: 11
});

// 创建marker clusterer
var markerClusterer = new AMap.MarkerClusterer(map, {
  gridSize: 60,
  maxZoom: 11
});

// 添加marker到marker clusterer
var marker1 = new AMap.Marker({
  position: [116.48385, 39.990469],
  title: '北京市政府'
});
var marker2 = new AMap.Marker({
  position: [116.48385, 39.991469],
  title: '清华大学'
});
var marker3 = new AMap.Marker({
  position: [116.48385, 39.992469],
  title: '人民大会堂'
});
markerClusterer.addMarker(marker1);
markerClusterer.addMarker(marker2);
markerClusterer.addMarker(marker3);

结语

高德地图API是一款强大的工具，但使用时难免会遇到一些坑。本文讨论了高德地图API中使用marker时遇到的一个问题，即marker无法通过鼠标滚轮滚动。本文提供了两种解决此问题的方案，分别是设置marker的enableDragging属性为true和使用高德地图API提供的MarkerClusterer类。