高德地图 Web 端开发详解：高德地图 API 最佳实践指南（安装、marker添加、逆向地理编码、实际业务案例实操）

文章目录

1、引入高德地图的准备工作

1、成为开发者

需要在这个网址上，注册高德开放平台 的账号。高德开放平台官网

2、创建应用
在这里插入图片描述

3、创建 Key

找到刚刚创建的应用，然后点击 添加Key，选择 web端 js api ，这个地方，需要自己起一个名字，然后提交即可

在这里插入图片描述

成功提交 以后，会在刚刚创建的应用里面，显示出来对应的 key 和 密钥

在这里插入图片描述

2、高德地图 JS API 使用方式

高德地图的加载方式有好几种，高德地图官方 JS API 引入方式

2.1 JS API Loader

这种方式是官方推荐的引入方式，这种方式主要分为以下俩种

2.1.1 使用 script 标签加载loader

<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
  window._AMapSecurityConfig = {
      
      
    securityJsCode: "「你申请的安全密钥」",
  };
  AMapLoader.load({
      
      
    key: "替换为你申请的 key", //申请好的 Web 端开发 Key，首次调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
    AMapUI: {
      
      
      //是否加载 AMapUI，缺省不加载
      version: "1.1", //AMapUI 版本
      plugins: ["overlay/SimpleMarker"], //需要加载的 AMapUI ui 插件
    },
    Loca: {
      
      
      //是否加载 Loca， 缺省不加载
      version: "2.0", //Loca 版本
    },
  })
    .then((AMap) => {
      
      
      var map = new AMap.Map("container"); //"container"为 <div> 容器的 id
      map.addControl(new AMap.Scale()); //添加比例尺组件到地图实例上
    })
    .catch((e) => {
      
      
      console.error(e); //加载错误提示
    });
</script>

2.1.2 NPM 安装loader

npm i @amap/amap-jsapi-loader --save

这种方式更多常见于工程化项目中，下面演示的时候，也是使用这种方式进行安装，也可以使用 pnpm 都可以

import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
    
    
  securityJsCode: "「你申请的安全密钥」",
};
AMapLoader.load({
    
    
  key: "替换为你申请的 key", //申请好的 Web 端开发者 Key，首次调用 load 时必填
  version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['AMap.Scale','...','...']
})
  .then((AMap) => {
    
    
    var map = new AMap.Map("container"); //"container"为 <div> 容器的 id
  })
  .catch((e) => {
    
    
    console.log(e);
  });

2.2 script 标签加载 JS API 脚本

2.2.1 同步加载

<!-- 需要设置元素的宽高样式 -->
<div id="container"></div>
<script type="text/javascript">
  window._AMapSecurityConfig = {
      
      
    securityJsCode: "「你申请的安全密钥」",
  };
</script>
<script
  type="text/javascript"
  src="https://webapi.amap.com/maps?v=2.0&key=你申请的key值"
></script>
<script type="text/javascript">
  //地图初始化应该在地图容器 <div> 已经添加到 DOM 树之后
  var map = new AMap.Map("container", {
      
      
    zoom: 12,
  });
</script>

2.2.2 异步加载

我们项目中就是用的这个方式，但是这个方式会出现略微的卡顿，因为浏览器要下载下来这个js 文件，然后解析

<script>
  //设置你的安全密钥
  window._AMapSecurityConfig = {
      
      
    securityJsCode: "「你申请的安全密钥」",
  };
  //声明异步加载回调函数
  window.onLoad = function () {
      
      
    var map = new AMap.Map("container"); //"container"为<div>容器的id
  };
  var url ="https://webapi.amap.com/maps?v=2.0&key=你申请的key值&callback=onLoad";
  var jsapi = document.createElement("script");
  jsapi.charset = "utf-8";
  jsapi.src = url;
  document.head.appendChild(jsapi);
</script>

3、在 vue3 项目中使用

3.1 安装 js api loader

安装 npm 包

npm i @amap/amap-jsapi-loader --save

3.2 在组件中使用

新建一个空白的 vue 组件，里面要写一个 div ，然后设置以下，ID ，然后处理以下这个DIV 的样式，要保证有高度，然后就引入，具体的代码如下

<template>
  <div id="MapContainer" ref="mapContainerRef"></div>
</template>

<script setup>
import {
      
       onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

const mapContainerRef = ref(null);

onMounted(() => {
      
      
  console.log("mapContainerRef", mapContainerRef);

  window._AMapSecurityConfig = {
      
      
    securityJsCode: "", // 「你申请的安全密钥」
  };
  AMapLoader.load({
      
      
    key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      
      
      map = new AMap.Map("MapContainer", {
      
      
        // map = new AMap.Map(mapContainerRef.value, {
      
      
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
        defaultCursor: "pointer",
      });
    })
    .catch((e) => {
      
      
      console.log(e);
    });
});

onUnmounted(() => {
      
      
  map?.destroy();
});
</script>

<style scoped>
#MapContainer {
      
      
  width: 100%;
  height: 800px;
}
</style>

注意

new AMap.Map 的第一个参数，可以是 DOM元素或者 此元素的ID，在vue中你可以使用 ID 或者 ref 来操作这个

在这里插入图片描述

defaultCursor 这个属性是配置用户鼠标移入到地图上，显示的图标，就是 css 的 cursor: pointer;

在这里插入图片描述

4、实际应用

以下列举，我在实际开发中，遇到的一些需求点

4.1 点击地图获取经纬度、设置地图中心点、添加 marker、获取省市区及详细地址

需求：用户点击地图上的一个后，要添加一个定位的图标，然后显示出来用户点击的经纬度、省市区、详细地址。具体的效果看下面这个 GIF

在这里插入图片描述

4.1.1 准备变量

代码编写

先初始化一个对象，用来存放这些信息

let positionInfo = ref({
    
    
  lng: 0, // 经度
  lat: 0, // 纬度
  provinceCode: "", // 省份编号
  provinceName: "", // 省份名称
  cityCode: "", // 市编号
  cityName: "", // 市名称
  countyCode: "", // 区编号
  countyName: "", // 区名称
  address: "", // 详细地址
});

4.1.2 地图点击事件的监听

第一步，肯定是要先看看高德地图的api ，有没有鼠标点击事件，可以看到在高德地图的参考手册上 Map 是可以绑定点击事件的

在这里插入图片描述

第二步，代码编写，先新建一个 handleAMapClick 方法，然后在 地图初始化完成后，进行调用，便于下面演示其他的操作

在这里插入图片描述

/**
 * 处理用户点击 地图的点，就拿到经纬度、省市区、详细地址，并且添加 marker
 */
function handleAMapClick() {
    
    
  map.on("click", function (e) {
    
    
    console.log("地图:点击事件", e);
    positionInfo.value.lng = e.lnglat.getLng();
    positionInfo.value.lat = e.lnglat.getLat();
  }
}

其实这个点击事件，是有一个参数的，里面就有经纬度信息，在高德地图参考手册中，这个 lnglat 是非常常见的， lng 就是经度，lat 是纬度；高德地图点击事件官方文档

在这里插入图片描述

4.1.3 地图添加 marker

这个时候，其实已经是拿到了，经纬度信息，然后就是要添加一个标记点，，添加标记点，需要用到 AMap.Marker 方法；高德地图 marker 官方文档

function handleAMapClick() {
    
    
  map.on("click", function (e) {
    
    
    console.log("地图:点击事件", e);
    positionInfo.value.lng = e.lnglat.getLng();
    positionInfo.value.lat = e.lnglat.getLat();

    let marker = new AMap.Marker({
    
    
      position: new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat),
    });
    map.add(marker);
  });
}

这个方法核心就是，你要先创建一个 marker ，然后吧 maker 添加到地图上。AMap.Marker方法接收一个对象，这个对象，最主要的参数就是 position ，需要传递一个 LngLat 类型的数据进去

Lnglat 类型

它是高德地图的一个基础类，具体的使用如下

new AMap.LngLat(lng: Number?, lat: Number?, noWrap: Boolean?)

第一个参数是经度，第二个参数是 纬度

在这里插入图片描述

这样的话，就已经实现了，添加 marker ，但是这个地图还存在一个问题，每次点击都会生成一个新的 marker ，需要每次点击的时候，把之前的 marker 全部清除掉

在这里插入图片描述

4.1.4 地图清理 marker的方式

这个清除 marker 目前我发现有三种方式，分别如下

第一种方式

把这个地图的所有的 marker 都存起来，然后挨个删除

map 实例上，getAllOverlays 需要接收一个参数（覆盖物的类型，比如：marker、circle、polyline、polygon），返回值是一个数组
map 实例上，remove 需要接收一个或者多个覆盖物，要么是一个数组，要么是一个覆盖物

在这里插入图片描述

	// 这里的map 就是  new AMap.Map 的返回值
    const markers = map.getAllOverlays("marker"); // 获取地图上的所有 marker
    markers.forEach((f) => map.remove(f));

第二种方式

暴力解决，直接把当前地图的所有覆盖物，全部删除

高德地图API Map.clearMap 文档

	// 这里的map 就是  new AMap.Map 的返回值
    map.clearMap(); // 删除地图上所有的覆盖物

第三种方式

使用 Marker 对象的 remove 方法，这个方法存在一个缺点，你需要在添加 marker 以后，要找一个地方存储起来

// 这里的 marker 指的是， nwe AMap.Marker 的返回值
marker.remove()

高德地图API Marker.remove 文档

第四种方式

使用 Marker 对象的 setMap 方法，

// 这里的 marker 指的是， nwe AMap.Marker 的返回值
marker.setMap(null) // 这里需要传递 null

高德地图API Marker.setMap 文档

到目前位置代码如下

function handleAMapClick() {
    
    
  map.on("click", function (e) {
    
    
    console.log("地图:点击事件", e);
    positionInfo.value.lng = e.lnglat.getLng();
    positionInfo.value.lat = e.lnglat.getLat();
    const markers = map.getAllOverlays("marker"); // 获取地图上的所有 marker
    markers.forEach((f) => map.remove(f));
    let marker = new AMap.Marker({
    
    
      position: new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat),
    });
    map.add(marker);
  });
}

4.1.5 调整地图中心点

在这里插入图片描述

用户点击后，这个 marker ，已经是到了屏幕的右下角，这个时候就需要调整地图的中心点，让用户始终感觉当前的 marker 在正中心，这个地方，目前发现俩个处理方式，一个是 Map.setCenter ，另一个是Map.setZoomAndCenter ，但这个地方更建议使用 setCenter 因为另一个方法需要传递一个 zoom，就是地图的缩放等级

在这里插入图片描述

function handleAMapClick() {
    
    
  map.on("click", function (e) {
    
    
    console.log("地图:点击事件", e);
    positionInfo.value.lng = e.lnglat.getLng();
    positionInfo.value.lat = e.lnglat.getLat();
    const markers = map.getAllOverlays("marker"); // 获取地图上的所有 marker
    markers.forEach((f) => map.remove(f));
    let marker = new AMap.Marker({
    
    
      position: new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat),
    });
    map.add(marker);
    map.setCenter(new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat));
  });
}

在添加 marker 以后，再调 setCenter 方法即可，具体的效果如下

在这里插入图片描述

4.1.6 根据经纬度获取详细位置

设置好地图中心点以后，就要根据经纬度 获取 详细的地址
根据经纬度获取详细地址 / 根据详细地址获取经纬度，这两个操作在高德官方 api 文档上，称为正向地理编码 和 逆向地理编码

正向地理编码：详细地址 => 经纬度
逆向地理编码：经纬度 => 详细地址

我们现在要用的就是 逆向地理编码

在这里插入图片描述

第一种方式

在控制台，可以输入 AMap ，高德地图会在window上挂在这个key

//引入插件，此示例采用异步引入，更多引入方式 https://lbs.amap.com/api/javascript-api-v2/guide/abc/plugins
AMap.plugin("AMap.Geocoder", function () {
    
    
  var geocoder = new AMap.Geocoder({
    
    
    city: "010", // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
  });

  var lnglat = [116.396574, 39.992706];

  geocoder.getAddress(lnglat, function (status, result) {
    
    
    if (status === "complete" && result.info === "OK") {
    
    
      // result为对应的地理位置详细信息
      console.log(result);
    }
  });
});

第二种方式

高德地图API AMap.Geocoder 文档

// 这里的 mapObj 就是创建的 Map 实例，也就是 new AMap.Map 的返回值
var geocoder;
//加载地理编码插件
mapObj.plugin(["AMap.Geocoder"], function() {
    
     //加载地理编码插件
   geocoder = new AMap.Geocoder({
    
    
       radius: 1000, //以已知坐标为中心点，radius为半径，返回范围内兴趣点和道路信息
       extensions: "all" //返回地址描述以及附近兴趣点和道路信息，默认“base”
   });
   //返回地理编码结果
   geocoder.on("complete", geocoder_CallBack);
   //逆地理编码
   geocoder.getAddress(new AMap.LngLat(116.359119, 39.972121));
});

第三种方式

高德地图api 逆向地理编码调用接口的方式获取

// 调这个接口，传入对应的参数
https://restapi.amap.com/v3/geocode/regeo?output=xml&location=116.310003,39.991957&key=<用户的key>&radius=1000&extensions=all

这里，使用第二种方式，具体的代码如下

/**
 * 处理用户点击 地图的点，就拿到经纬度、省市区、详细地址，并且添加 marker
 */
function handleAMapClick() {
    
    
  map.on("click", function (e) {
    
    
    console.log("地图:点击事件", e);
    positionInfo.value.lng = e.lnglat.getLng();
    positionInfo.value.lat = e.lnglat.getLat();

    // 这个地方，也需要吧原来的 marker 都清空
    // 第一种方式
    // map.clearMap(); // 删除地图上所有的覆盖物
    // 第二种方式
    const markers = map.getAllOverlays("marker"); // 获取地图上的所有 marker
    markers.forEach((f) => map.remove(f));
    let marker = new AMap.Marker({
    
    
      position: new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat),
    });
    map.add(marker);
    console.log("marker", marker);

    map.setCenter(new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat));
    map.plugin("AMap.Geocoder", function () {
    
    
      let geocoder = new AMap.Geocoder({
    
    });
      geocoder.getAddress(new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat), function (status, res) {
    
    
        if (status === "complete" && res.info === "OK") {
    
    
          // res 为对应的地理位置详细信息
          console.log("地图:地图点击 逆向地理编码返回值", res);
          positionInfo.value.address = res.regeocode.formattedAddress;
          positionInfo.value.provinceCode = res.regeocode.addressComponent.adcode.slice(0, 2);
          positionInfo.value.provinceName = res.regeocode.addressComponent.province;
          positionInfo.value.cityCode = res.regeocode.addressComponent.adcode.slice(2, 4);
          positionInfo.value.cityName = res.regeocode.addressComponent.city || res.regeocode.addressComponent.province;
          positionInfo.value.countyCode = res.regeocode.addressComponent.adcode.slice(4, 6);
          positionInfo.value.countyName = res.regeocode.addressComponent.district;
        }
      });
    });
  });
}

逆向地理编码的返回值如下
主要使用的就是 formattedAddress 、adcode、province、city、 district ，这几个是最常用的，adcode 是行政区编码，其他值的含义在这个链接里面逆向地理编码返回值解释

在这里插入图片描述

到这里就实现了，第一个需求

4.2 搜索地点点击后获取所有信息、设置地图中心点、marker

在这里插入图片描述

4.2.1 增加输入框、变量

下面这个就是完成 4.1 之后，又添加输入框的布局、变量，之后的代码
注意：这次使用的是 UI库是 ant-design-vue 4.x 版本

<template>
  <div class="MapPage">
    <a-row class="MapPage-search">
      <a-input-search v-model:value="poiValue" placeholder="输入关键词" size="large" @search="handleSearchClick" />
      <div class="MapPage-search-poi">
        <a-row
          v-for="item in poiList"
          :key="item.ID"
          style="cursor: pointer; margin-bottom: 5px"
          @click="handlePOIItemClick(item)"
        >
          {
   
   { item.Name }}【{
   
   { item.Address }}】
        </a-row>
      </div>
    </a-row>
    <div id="MapContainer" ref="mapContainerRef"></div>
    <div class="MapPage-footer">
      <a-row> 经度: {
   
   { positionInfo.lng }} , 纬度: {
   
   { positionInfo.lat }} </a-row>
      <a-row>省份编号: {
   
   { positionInfo.provinceCode }} 省份名称: {
   
   { positionInfo.provinceName }} </a-row>
      <a-row>市编号: {
   
   { positionInfo.cityCode }} 市名称: {
   
   { positionInfo.cityName }} </a-row>
      <a-row>区编号: {
   
   { positionInfo.countyCode }} 区名称: {
   
   { positionInfo.countyName }} </a-row>
      <a-row>地址: {
   
   { positionInfo.address }} </a-row>
    </div>
  </div>
</template>

<script setup>
import {
      
       onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

const mapContainerRef = ref(null);

let positionInfo = ref({
      
      
  lng: 0,
  lat: 0,
  provinceCode: "",
  provinceName: "",
  cityCode: "",
  cityName: "",
  countyCode: "",
  countyName: "",
  address: "",
});
let poiValue = ref("");
let poiList = ref([]);

onMounted(() => {
      
      
  console.log("mapContainerRef", mapContainerRef);

  window._AMapSecurityConfig = {
      
      
    securityJsCode: "f22de8e155d91e514b61904b9b10e05a", // 「你申请的安全密钥」
  };
  AMapLoader.load({
      
      
    key: "6d4f7a678203e93f42c21145a3b16d43", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      
      
      map = new AMap.Map("MapContainer", {
      
      
        // map = new AMap.Map(mapContainerRef.value, {
      
      
        viewMode: "3D", // 是否为3D地图模式
        zoom: 15, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
        defaultCursor: "pointer",
      });
      console.log("地图:实例", map);
      handleAMapClick();
    })
    .catch((e) => {
      
      
      console.log(e);
    });
});

onUnmounted(() => {
      
      
  map?.destroy();
});

/**
 * 处理用户点击 地图的点，就拿到经纬度、省市区、详细地址，并且添加 marker
 */
function handleAMapClick() {
      
      
  map.on("click", function (e) {
      
      
    console.log("地图:点击事件", e);
    positionInfo.value.lng = e.lnglat.getLng();
    positionInfo.value.lat = e.lnglat.getLat();

    // 这个地方，也需要吧原来的 marker 都清空
    // 第一种方式
    // map.clearMap(); // 删除地图上所有的覆盖物
    // 第二种方式
    const markers = map.getAllOverlays("marker"); // 获取地图上的所有 marker
    markers.forEach((f) => map.remove(f));
    let marker = new AMap.Marker({
      
      
      position: new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat),
    });
    map.add(marker);
    console.log("marker", marker);

    map.setCenter(new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat));
    map.plugin("AMap.Geocoder", function () {
      
      
      let geocoder = new AMap.Geocoder({
      
      });
      geocoder.getAddress(new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat), function (status, res) {
      
      
        if (status === "complete" && res.info === "OK") {
      
      
          // res 为对应的地理位置详细信息
          console.log("地图:地图点击 逆向地理编码返回值", res);
          positionInfo.value.address = res.regeocode.formattedAddress;
          positionInfo.value.provinceCode = res.regeocode.addressComponent.adcode.slice(0, 2);
          positionInfo.value.provinceName = res.regeocode.addressComponent.province;
          positionInfo.value.cityCode = res.regeocode.addressComponent.adcode.slice(2, 4);
          positionInfo.value.cityName = res.regeocode.addressComponent.city || res.regeocode.addressComponent.province;
          positionInfo.value.countyCode = res.regeocode.addressComponent.adcode.slice(4, 6);
          positionInfo.value.countyName = res.regeocode.addressComponent.district;
        }
      });
    });
  });
}
</script>
<style scoped>
#MapContainer {
      
      
  width: 100%;
  height: 700px;
}
.MapPage-footer {
      
      
  padding: 0 20px;
}
.MapPage-search {
      
      
  position: relative;
}
.MapPage-search-poi {
      
      
  position: absolute;
  z-index: 2;
  top: 32px;
  width: 100%;
  background-color: #fff;
}
</style>

4.2.2 POI 搜索

这个 POI 就是 兴趣点的意思，也可以理解为 大多数人想搜索的地点。官方的解释如下，关于POI 官方解释

在这里插入图片描述

这个POI 也是有多种使用方式

第一种

通过 window 上的 AMap.plugin 来获取POI
官方地址：https://lbs.amap.com/api/javascript-api-v2/guide/services/autocomplete

在这里插入图片描述
第二种

通过地图实例的 plugin 进行加载
官方地址：https://lbs.amap.com/api/javascript-api-v2/documentation#placesearch

在这里插入图片描述
第三种

通过调接口的形式进行获取 POI
官方地址：https://lbs.amap.com/api/webservice/guide/api-advanced/search

在这里插入图片描述

POI 的返回值如下，这个返回值结构还是比较简单的，如若设置了 extensions: "all" 返回值就会变得复杂了

在这里插入图片描述

这个地方，我是用的是第一种方式，但是这个方式好像是异步的，所以又封装了以下，这里的思路就是根据POI 拿到对应的 经纬度，然后通过经纬度获取具体的地址信息

const handleSearchClick = () => {
    
    
  console.log("地图:POI 关键字", poiValue.value);
  AMap.plugin("AMap.PlaceSearch", function () {
    
    
    var placeSearch = new AMap.PlaceSearch({
    
    
      extensions: "base", // base | all ，base 是返回基本信息，all 是返回 完整信息
    });
    placeSearch.search(poiValue.value, async function (status, res) {
    
    
      //查询成功时， res 即对应匹配的 POI 信息
      console.log("地图:POI 搜索返回值", status, res, res.poiList.pois);
      if (status === "complete" && res.info == "OK") {
    
    
        let formatList = [];
        for (const f of res.poiList.pois) {
    
    
          let item = {
    
    };
          item.ID = f.id;
          item.LngLat = f.location.lng + "," + f.location.lat;
          item.Name = f.name;
          // 根据经纬度 获取 详细地址
          let res = await getAddressByLnglat([f.location.lng, f.location.lat]);
          item.Address = res.regeocode.formattedAddress;
          formatList.push(item);
        }
        poiList.value = formatList;
      }
    });
  });
};
/**
 * 处理 根据经纬度 获取 详细地址
 * @param {Array} lnglat
 * @returns {Promise} res
 */
function getAddressByLnglat(lnglat) {
    
    
  return new Promise((resolve, reject) => {
    
    
    AMap.plugin("AMap.Geocoder", function () {
    
    
      let geocoder = new AMap.Geocoder({
    
    });
      geocoder.getAddress(lnglat, function (status, result) {
    
    
        if (status === "complete" && result.info === "OK") {
    
    
          // result为对应的地理位置详细信息
          // item.Address = result.regeocode.formattedAddress;
          resolve(result);
        }
      });
    });
  });
}

4.2.3 处理点击每个POI 跳转

// 点击每一个 POI 的时候
const handlePOIItemClick = (item) => {
    
    
  console.log("地图:POI 点击事件", item, item.LngLat.split(","));
  positionInfo.value.lng = item.LngLat.split(",")[0];
  positionInfo.value.lat = item.LngLat.split(",")[1];

  const markers = map.getAllOverlays("marker"); // 获取地图上的所有 marker
  markers.forEach((f) => map.remove(f));
  let marker = new AMap.Marker({
    
    
    position: new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat),
  });
  map.add(marker);

  map.setCenter(new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat));
  map.plugin("AMap.Geocoder", function () {
    
    
    let geocoder = new AMap.Geocoder({
    
    });
    geocoder.getAddress(new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat), function (status, res) {
    
    
      if (status === "complete" && res.info === "OK") {
    
    
        // res 为对应的地理位置详细信息
        positionInfo.value.address = res.regeocode.formattedAddress;
        positionInfo.value.provinceCode = res.regeocode.addressComponent.adcode.slice(0, 2);
        positionInfo.value.provinceName = res.regeocode.addressComponent.province;
        positionInfo.value.cityCode = res.regeocode.addressComponent.adcode.slice(2, 4);
        positionInfo.value.cityName = res.regeocode.addressComponent.city || res.regeocode.addressComponent.province;
        positionInfo.value.countyCode = res.regeocode.addressComponent.adcode.slice(4, 6);
        positionInfo.value.countyName = res.regeocode.addressComponent.district;
      }

      poiList.value = [];
      poiValue.value = "";
    });
  });
};

6、完整代码

实现上面两个需求的完整代码如下

<template>
  <div class="MapPage">
    <a-row class="MapPage-search">
      <a-input-search v-model:value="poiValue" placeholder="输入关键词" size="large" @search="handleSearchClick" />
      <div class="MapPage-search-poi">
        <a-row
          v-for="item in poiList"
          :key="item.ID"
          style="cursor: pointer; margin-bottom: 5px"
          @click="handlePOIItemClick(item)"
        >
          {
   
   { item.Name }}【{
   
   { item.Address }}】
        </a-row>
      </div>
    </a-row>
    <div id="MapContainer" ref="mapContainerRef"></div>
    <div class="MapPage-footer">
      <a-row> 经度: {
   
   { positionInfo.lng }} , 纬度: {
   
   { positionInfo.lat }} </a-row>
      <a-row>省份编号: {
   
   { positionInfo.provinceCode }} 省份名称: {
   
   { positionInfo.provinceName }} </a-row>
      <a-row>市编号: {
   
   { positionInfo.cityCode }} 市名称: {
   
   { positionInfo.cityName }} </a-row>
      <a-row>区编号: {
   
   { positionInfo.countyCode }} 区名称: {
   
   { positionInfo.countyName }} </a-row>
      <a-row>地址: {
   
   { positionInfo.address }} </a-row>
    </div>
  </div>
</template>

<script setup>
import {
      
       onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

let map = null;

const mapContainerRef = ref(null);

let positionInfo = ref({
      
      
  lng: 0,
  lat: 0,
  provinceCode: "",
  provinceName: "",
  cityCode: "",
  cityName: "",
  countyCode: "",
  countyName: "",
  address: "",
});
let poiValue = ref("");
let poiList = ref([]);

onMounted(() => {
      
      
  console.log("mapContainerRef", mapContainerRef);

  window._AMapSecurityConfig = {
      
      
    securityJsCode: "f22de8e155d91e514b61904b9b10e05a", // 「你申请的安全密钥」
  };
  AMapLoader.load({
      
      
    key: "6d4f7a678203e93f42c21145a3b16d43", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      
      
      map = new AMap.Map("MapContainer", {
      
      
        // map = new AMap.Map(mapContainerRef.value, {
      
      
        viewMode: "3D", // 是否为3D地图模式
        zoom: 15, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
        defaultCursor: "pointer",
      });
      console.log("地图:实例", map);
      handleAMapClick();
    })
    .catch((e) => {
      
      
      console.log(e);
    });
});

onUnmounted(() => {
      
      
  map?.destroy();
});

/**
 * 处理用户点击 地图的点，就拿到经纬度、省市区、详细地址，并且添加 marker
 */
function handleAMapClick() {
      
      
  map.on("click", function (e) {
      
      
    console.log("地图:点击事件", e);
    positionInfo.value.lng = e.lnglat.getLng();
    positionInfo.value.lat = e.lnglat.getLat();

    // 这个地方，也需要吧原来的 marker 都清空
    // 第一种方式
    // map.clearMap(); // 删除地图上所有的覆盖物
    // 第二种方式
    const markers = map.getAllOverlays("marker"); // 获取地图上的所有 marker
    markers.forEach((f) => map.remove(f));
    let marker = new AMap.Marker({
      
      
      position: new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat),
    });
    map.add(marker);
    console.log("marker", marker);

    map.setCenter(new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat));
    map.plugin("AMap.Geocoder", function () {
      
      
      let geocoder = new AMap.Geocoder({
      
      });
      geocoder.getAddress(new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat), function (status, res) {
      
      
        if (status === "complete" && res.info === "OK") {
      
      
          // res 为对应的地理位置详细信息
          console.log("地图:地图点击 逆向地理编码返回值", res);
          positionInfo.value.address = res.regeocode.formattedAddress;
          positionInfo.value.provinceCode = res.regeocode.addressComponent.adcode.slice(0, 2);
          positionInfo.value.provinceName = res.regeocode.addressComponent.province;
          positionInfo.value.cityCode = res.regeocode.addressComponent.adcode.slice(2, 4);
          positionInfo.value.cityName = res.regeocode.addressComponent.city || res.regeocode.addressComponent.province;
          positionInfo.value.countyCode = res.regeocode.addressComponent.adcode.slice(4, 6);
          positionInfo.value.countyName = res.regeocode.addressComponent.district;
        }
      });
    });
  });
}

/**
 * 处理 搜索按钮点击的时候
 */
const handleSearchClick = () => {
      
      
  console.log("地图:POI 关键字", poiValue.value);
  AMap.plugin("AMap.PlaceSearch", function () {
      
      
    var placeSearch = new AMap.PlaceSearch({
      
      
      extensions: "base", // base | all ，base 是返回基本信息，all 是返回 完整信息
    });
    placeSearch.search(poiValue.value, async function (status, res) {
      
      
      //查询成功时， res 即对应匹配的 POI 信息
      console.log("地图:POI 搜索返回值", status, res, res.poiList.pois);
      if (status === "complete" && res.info == "OK") {
      
      
        let formatList = [];
        for (const f of res.poiList.pois) {
      
      
          let item = {
      
      };
          item.ID = f.id;
          item.LngLat = f.location.lng + "," + f.location.lat;
          item.Name = f.name;
          // 根据经纬度 获取 详细地址
          let res = await getAddressByLnglat([f.location.lng, f.location.lat]);
          item.Address = res.regeocode.formattedAddress;
          formatList.push(item);
        }
        poiList.value = formatList;
      }
    });
  });
};

/**
 * 处理 根据经纬度 获取 详细地址
 * @param {Array} lnglat
 * @returns {Promise} res
 */
function getAddressByLnglat(lnglat) {
      
      
  return new Promise((resolve, reject) => {
      
      
    AMap.plugin("AMap.Geocoder", function () {
      
      
      let geocoder = new AMap.Geocoder({
      
      });
      geocoder.getAddress(lnglat, function (status, result) {
      
      
        if (status === "complete" && result.info === "OK") {
      
      
          // result为对应的地理位置详细信息
          // item.Address = result.regeocode.formattedAddress;
          resolve(result);
        }
      });
    });
  });
}

// 点击每一个 POI 的时候
const handlePOIItemClick = (item) => {
      
      
  console.log("地图:POI 点击事件", item, item.LngLat.split(","));
  positionInfo.value.lng = item.LngLat.split(",")[0];
  positionInfo.value.lat = item.LngLat.split(",")[1];

  const markers = map.getAllOverlays("marker"); // 获取地图上的所有 marker
  markers.forEach((f) => map.remove(f));
  let marker = new AMap.Marker({
      
      
    position: new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat),
  });
  map.add(marker);

  map.setCenter(new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat));
  map.plugin("AMap.Geocoder", function () {
      
      
    let geocoder = new AMap.Geocoder({
      
      });
    geocoder.getAddress(new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat), function (status, res) {
      
      
      if (status === "complete" && res.info === "OK") {
      
      
        // res 为对应的地理位置详细信息
        positionInfo.value.address = res.regeocode.formattedAddress;
        positionInfo.value.provinceCode = res.regeocode.addressComponent.adcode.slice(0, 2);
        positionInfo.value.provinceName = res.regeocode.addressComponent.province;
        positionInfo.value.cityCode = res.regeocode.addressComponent.adcode.slice(2, 4);
        positionInfo.value.cityName = res.regeocode.addressComponent.city || res.regeocode.addressComponent.province;
        positionInfo.value.countyCode = res.regeocode.addressComponent.adcode.slice(4, 6);
        positionInfo.value.countyName = res.regeocode.addressComponent.district;
      }

      poiList.value = [];
      poiValue.value = "";
    });
  });
};
</script>

<style scoped>
#MapContainer {
      
      
  width: 100%;
  height: 700px;
}
.MapPage-footer {
      
      
  padding: 0 20px;
}
.MapPage-search {
      
      
  position: relative;
}
.MapPage-search-poi {
      
      
  position: absolute;
  z-index: 2;
  top: 32px;
  width: 100%;
  background-color: #fff;
}
</style>

7、总结

其实对于前端开发来说，最常用的就是 JS API ，但是这个地方，对于一些插件的介绍不完整，特别是 返回值，比如 POI 搜索的返回值、逆向地理编码的返回值 。
还有一个比较常见，就是获取用户当前的位置，这个是要获取 读取位置的权限的，然后拿到 经纬度，还是要通过 逆向地理编码 拿到具体的地址

在这里插入图片描述

常用的 链接，整理如下

文章目录

1、引入高德地图的准备工作

2、高德地图 JS API 使用方式

2.1 JS API Loader

2.1.1 使用 script 标签加载loader

2.1.2 NPM 安装loader

2.2 script 标签加载 JS API 脚本

2.2.1 同步加载

2.2.2 异步加载

3、在 vue3 项目中使用

3.1 安装 js api loader

3.2 在组件中使用

4、实际应用

4.1 点击地图获取经纬度、设置地图中心点、添加 marker、获取省市区及详细地址

4.1.1 准备变量

4.1.2 地图点击事件的监听

4.1.3 地图添加 marker

4.1.4 地图清理 marker的方式

4.1.5 调整地图中心点

4.1.6 根据经纬度获取详细位置

4.2 搜索地点 点击后获取所有信息、设置地图中心点、marker

4.2.1 增加输入框、变量

4.2.2 POI 搜索

4.2.3 处理 点击每个POI 跳转

6、完整代码

7、总结

猜你喜欢

目录

热门文章

4.2 搜索地点点击后获取所有信息、设置地图中心点、marker

4.2.3 处理点击每个POI 跳转