JavaScript大前端
高德地图 Web 端开发：API 安装与 Marker 地理编码实战
高德地图 Web 端开发涵盖 JS API 加载方式（Loader 与 Script），Vue3 项目集成配置，Marker 增删改查，点击地图获取经纬度及地址信息，以及 POI 搜索功能实现。包含安全密钥配置、地图中心点调整、覆盖物清理等关键步骤代码示例，适用于实际业务场景中的地图交互开发。
高德地图 Web 端开发涵盖 JS API 加载方式（Loader 与 Script），Vue3 项目集成配置，Marker 增删改查，点击地图获取经纬度及地址信息，以及 POI 搜索功能实现。包含安全密钥配置、地图中心点调整、覆盖物清理等关键步骤代码示例，适用于实际业务场景中的地图交互开发。
需要注册高德开放平台的账号。
在控制台创建应用。
找到刚刚创建的应用，点击添加 Key，选择 web 端 JS API，提交即可。成功后会显示对应的 key 和密钥。
高德地图的加载方式有好几种，参考官方文档。
这种方式是官方推荐的引入方式，主要分为以下两种。
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "your_security_code"
};
AMapLoader.load({
key: "your_web_key",
version: "2.0",
plugins: ["AMap.Scale"]
}).then((AMap) => {
var map = new AMap.Map("container");
map.addControl(new AMap.Scale());
}).catch((e) => {
console.error(e);
});
</script>
npm i @amap/amap-jsapi-loader --save
工程化项目中常用此方式。
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
securityJsCode: "your_security_code"
};
AMapLoader.load({
key: "your_web_key",
version: "2.0",
plugins: ["AMap.Scale"]
}).then((AMap) => {
var map = new AMap.Map("container");
}).catch((e) => {
console.log(e);
});
<div id="container"></div>
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: "your_security_code"
};
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=your_web_key"></script>
<script type="text/javascript">
var map = new AMap.Map("container", {
zoom: 12
});
</script>
<script>
window._AMapSecurityConfig = {
securityJsCode: "your_security_code"
};
window.onLoad = function () {
var map = new AMap.Map("container");
};
var url = "https://webapi.amap.com/maps?v=2.0&key=your_web_key&callback=onLoad";
var jsapi = document.createElement("script");
jsapi.charset = "utf-8";
jsapi.src = url;
document.head.appendChild(jsapi);
</script>
npm i @amap/amap-jsapi-loader --save
新建一个空白的 vue 组件，里面写一个 div，设置 ID，处理样式保证有高度，然后引入。
<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(() => {
window._AMapSecurityConfig = {
securityJsCode: "your_security_code"
};
AMapLoader.load({
key: "your_web_key",
version: "2.0"
}).then((AMap) => {
map = new AMap.Map("MapContainer", {
viewMode: "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。
需求：用户点击地图上的点后，添加定位图标，显示经纬度、省市区、详细地址。
初始化对象存放信息。
let positionInfo = ref({
lng: 0,
lat: 0,
provinceCode: "",
provinceName: "",
cityCode: "",
cityName: "",
countyCode: "",
countyName: "",
address: ""
});
function handleAMapClick() {
map.on("click", function (e) {
positionInfo.value.lng = e.lnglat.getLng();
positionInfo.value.lat = e.lnglat.getLat();
});
}
function handleAMapClick() {
map.on("click", function (e) {
let marker = new AMap.Marker({
position: new AMap.LngLat(positionInfo.value.lng, positionInfo.value.lat)
});
map.add(marker);
});
}
清除 marker 目前发现有三种方式：
map.getAllOverlays("marker") 后循环 map.remove(f)。map.clearMap()。marker.remove()。marker.setMap(null)。使用 map.setCenter 方法将地图中心点调整到点击位置。
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") {
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;
}
});
});
使用 UI 库（如 ant-design-vue）增加输入框和 POI 列表。
<template>
<div class="MapPage">
<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>
<div id="MapContainer" ref="mapContainerRef"></div>
</div>
</template>
通过 AMap.PlaceSearch 插件实现。
const handleSearchClick = () => {
AMap.plugin("AMap.PlaceSearch", function () {
var placeSearch = new AMap.PlaceSearch({ extensions: "base" });
placeSearch.search(poiValue.value, async function (status, res) {
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 resAddr = await getAddressByLnglat([f.location.lng, f.location.lat]);
item.Address = resAddr.regeocode.formattedAddress;
formatList.push(item);
}
poiList.value = formatList;
}
});
});
};
点击 POI 项时，更新地图中心点和 marker，并清空列表。
const handlePOIItemClick = (item) => {
positionInfo.value.lng = item.LngLat.split(",")[0];
positionInfo.value.lat = item.LngLat.split(",")[1];
const markers = map.getAllOverlays("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));
// 调用地理编码更新地址信息...
};
整合上述逻辑的完整 Vue 组件代码如下（略去部分重复代码，实际开发中请合并）。核心逻辑包括初始化、点击事件、Marker 管理、Geocoder 插件调用及 POI 搜索。
前端开发中最常用的是 JS API。需注意插件返回值结构，如 POI 搜索返回值、逆向地理编码返回值。获取用户当前位置需读取权限，并通过逆向地理编码获取具体地址。
常用链接：
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online