| vue3 + 高德地图 | 您所在的位置：网站首页 › 市级城市地图 › vue3 + 高德地图 |
vue3 + 高德地图
|
1. 在项目中引入高德地图，注意要给装地图的盒子设置宽高！！！ import AMapLoader from '@amap/amap-jsapi-loader'; import { onMounted } from "vue"; // 注意：要想市级区域正常显示，必须添加安全密钥 window._AMapSecurityConfig = { securityJsCode: '你的安全密钥', } // 初始化地图 function initMap() { AMapLoader.load({ key: "你申请的key", // 申请好的Web端开发者Key，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: [ ], }).then((AMap) => { const map = new AMap.Map("container", { //设置地图容器id viewMode: "2D", //是否为3D地图模式 zoom: 4, //初始化地图级别 center: [113.808299, 34.791787], //初始化地图中心点位置 }); }).catch(e => { console.log(e); }) } onMounted(() => { initMap() })运行代码后，效果图如下所示：
2. 在初始化函数中，引入高德地图行政区查询服务，创建DistrictSearch对象，遍历数组查询后采用高德地图多边形绘制（AMap.Polygon）改变样式 详细可参考官网： 行政区查询-服务-教程-地图 JS API 1.4 | 高德地图API (amap.com) 多边形绘制和编辑-面-进阶教程-地图 JS API 2.0|高德地图API (amap.com) // 初始化地图 function initMap() { AMapLoader.load({ key: "你申请的key", // 申请好的Web端开发者Key，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: ["AMap.DistrictSearch"], }).then((AMap) => { const map = new AMap.Map("container", { //设置地图容器id viewMode: "2D", //是否为3D地图模式 zoom: 4, //初始化地图级别 center: [113.808299, 34.791787], //初始化地图中心点位置 }); var districtSearch = new AMap.DistrictSearch({ subdistrict: 0, //获取边界不需要返回下级行政区 extensions: 'all', //返回行政区边界坐标组等具体信息 level: 'district' //查询行政级别为 市 }) var polygons = []; let arr = ["郑州市","青岛市","徐州市","安阳市","泰安市"] //此处为高亮的市名 arr.forEach(item => { districtSearch.search(item, function (status, result) { // 查询成功时，result即为对应的行政区信息 map.remove(polygons)//清除上次结果 var bounds = result.districtList[0].boundaries; if (bounds) { for (var i = 0, l = bounds.length; i < l; i++) { //生成行政区划polygon var polygon = new AMap.Polygon({ strokeWeight: 1, path: bounds[i], fillOpacity: 0.4, fillColor: '#80d8ff', strokeColor: '#0091ea' }); polygons.push(polygon); } } map.add(polygons) map.setFitView(polygons);//视口自适应 }) }) }).catch(e => { console.log(e); }) }运行代码后，我们想要的市级地区高亮效果就完成啦！
若还想更为深入的了解其他相关属性，可前往高德地图官网浏览学习： 搜索服务-参考手册-地图 JS API 1.4 | 高德地图API (amap.com) 4. 完整代码如下所示： import AMapLoader from '@amap/amap-jsapi-loader'; import { onMounted } from "vue"; // 注意：要想市级区域正常显示，必须添加安全密钥 window._AMapSecurityConfig = { securityJsCode: '你的安全密钥', } // 初始化地图 function initMap() { AMapLoader.load({ key: "你申请的key", // 申请好的Web端开发者Key，首次调用 load 时必填 version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: ["AMap.DistrictSearch"], }).then((AMap) => { const map = new AMap.Map("container", { //设置地图容器id viewMode: "2D", //是否为3D地图模式 zoom: 4, //初始化地图级别 center: [113.808299, 34.791787], //初始化地图中心点位置 }); var districtSearch = new AMap.DistrictSearch({ subdistrict: 0, //获取边界不需要返回下级行政区 extensions: 'all', //返回行政区边界坐标组等具体信息 level: 'district' //查询行政级别为 市 }) var polygons = []; let arr = ["郑州市","青岛市","徐州市","安阳市","泰安市"] //此处为高亮的市名 arr.forEach(item => { districtSearch.search(item, function (status, result) { // 查询成功时，result即为对应的行政区信息 map.remove(polygons)//清除上次结果 var bounds = result.districtList[0].boundaries; if (bounds) { for (var i = 0, l = bounds.length; i < l; i++) { //生成行政区划polygon var polygon = new AMap.Polygon({ strokeWeight: 1, path: bounds[i], fillOpacity: 0.4, fillColor: '#80d8ff', strokeColor: '#0091ea' }); polygons.push(polygon); } } map.add(polygons) map.setFitView(polygons);//视口自适应 }) }) }).catch(e => { console.log(e); }) } onMounted(() => { initMap() }) .tourism { width: 80%; margin: 0 auto; padding-top: 60px; box-sizing: border-box; } #container { padding: 0px; margin: 0px auto; width: 100%; height: 400px; } |
3. 其他行政区级别也可参考本文章，通过修改 AMap.DistrictSearch 中的 level 属性实现级别切换。
【本文地址】
公司简介
联系我们