鼠标悬浮到标记弹出信息

Question

Vue3+腾讯地图，如何使 鼠标悬浮到标记之上，会弹出标记的id信息

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题分析： 要实现鼠标悬浮到标记上弹出标记的id信息，我们需要使用腾讯地图的API，结合Vue3的指令，来监听鼠标事件，获取标记信息，并弹出标记信息。具体步骤如下：

1. 在Vue3组件中引入腾讯地图的API和jquery库（为了方便处理标记信息）：

<script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1. 在组件的mounted钩子函数中初始化地图，并创建标记：

mounted() {
  // 初始化地图
  let map = new qq.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new qq.maps.LatLng(39.916527,116.397128),
  });
  // 创建标记
  let marker = new qq.maps.Marker({
    position: new qq.maps.LatLng(39.916527,116.397128),
    map: map,
    id: 1, // 标记的id信息
  });
},

1. 在标记上绑定鼠标事件：

marker.addListener('mouseover', function() {
  // 鼠标悬浮上去时，弹出标记的id信息
  let id = this.id;
  let markerInfo = `<div>标记的id是：${id}</div>`;
  let infoWindow = new qq.maps.InfoWindow({
    map: map,
  });
  infoWindow.setContent(markerInfo);
  infoWindow.setPosition(this.getPosition());
});

这样，当鼠标悬浮到标记上时，就会弹出包含标记id信息的弹窗。 完整代码示例：

<template>
  <div id="map" style="height: 400px"></div>
</template>
<script>
export default {
  mounted() {
    // 初始化地图
    let map = new qq.maps.Map(document.getElementById('map'), {
      zoom: 13,
      center: new qq.maps.LatLng(39.916527,116.397128),
    });
    // 创建标记
    let marker = new qq.maps.Marker({
      position: new qq.maps.LatLng(39.916527,116.397128),
      map: map,
      id: 1, // 标记的id信息
    });
    // 在标记上绑定鼠标事件
    marker.addListener('mouseover', function() {
      // 鼠标悬浮上去时，弹出标记的id信息
      let id = this.id;
      let markerInfo = `<div>标记的id是：${id}</div>`;
      let infoWindow = new qq.maps.InfoWindow({
        map: map,
      });
      infoWindow.setContent(markerInfo);
      infoWindow.setPosition(this.getPosition());
    });
  }
}
</script>