vue3 + 高德地图——实现部分市级地区高亮

最新推荐文章于 2024-04-24 23:21:53 发布

咸鱼海里游

最新推荐文章于 2024-04-24 23:21:53 发布

阅读量1.1k

点赞数 10

分类专栏：高德地图文章标签：前端框架 vue.js

本文链接：https://blog.csdn.net/weixin_52489038/article/details/138118224

版权

高德地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中使用高德地图API，包括引入地图、设置安全密钥、初始化地图并展示市级行政区的高亮效果，以及使用行政区查询服务和多边形绘制功能。

摘要由CSDN通过智能技术生成

1. 在项目中引入高德地图，注意要给装地图的盒子设置宽高！！！

<template>
  <div class="tourism">
    <div style="background-color: #ffffff;">
      <div id="container"></div>
    </div>
  </div>
</template>

<script setup>
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()
})
</script>

运行代码后，效果图如下所示：

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);
  })
}

运行代码后，我们想要的市级地区高亮效果就完成啦！

3. 其他行政区级别也可参考本文章，通过修改 AMap.DistrictSearch 中的 level 属性实现级别切换。

若还想更为深入的了解其他相关属性，可前往高德地图官网浏览学习：

搜索服务-参考手册-地图 JS API 1.4 | 高德地图API (amap.com)

4. 完整代码如下所示：

<template>
  <div class="tourism">
    <div style="background-color: #ffffff;">
      <div id="container"></div>
    </div>
  </div>
</template>

<script setup>
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()
})
</script>

<style>
.tourism {
  width: 80%;
  margin: 0 auto;
  padding-top: 60px;
  box-sizing: border-box;
}

#container {
  padding: 0px;
  margin: 0px auto;
  width: 100%;
  height: 400px;
}
</style>