文章目录
- 前言
- 一、地图加载
- 1.本文准备环境
- 2.引入库
- 3.加载地图
- 4.加载地图控件
- 二、POI搜索
- 1.什么是poi搜索
- 2.如何使用
- 三、绘制点标记与信息窗体
- 1.场景描述
- 2.案例
- 3.信息窗体-链接路由跳转
- 4.进阶-通过Marker自动触发标记点（非鼠标手动点击）
- 四、jsApi地图事件
- 1.官方解释
- 2.用法
前言
本文主要由地图加载、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 地图Loader
import 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 / 3D
zoom: 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 / 3D
zoom: 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 动态触发 search
var 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)
// 当前点击的地图的marker
console.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.content
marker.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即对应第二个参数的target
infoWindow.setContent(e.target.content);
infoWindow.open(map, e.target.getPosition());
});
</script>
高德地图的事件，我们可以从高德JSApi手册中查找。
