百度地图在Vue中加载后无法点击标记怎么办？

Tr° 雨萱提问于 2026-03-06 11:22:25 阅读 2

交互

我在用 Vue3 + 百度地图 API 做一个地点展示功能，地图能正常显示，marker 也加进去了，但点击 marker 没有任何反应，绑定的 click 事件根本没触发。我试过官方文档里的写法，也检查了 BMapGL 是否加载完成，还是不行。

下面是我组件里初始化地图和添加 marker 的代码：

<template>
  <div id="map" style="width: 100%; height: 500px"></div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  const map = new BMapGL.Map('map')
  map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 12)

  const marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915))
  marker.addEventListener('click', () => {
    alert('点我了！')
  })
  map.addOverlay(marker)
})
</script>

地图应用百度地图

我来解答赞 1 收藏

反馈

1 条解答

春艳酱~ Lv1

问题在于百度地图GL版的事件绑定要用marker.on而不是addEventListener。改成这样：

const marker = new BMapGL.Marker(new BMapGL.Point(116.404, 39.915))

marker.on('click', () => {

  alert('点我了！')

})

map.addOverlay(marker)

百度地图这API真坑，明明其他API用addEventListener，就它非要特立独行。

2026-03-06 12:34