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

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

交互

我在用 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>

地图应用百度地图

我来解答赞 6 收藏

反馈

2 条解答

予曦 Lv1

问题很简单：百度地图GL的事件绑定在某些版本下有bug，用 marker.on('click', function() {...}) 代替 marker.addEventListener 就好了。

或者更省事点，直接用百度地图的InfoWindow代替点击事件：

const infoWindow = new BMapGL.InfoWindow('这是地点信息', {

  width: 200,

  height: 100,

  title: '标题'

})

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

  map.openInfoWindow(infoWindow, marker.getPosition())

})

如果你非要点击事件不可，就换成 marker.on('click', () => {...}) 这写法基本能解决。

2026-03-11 19:00

春艳酱~ 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