vue2高德地图鼠标移入标注点创建覆盖物

在Vue2中集成高德地图并实现鼠标悬停在标注点上创建覆盖物，你需要结合`vue-amap`这个库，它提供了一个易用的API来操作高德地图。以下是基本步骤：

1. 首先，在项目中安装`vue-amap`库：

   npm install vue-amap amap-jsapi-loader

2. 在`main.js`或其他合适的地方，引入并注册组件：

   import VueAMap from 'vue-amap';
   Vue.use(VueAMap);

3. 创建一个组件，例如`MarkerWithOverlay.vue`，并将高德地图配置添加到`data`选项中：

   <template>
     <div>
       <amap :center="center" :zoom="zoom">
         <amap-marker v-for="(marker, index) in markers" :key="index"
           :position="marker.position"
           @mouseover="handleMarkerMouseOver(index)">
           <!-- 标注样式 -->
         </amap-marker>
         <!-- 覆盖物容器 -->
         <div ref="overlayContainer" v-show="showOverlay">
           <!-- 这里会动态插入覆盖物 -->
         </div>
       </amap>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         center: [116.404, 39.915], // 北京坐标
         zoom: 13,
         markers: [
           { position: [116.404, 39.915] },
           // 更多标注数据...
         ],
         showOverlay: false, // 初始隐藏覆盖物
       };
     },
     methods: {
       handleMarkerMouseOver(index) {
         this.$refs.overlayContainer.innerHTML = ''; // 清空旧的覆盖物
         const marker = this.markers[index];
         // 使用高德API创建覆盖物并设置位置
         const overlay = new AMap.Marker({
           position: marker.position,
         });
         overlay.open(this.$refs.overlayContainer); // 显示覆盖物
         this.showOverlay = true; // 设置状态显示覆盖物