首页vue中使用高德地图，当鼠标移入地图覆盖物，给覆盖物标上颜色，并获取对应坐标集合

vue中使用高德地图，当鼠标移入地图覆盖物，给覆盖物标上颜色，并获取对应坐标集合

时间: 2025-02-03 18:14:38 浏览: 152

在Vue中使用高德地图(Amap)实现这个功能，你需要结合`vue-amap`库来操作地图并监听地图事件。首先，安装依赖： ```bash npm install amap-vue@latest vue-amap ``` 然后，在组件中初始化地图并配置覆盖物样式： ```html <template> <amap :center="mapCenter" :zoom="mapZoom"> <amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position" @mouseover="onMarkerMouseOver(marker)" :data-key="marker.dataKey">  <amap-polygon :stroke-color="#ff0000" :fill-color="marker.isHover ? 'red' : 'transparent'" :path="marker.path" /> </amap-marker> </amap> </template> <script> import { AMap, Marker, Polygon } from "vue-amap"; export default { components: { AMap, Marker, Polygon, }, data() { return { mapCenter: [116.404, 39.915], // 北京中心点坐标 mapZoom: 13, // 地图缩放级别 markers: [ { position: [116.407, 39.904], path: [[116.407, 39.904], [116.408, 39.905]], isHover: false, dataKey: 'key1', }, // 添加其他标记... ], }; }, methods: { onMarkerMouseOver(marker) { marker.isHover = true; // 当鼠标移入时改变覆盖物的颜色 console.log('Marker', marker.dataKey, 'is hovered at:', marker.position); }, onMarkerMouseOut(marker) { marker.isHover = false; // 当鼠标移出时恢复原色 }, }, }; </script> ``` 在这个例子中，我们创建了几个标记并在`onMarkerMouseOver`方法里改变其颜色。当你将鼠标移动到某个覆盖物上，该覆盖物会变色，并通过`console.log`输出对应数据键和坐标。

阅读全文