vue3高德地图 省份区域

### 集成高德地图API至Vue3项目 为了在 Vue3 项目中集成并展示省份区域的地图，需遵循特定流程来加载和配置高德地图插件。此过程涉及引入必要的 JavaScript 文件以及编写相应的初始化逻辑。 #### 创建地图实例 首先，在 HTML 文件头部加入高德地图官方提供的 script 标签以载入 API 库： ```html <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=您的密钥"></script> ``` 接着定义一个方法用于创建地图对象，并设置初始视图参数如中心位置、缩放级别等[^1]。 #### 加载行政区划数据 通过调用 `AMap.plugin` 方法注册所需插件——'AMap.DistrictSearch' 插件能够帮助获取指定地区的边界信息。完成注册后即可执行搜索操作获得目标地区详情，进而绘制多边形表示该区范围[^2]。 ```javascript import { onMounted } from 'vue'; export default { setup() { let map; const initMap = () => { map = new AMap.Map('container', { zoom: 4, center: [105.67, 38.1], // 设置中国为中心点 }); AMap.plugin(['AMap.DistrictSearch'], function () { var districtSearch = new AMap.DistrictSearch({ extensions: 'all', level: 'province' }); districtSearch.search('广东', (status, result) => { drawPolygon(result.districtList[0]); }); }); function drawPolygon(district){ var bounds = district.boundaries; if(bounds){ for(var i=0;i<bounds.length;i++){ var polygon = new AMap.Polygon({ path:bounds[i], strokeWeight:1, fillOpacity:0.4, fillColor:'#CCFFFF', strokeColor:'#FFFFFF' }) map.add(polygon); } } } }; onMounted(() => { initMap(); }); return {}; }, }; ``` 上述代码片段展示了如何利用 DistrictSearch 组件查询某省的信息，并据此构建覆盖物呈现于地图之上。注意替换其中的 key 值为个人申请得到的有效开发者秘钥。