vue+高德地图·选择省市经纬度定位到指定地方

最新推荐文章于 2024-07-16 16:09:32 发布

八百比晴明

最新推荐文章于 2024-07-16 16:09:32 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/m0_51981718/article/details/132814263

版权

文章描述了如何使用Vue.js和AMapJavaScriptAPI在地图组件中，当用户选择省市区时，地图平移到对应经纬度并高亮显示选中的轮廓。代码展示了如何初始化地图、响应省份选择事件以及实现地图的平移和高亮功能。

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

业务场景：当选择一个省市区时，地图平移到指定经纬度，并根据已有的经纬度数据进行高亮显示省市区的轮廓。

实现代码：

<template>
  <div>
    <!-- 地图容器 -->
    <div id="container"></div>
    <!-- 省份选择 -->
    <select v-model="selectedProvince" @change="zoomToProvince">
      <option value="">请选择省份</option>
      <option
        v-for="province in provinces"
        :value="province.name"
        :key="province.name"
      >
        {{ province.name }}
      </option>
    </select>
  </div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  data() {
    return {
      map: null, // 地图对象
      selectedProvince: "", // 选中的省份
      provinces: [
        // 省份列表，您可以根据需求自行扩展
        {
          name: "北京",
          center: [116.397428, 39.90923],
          border: [
          	// 北京市部分数据
            [116.011083, 40.25278],
            [116.011276, 40.252835],
            [116.011578, 40.252925],
            [116.011894, 40.252998],
            [116.012145, 40.253047],
            [116.003952, 40.241381],
            [116.004241, 40.241437],
            [116.004396, 40.24146],
            [116.004654, 40.241504],
            [116.005106, 40.241575],
            [116.00526, 40.241596],
            [116.011083, 40.25278],
          ],
        },
        { name: "上海", center: [121.472644, 31.231706] },
      ],
      highlightPolygon: null, // 用于高亮显示的多边形对象
    };
  },
  mounted() {
    // 初始化地图
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "高德地图的key",
        version: "2.0",
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            resizeEnable: true,
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [104.065735, 35.759367], //初始化地图中心点位置
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    zoomToProvince() {
      // 清除之前的高亮显示
      if (this.highlightPolygon) {
        this.highlightPolygon.setMap(null);
        this.highlightPolygon = null;
      }

      // 根据选中的省份平移到该省份
      const selectedProvinceData = this.provinces.find(
        (province) => province.name === this.selectedProvince
      );
      
      // 此方法是将地图平移到选择的经纬度位置
      // if (selectedProvinceData) {
      //   this.map.setZoomAndCenter(5, selectedProvinceData.center); // 设置缩放级别和中心点
      //   // 在地图上高亮显示选中的省份（您需要编写自己的高亮省份的代码）
      //   // 通常可以通过绘制多边形、添加覆盖物等方式来实现高亮显示
      // }
      
      // 省市区轮廓高亮
      if (selectedProvinceData) {
        this.highlightPolygon = new AMap.Polygon({
          path: selectedProvinceData.border,
          strokeColor: "#FFD700", // 黄色
          strokeWeight: 2,
          strokeOpacity: 1,
          fillColor: "#FFD700", // 填充颜色也设为黄色
          fillOpacity: 0.2,
          strokeStyle: "dashed", // 虚线样式
          zIndex: 100,
        });
        this.highlightPolygon.setMap(this.map);

        // 将地图视角调整到选中省份
        this.map.setFitView([this.highlightPolygon]);
      }
    },
  },
};
</script>

<style>
#container {
  width: 1400px;
  height: 400px;
}
</style>