VU3和高德地图打造你的私人地理领地

2023-02-20 08:40:15

Vue3 + 高德地图：打造你的专属地理领地

准备好开启地理探索的新篇章吧！使用 Vue3 和高德地图，你将轻而易举地构建出专属于你的地理王国。无论是深入某个城市的肌理，还是纵览某个地区的宏观格局，本文将为你提供一步步的指导和代码示例。

一触即发，展现地理风貌

只需几行简洁的代码，你便可借助 Vue3 和高德地图，呈现出令人惊叹的地理风采。

导入必要库

踏上征程的第一步，需要先导入必备的库。

import Vue from "vue";
import AMap from "AMap";

初始化地图实例

接下来，你需要初始化地图实例，就像铺设你地理世界的基石。

const map = new AMap.Map("map", {
  center: [118.101222, 24.491092], // 以厦门市中心经纬度为例
  zoom: 11, // 设置初始缩放级别，根据实际需求调整
});

设置遮罩区域

为了实现反向镂空的效果，你需要设置一个遮罩区域，就像给你的地理版图蒙上一层神秘的面纱。

const mask = new AMap.Polygon({
  path: [
    [118.037052, 24.384896], // 西南角经纬度
    [118.24607, 24.384896], // 东南角经纬度
    [118.24607, 24.650647], // 东北角经纬度
    [118.037052, 24.650647], // 西北角经纬度
  ],
});
map.add(mask);

添加点击事件

当用户在你的地理版图上轻触时，你希望区域名称在单独的展示区域中浮出水面，就像揭开地理之谜的钥匙。

map.on("click", (e) => {
  const lng = e.lnglat.getLng();
  const lat = e.lnglat.getLat();
  // 根据经纬度查询区域名称，就像打开地理知识宝库
  AMap.service("AMap.Geocoder", (Geocoder) => {
    Geocoder.getAddress([lng, lat], (status, result) => {
      if (status === "complete" && result.info === "OK") {
        // 获取区域名称，就像拨开地理迷雾
        const district = result.regeocode.addressComponent.district;
        // 在单独展示区域中呈现区域名称，就像在地图上点亮一盏明灯
        document.getElementById("result").innerHTML = district;
      }
    });
  });
});

厦门地图，指尖触达

以厦门地图为例，让我们具体探索如何使用 Vue3 和高德地图，让这座美丽的海滨城市在你的指尖绽放。

导入必要库

import Vue from "vue";
import AMap from "AMap";

初始化地图实例

const map = new AMap.Map("map", {
  center: [118.101222, 24.491092], // 厦门市中心经纬度
  zoom: 11, // 设置初始缩放级别
});

设置遮罩区域

const mask = new AMap.Polygon({
  path: [
    [118.037052, 24.384896], // 西南角经纬度
    [118.24607, 24.384896], // 东南角经纬度
    [118.24607, 24.650647], // 东北角经纬度
    [118.037052, 24.650647], // 西北角经纬度
  ],
});
map.add(mask);

添加点击事件

map.on("click", (e) => {
  const lng = e.lnglat.getLng();
  const lat = e.lnglat.getLat();
  // 根据经纬度查询区域名称
  AMap.service("AMap.Geocoder", (Geocoder) => {
    Geocoder.getAddress([lng, lat], (status, result) => {
      if (status === "complete" && result.info === "OK") {
        // 获取区域名称
        const district = result.regeocode.addressComponent.district;
        // 在单独展示区域中呈现区域名称
        document.getElementById("result").innerHTML = district;
      }
    });
  });
});