高得地图vue怎么实现鼠标移入省份高亮

### Vue 中实现高德地图省份鼠标移入高亮效果的方法 要在 Vue 中实现高德地图省份鼠标移入时的高亮效果，可以按照以下方式构建功能逻辑： #### 初始化 AMap 和 DistrictSearch 插件 首先，在项目中加载高德地图 API 并注册 `AMap.DistrictSearch` 插件。通过 `<script>` 标签或者动态导入的方式引入必要的资源[^3]。 ```html <script language="javascript" src="https://webapi.amap.com/maps?v=2.0&key=your_api_key&plugin=AMap.DistrictSearch"></script> ``` 在 Vue 组件的生命周期钩子（如 `mounted`）中初始化地图实例并配置 `DistrictSearch` 对象来获取行政区域数据[^2]。 #### 地图组件中的核心逻辑 以下是完整的代码示例以及说明： ```vue <template> <div id="mapContainer" style="width: 100%; height: 500px;"></div> </template> <script> export default { data() { return { map: null, polygons: [], }; }, mounted() { this.initMap(); this.loadProvincesData(); }, methods: { initMap() { this.map = new AMap.Map('mapContainer', { zoom: 4, // 初始缩放级别 center: [108.9476, 34.2636], // 默认中心点坐标 }); }, loadProvincesData() { const districtSearch = new AMap.DistrictSearch({ level: 'province', // 查询省级行政区划 extensions: 'all', }); districtSearch.search('', (status, result) => { if (status === 'complete') { result.districtList.forEach((district) => { this.addPolygon(district); }); } }); }, addPolygon(district) { const bounds = district.boundaries; if (!bounds || !Array.isArray(bounds)) return; const polygon = new AMap.Polygon({ path: bounds[0], fillColor: '#fff', // 原始填充颜色 strokeColor: '#ccc', // 边框颜色 fillOpacity: 0.5, cursor: 'pointer', }); this.polygons.push(polygon); // 添加到地图上 this.map.add(polygon); // 设置鼠标事件监听器 polygon.on('mouseover', () => { polygon.setOptions({ fillColor: '#ffcc00' }); // 修改为高亮颜色 }); polygon.on('mouseout', () => { polygon.setOptions({ fillColor: '#fff' }); // 恢复原始颜色 }); }, }, }; </script> ``` 上述代码实现了以下几个关键功能： - **地图初始化**：调用 `new AMap.Map()` 方法创建地图容器，并设置初始参数。 - **查询省级边界数据**：利用 `AMap.DistrictSearch` 获取中国各省市的地理边界信息。 - **绘制多边形**：基于返回的数据逐一渲染每个多边形，并绑定鼠标悬停事件以调整其样式。 #### 关键技术细节 - 使用 `polygon.on('mouseover', callback)` 来捕获鼠标的进入动作，并更改当前选中区域的颜色属性[^1]。 - 同样地，当光标离开该范围时恢复默认状态 (`mouseout`)。 以上方法能够满足需求的同时保持良好的性能表现和用户体验。 ---