---

前言

本文主要由地图加载、POI检索、绘制点标记、信息窗体、信息窗体中链接的路由跳转、相关事件的使用几部分组成。
目前网上关于高德js API的文章大多数是vue2.0版本的，这篇文章是基于vue3.0的，我的写法不一定是主流写法，如果有更好的写法，请评论中指正，感谢🙏🙏🙏

---

一、地图加载

1.本文准备环境

• node 和 git - 项目开发环境
• pnpm - 速度快、节省磁盘空间的软件包管理器
• Vite
• Vue3
• TypeScript
• Es6+
• Vue-Route
• 高德开发者-获取key和安全密钥
• 高德JSApi手册
• 高德JSApi教程
• 高德JSApi示例

2.引入库

代码如下（示例）：

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

3.加载地图

<!-- 创建地图容器，js api会根据id将地图加载到容器中 -->
<!-- 注意：需要设置地图容器的大小 -->
<template><div id="container"></div>
</template>
<component :is="'script'" type="text/javascript"><!-- 使用明文设置安全密钥（不安全），https://lbs.amap.com/api/javascript-api-v2/guide/abc/jscode  -->window._AMapSecurityConfig = {securityJsCode: '准备环境阶段拿到的的安全密钥'}
</component><!-- 本文中使用script-setup，非setup需要自行替换写法 -->
<script lang="ts" setup>// 引入jsApi 地图Loaderimport AMapLoader from '@amap/amap-jsapi-loader';let map = null;onMounted(() => {AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本plugins: ["AMap.Scale", "AMap.ToolBar"], //(按需引用，pc端建议加入AMap.ToolBar，便于操作)需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']}).then((AMap) => {// 加载地图到id为container的容器中map = new AMap.Map("container", {viewMode: "2D", // 设置地图视图类型,2D / 3Dzoom: 11, // 初始化地图级别center: [116.397428, 39.90923], // 初始化地图中心点位置});}).catch((e) => {console.log(e);});
});onUnmounted(() => {map?.destroy();
});
</script><style  scoped>// 设置地图容器的大小#container{padding:0px;margin: 0px;width: 100%;height: 800px;}
</style>

4.加载地图控件

<!-- 本文中使用script-setup，非setup需要自行替换写法 -->
<script lang="ts" setup>// ··· 相关代码已省略let map = null;onMounted(() => {AMapLoader.load({key: "", version: "2.0",plugins: ["AMap.Scale", "AMap.ToolBar"], //(按需引用，pc端建议加入AMap.ToolBar，便于操作)需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']}).then((AMap) => {// 加载地图到id为container的容器中map = new AMap.Map("container", {viewMode: "2D", // 设置地图视图类型,2D / 3Dzoom: 11, // 初始化地图级别center: [116.397428, 39.90923], // 初始化地图中心点位置});// 地图加载后，可以加载地图控件。// 如：创建工具条插件实例。需要在AMapLoader.plugins中引入控件，并map.addControl添加到地图中var toolbar = new AMap.ToolBar();map.addControl(toolbar);}).catch((e) => {console.log(e);});});onUnmounted(() => {// 页面关闭后及时销毁资源map?.destroy();});
</script>

---

二、POI搜索

1.什么是poi搜索

poi检索是高德的地理信息查询服务，即通过关键字获取目标地理信息（如坐标，城市信息等）。其中包含输入提示插件AMap.AutoComplete和POI 搜索插件 AMap.PlaceSearch，如图显示，右上角通过JAC获取多个地点提示信息即输入提示插件，选择匹配信息后，POI 搜索插件会返回多个相关的地理信息，并在地图上添加标记点。

2.如何使用

<template><div id="container"></div><div style="position: absolute; top: 20px; left: 20px"><!-- 用来触发输入提示插件的容器 --><input type="text" id="keyword" style="width: 300px; height: 32px; padding-left: 10px" placeholder="请输入地址" /></div>
</template>
<!-- 本文中使用script-setup，非setup需要自行替换写法 -->
<script lang="ts" setup>// ··· 相关代码已省略let map = null;onMounted(() => {AMapLoader.load({key: "", version: "2.0",}).then((AMap) => {// ···// map = ···// 输入提示， var autoOptions = {// 可选参数，你的搜索输入框dom的id(多数场景下只需要这一个参数即可)input: 'keyword',// 可选参数，你的搜索输出框dom的id，用来展示提示的结果（默认的只有图里的文字，如果需要图片等，需要指定output）output: 'your_out_put_id',// 是否强制指定城市,设定city后有效citylimit: false,// 输入提示时限定城市。可选值：城市名（中文或中文全拼）、citycode、adcode；默认值：“全国”city: '北京',// 默认为true，表示是否在input位于页面较下方的时候自动将输入面板显示在input上方以避免被遮挡outPutDirAuto:true,// ···其他参数请翻阅文档};AMap.plugin(['AMap.PlaceSearch', 'AMap.AutoComplete'], function () {//无需再手动执行 search 方法，autoComplete 会根据传 input 对应的 DOM 动态触发 searchvar autoComplete = new AMap.AutoComplete(autoOptions);var placeSearch = new AMap.PlaceSearch({map: map,type: '', // 数据类别pageIndex: 1,pageSize: 10,});// 注册监听，当选中某条记录时会触发autoComplete.on('select', select);function select(e) {// 获取到检索提示信息后，根据提示信息搜索精确地理位置// 设置查询城市（防止查提示信息所在城市之外的城市）placeSearch.setCity(e.poi.adcode);// 检索地理信息placeSearch.search(e.poi.name, function (status, result) {// 获取查询到的结果if (status == 'complete' ){// 精确地理信息为多条，placeSearch会将地理位置全部添加为地图Marker，如果需要触发点击时获取指定Marker的地理信息，可以添加markerClick事件console.log(result.poiList.pois);placeSearch.on('markerClick', function(e) {// e.data中即为poi信息（=result.poiList.pois[i])console.log(e.data)// 当前点击的地图的markerconsole.log(e.marker)})}});}});}).catch((e) => {console.log(e);});});onUnmounted(() => {// 页面关闭后及时销毁资源map?.destroy();});
</script>

一些进阶功能：如指定区域内搜索，指定圆范围搜索，请翻阅高德JSApi教程

---

三、绘制点标记与信息窗体

1.场景描述

如需要在地图上展示营业网点位置，查看所有设备的定位位置等，需要根据定位物件的坐标，在地图上添加一个标记。
仅有标记仅仅只能看到所在位置，但是用户是看不到具体这个位置是哪个营业网点（或哪个设备），则需要添加信息窗体来展示当前定位的相关信息。

2.案例

注意：绘制点标记与信息窗体都需要指定锚点，具体锚点设置请翻阅高德JSApi教程

<template><div id="container"></div>
</template>
<!-- 本文中使用script-setup，非setup需要自行替换写法 -->
<script lang="ts" setup>// ··· 相关代码已省略let map = null;onMounted(() => {AMapLoader.load({key: "", version: "2.0",}).then((AMap) => {// ···// map = ···// 通过mock数据or后端接口获取到的地理位置信息（如营业网点信息，设备定位信息）const mapInfos = await getMapIfo();// 信息窗体var infoWindow = new AMap.InfoWindow({anchor: 'bottom-center', // 信息窗体锚点offset: new AMap.Pixel(0, -32), //设置点标记偏移量（设置锚点）// 点击地图关闭closeWhenClickMap: true,// 是否自定义窗体（默认窗体即示例图中效果，底色与边框样式是固定的）isCustom: false,});// 通用 icon（即示例图中Marker红色的样式）const icon = new AMap.Icon({size: new AMap.Size(25, 34), //图标尺寸image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png', //Icon 的图像imageSize: new AMap.Size(25, 34), //根据所设置的大小拉伸或压缩图片});// 编辑mapInfos，绘制点标记mapInfos.forEach((mapInfo) => {// 拿不到完整的坐标信息，则不绘制if (mapInfo.lng == 0 && mapInfo.lat == 0) {return;}// 创建点标记对象const marker = new AMap.Marker({position: new AMap.LngLat(mapInfo.lng, mapInfo.lat), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]icon: icon,offset: new AMap.Pixel(-12.5, -34), //设置点标记偏移量（锚点）});// 给点标记添加点击事件，点击Marker打开信息窗体marker.on('click', function (e) {// 点击时获取逆地理编码（由于后端/Mock中拿到的数据为lnglat坐标，用户更想看到的是具体地理位置信息，所以每次点击的时候获取逆地理编码）AMap.plugin('AMap.Geocoder', async function () {var geocoder = new AMap.Geocoder();var lnglat = [mapInfo.lng, mapInfo.lat];await geocoder.getAddress(lnglat, function (status, result) {let region = '';if (status === 'complete' && result.info === 'OK') {// result为对应的地理位置详细信息region = result.regeocode.formattedAddress;}//实例化信息窗体const content =`<div style="width: 500px;height: 130px;display: flex;justify-content:space-between;align-items:center;">` +region +`</div>`;// 设置信息窗体的内容（dom）infoWindow.setContent(content);// 展示面板，将相关的信息加载到面板中infoWindow.open(map, [mapInfo.lng, mapInfo.lat]);});});});// 把marker加载到map中map.add(marker);});}).catch((e) => {console.log(e);});});onUnmounted(() => {// 页面关闭后及时销毁资源map?.destroy();});
</script>

3.信息窗体-链接路由跳转

上节案例中，可见content的写法是没办法使用vue路由的，vue2.0时还可以使用Vue.extend()去实现，但是vue3.0移除了这个方法，所以考虑在template中写好这个窗体，并加载到marker中，上案例：

<template><div id="container"></div><!-- vue渲染的自定义信息窗体，可以用到vue的特性 --><div ref="content" style="padding-bottom: 8px"><div style="padding: 10px 10px 10px 10px;background: #fff;position: relative;line-height: 1.4;"><div style="width: 500px;height: 130px;display: flex;align-items:center;">{{contentParam.region}} <a v-if="contentParam.detailNo != ''" @click="toDetail(contentParam.detailNo)" >查看详情</a>--></div><div class="amap-info-sharp"></div></div></div>
</template>
<!-- 本文中使用script-setup，非setup需要自行替换写法 -->
<script lang="ts" setup>// 获取当前组件的实例对象const {proxy} = getCurrentInstance();const contentParam = reactive({region: '',})// ··· 相关代码已省略let map = null;onMounted(() => {AMapLoader.load({key: "", version: "2.0",}).then((AMap) => {// ···// map = ···// 信息窗体var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -32), //设置点标记偏移量// 点击地图关闭closeWhenClickMap: true,// 当前例子中，重新设计了info窗体，去掉了官方默认窗体的关闭按钮，所以需要开启自定义窗体isCustom: true,});// mapInfos.forEach((mapInfo)// const marker = ···// 将页面当前组件实例中ref='content'的实例绑定到marker.contentmarker.content = proxy.$refs.content;marker.on('click', function (e) {// 点击时获取逆地理编码AMap.plugin('AMap.Geocoder', async function () {// 信息框加载出来var geocoder = new AMap.Geocoder();var lnglat = [equipmentInfo.lng, equipmentInfo.lat];await geocoder.getAddress(lnglat, function (status, result) {let region = '';if (status === 'complete' && result.info === 'OK') {// result为对应的地理位置详细信息region = result.regeocode.formattedAddress;}contentParam.region = region;contentParam.detailNo = mapInfo.detailNo;// content信息从marker.content中获取infoWindow.setContent(e.target.content);// 展示面板，将相关的信息加载到面板中infoWindow.open(map, e.target.getPosition());});});});}).catch((e) => {console.log(e);});});onUnmounted(() => {// 页面关闭后及时销毁资源map?.destroy();});function toDetail(detailNo) {router.push({ path: '/detail', query: { detailNo: detailNo } });}
</script><style scoped>.amap-info-sharp, .amap-info-sharp:after {margin-left: -8px;border-left: 8px solid transparent;border-right: 8px solid transparent;}.amap-info-sharp {bottom: 0;left: 50%;border-top: 8px solid #fff;}
</style>

4.进阶-通过Marker自动触发标记点（非鼠标手动点击）

在第三节案例中，实现了点击窗体中的链接，通过路由跳转到其他vue页面。
如果打开页面的时候，携带了某个设备信息（or营业网点），想主动打开对应Marker的信息窗体，该怎么做？
以下为实现案例：

<template><div id="container"></div><!-- 假设场景为：地图展示的营业点/设备 想要可以通过下拉选直接搜索到，并打开他的信息窗体 --><!-- 场景是基于第三节案例中的代码，第三节中的代码以···省略 --><n-select :options="options" @update-value="selectDetail"/>
</template>
<!-- 本文中使用script-setup，非setup需要自行替换写法 -->
<script lang="ts" setup>const options = ref([]);// ··· 相关代码已省略let map = null;onMounted(() => {AMapLoader.load({key: "", version: "2.0",}).then((AMap) => {// ···// map = ···mapInfos.forEach((mapInfo) => {// 拿不到完整的坐标信息，则不绘制if (mapInfo.lng == 0 && mapInfo.lat == 0) {return;}// 创建点标记对象// const marker = ···// 把marker加载到map中options.value.push({ label: mapInfo.detailNo, value: marker });map.add(marker);});}).catch((e) => {console.log(e);});});onUnmounted(() => {// 页面关闭后及时销毁资源map?.destroy();});function selectDetail(marker) {if(marker) {// 主动触发marker的click事件marker.emit('click',{target: marker});}}
</script><style scoped>.amap-info-sharp, .amap-info-sharp:after {margin-left: -8px;border-left: 8px solid transparent;border-right: 8px solid transparent;}.amap-info-sharp {bottom: 0;left: 50%;border-top: 8px solid #fff;}
</style>

---

四、jsApi地图事件

1.官方解释

jsApi地图事件是对Map底图操作后触发的事件，事件回调中返回MapsEvent对象。该对象包含触发的对象目标、触发所在经纬度等信息。

2.用法

<script>// 在 2.0 版本中所有类型的实例均使用 on/off 方法进行事件的绑定和移除// 给地图绑定click事件map.on("click", function (ev) {//触发事件的对象var target = ev.target;//触发事件的地理坐标，AMap.LngLat 类型var lnglat = ev.lnglat;//触发事件的像素坐标，AMap.Pixel 类型var pixel = ev.pixel;//触发事件类型var type = ev.type;});
</script>

高德地图大部分实例都拥有不少事件，如前三章中用到了以下三种事件，来丰富我们的业务，让地图操作更合理。

<script>// poi输入提示插件绑定select事件，选中某项提示后触发的事件autoComplete.on('select', function(e) {});// poi搜索插件绑定markerClick事件，点击地图中placeSearch生成的Marker触发的事件placeSearch.on('markerClick', function(e) {});// 为绘制的点标记绑定click事件，点击点标志触发的事件（我们用来打开信息窗体）marker.on('click', function(e) {});
</script>

而有一些特殊的场景下，可能需要我们主动触发事件，则需要用到emit函数。如上章末位，主动触发Marker的click事件，来模拟点击Marker。

<script>// 第一个参数为事件的类型， 第二个参数为事件回调时返回的数据// 比如案例中要主动触发主动触发Marker的click事件，第一个参数即为click，第二个参数为marker本身，用来获取绑定在marker上的content的marker.emit('click',{target: marker});// 回顾一下marker的click事件的内容marker.content = proxy.$refs.content;marker.on('click', function (e) {// ···// 这里，e.target即对应第二个参数的targetinfoWindow.setContent(e.target.content);infoWindow.open(map, e.target.getPosition());});</script>

高德地图的事件，我们可以从高德JSApi手册中查找。