百度地图 marker 灵动变身：外部事件控制

前端

2024-01-05 23:19:49

事件监听器：开启动态交互之门

百度地图 marker 的动态效果离不开事件监听器的支持。事件监听器如同一个守卫，时刻监听着用户的动作，当触发预设事件时，便会执行相应的操作。对于 marker 来说，常见的事件监听器包括：

click ：当 marker 被点击时触发。
dblclick ：当 marker 被双击时触发。
mouseover ：当鼠标悬停在 marker 上时触发。
mouseout ：当鼠标离开 marker 时触发。

通过给 marker 添加这些事件监听器，我们可以让 marker 在特定事件下响应用户的交互，实现诸如改变图标、显示气泡或执行特定操作等动态效果。

marker 方法：灵活操控视觉表现

除了事件监听器，百度地图还提供了丰富的 marker 方法，供开发者直接操控 marker 的视觉表现。这些方法包括：

setPosition(point) ：设置 marker 的地理位置。
setIcon(icon) ：设置 marker 的图标。
setTop(top) ：设置 marker 的 z-index 值，控制 marker 的显示层级。
setLabel(label) ：设置 marker 的文本标签。
show() ：显示 marker。
hide() ：隐藏 marker。

通过调用这些 marker 方法，开发者可以动态地修改 marker 的外观和位置，实现更加丰富的动态效果。

实例详解：点亮 marker 的动态之美

下面我们通过一个实际例子来展示如何使用外部事件控制和 marker 方法实现 marker 的动态效果。

假设我们有一个地图场景，其中包含多个 marker，每个 marker 代表一个景点。当用户点击某个 marker 时，我们希望该 marker 的图标变为选中状态，同时显示一个气泡，展示景点的详细信息。

// 创建 marker
var marker = new BMap.Marker(point);

// 添加点击事件监听器
marker.addEventListener("click", function() {
  // 修改 marker 图标
  marker.setIcon(selectedIcon);

  // 显示气泡
  var infoWindow = new BMap.InfoWindow(point);
  map.openInfoWindow(infoWindow, point);
});