目录
第一步：先按部就班，进入高德开放平台，跟着步骤注册账号，创建应用
第二步：用npm下载包，初始化地图
第三步：实现点击地图添加标记
第四步：点击获取详细地址
第五步：搜索获取相关地区提示
第六步：全部代码（把密钥和key替换可直接运行）
高德地图有API的示例，但是是用JS写的，我们用的时候用vue的写法改一下就好。
官网示例地址：地图的创建-生命周期-示例中心-JS API 示例 | 高德地图API (amap.com)
第一步：先按部就班，进入高德开放平台，跟着步骤注册账号，创建应用
记住创建时服务平台要选择【web端（JS API）】，如果选隔壁的web服务有些功能用不了（比如后面的地址逆解析）。
第二步：用npm下载包，初始化地图
（下面代码要把里面的安全密钥和key替换成自己的）
npm i @amap/amap-jsapi-loader --save<template>
<div id="container" class="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
// 安全密钥
securityJsCode: "95869xxxxxxxxxxxxxxxxx53df87dfb",
};
export default {
name: "TestIndex",
methods: {
initMap() {
AMapLoader.load({
// 你申请的Key
key: "c31bea684xxxxxxxxxxxxxxxxxbbd92442",
version: "2.0",
// 需要用到的插件
plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
})
.then((AMap) => {})
.catch((err) => {
// 错误
console.log(err);
});
},
},
mounted() {
this.initMap();
},
};
</script>
<style>
.container {
width: 500px;
height: 300px;
}
</style>
第三步：实现点击地图添加标记
步骤：给map绑定点击事件，点击后可获取点击处的经纬度，根据经纬度就可以给地图添加标记。（添加标记前清除上一次标记）
<template>
<div id="container" class="container"></div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
// 安全密钥
securityJsCode: "95869abfxxxxxxxxxxxxxxxx53df87dfb",
};
export default {
name: "TestIndex",
data() {
return {
// 地图实例
map: null,
// 标记点
marker: "",
// 位置信息
form: {
lng: "",
lat: "",
address: "",
//地区编码
adcode: "",
},
};
},
methods: {
initMap() {
AMapLoader.load({
// 你申请的Key
key: "c31bea68xxxxxxxxxxxxxxxxd92442",
version: "2.0",
// 需要用到的插件
plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
})
.then((AMap) => {
this.map = new AMap.Map("container", {
viewMode: "3D", //是否为3D地图模式
zoom: 5, //初始化地图级别
center: [105.602725, 37.076636], //初始化地图中心点位置
});
//点击获取经纬度;
this.map.on("click", (e) => {
// 获取经纬度
this.form.lng = e.lnglat.lng;
this.form.lat = e.lnglat.lat;
// 清除点
this.removeMarker();
// 标记点
this.setMapMarker();
});
})
.catch((err) => {
// 错误
console.log(err);
});
},
// 标记点
setMapMarker() {
// 自动适应显示想显示的范围区域
this.map.setFitView();
this.marker = new AMap.Marker({
map: this.map,
position: [this.form.lng, this.form.lat],
});
this.map.setFitView();
this.map.add(this.marker);
},
// 清除点
removeMarker() {
if (this.marker) {
this.map.remove(this.marker);
}
},
},
mounted() {
this.initMap();
},
};
</script>
<style>
.container {
width: 500px;
height: 300px;
}
</style>
第四步：点击获取详细地址
步骤：接上一步，点击可获取经纬度，根据经纬度可解析出点击处详细地址
地理编码与逆地理编码-服务-教程-地图 JS API v2.0 | 高德地图API (amap.com)
在初始化地图的时候，实例化逆地理解析的插件：
//地址逆解析;
this.geoCoder = new AMap.Geocoder({
city: "010", //城市设为北京，默认：“全国”
radius: 1000, //范围，默认：500
});在methods中直接定义一个函数：
// 逆解析地址
toGeoCoder() {
let lnglat = [this.form.lng, this.form.lat];
this.geoCoder.getAddress(lnglat, (status, result) => {
if (status === "complete" && result.regeocode) {
this.form.address = result.regeocode.formattedAddress;
}
});
},注意到，每次点击都会标记一下，我们可以直接在标记点的函数里面调用toGeoCoder函数即可。
这样，经纬度、信息地址我们都保存在了data中。
第五步：搜索获取相关地区提示
获取输入提示数据-输入提示-示例中心-JS API 2.0 示例 | 高德地图API (amap.com)
核心代码：（query代表输入的关键词，result.tips代表提示信息列表）
在初始化地图的时候，实例化搜索提示的插件：
this.AutoComplete = new AMap.AutoComplete({ city: "全国" });this.AutoComplete.search(query, (status, result) => {
this.options = result.tips;
});第六步：全部代码（把密钥和key替换可直接运行）
<template>
<div style="display: flex">
<div>
<div>
<el-select
v-model="keywords"
filterable
remote
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading"
:clearable="true"
size="mini"
@change="currentSelect"
style="width: 500px"
>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item"
class="one-text"
>
<span style="float: left">{{ item.name }}</span>
<span style="float: right; color: #8492a6; font-size: 13px">{{
item.district
}}</span>
</el-option>
</el-select>
</div>
<div id="container" class="container"></div>
</div>
<div class="info-box">
纬度：{{ form.lat }}
<br />
经度：{{ form.lng }}
<p>详细地址：{{ form.address }}</p>
</div>
</div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
// 安全密钥
securityJsCode: "95869axxxxxxxxxxxxxxx3df87dfb",
};
export default {
name: "TestIndex",
data() {
return {
// 地图实例
map: null,
// 标记点
marker: "",
// 地址逆解析
geoCoder: null,
// 搜索提示
AutoComplete: null,
// 搜索关键字
keywords: "",
// 位置信息
form: {
lng: "",
lat: "",
address: "",
adcode: "", //地区编码
},
// 搜索节流阀
loading: false,
// 搜索提示信息
options: [],
};
},
methods: {
initMap() {
AMapLoader.load({
// 你申请的Key
key: "c31beaxxxxxxxxxxxxxxxxxxxx2442",
version: "2.0",
// 需要用到的插件
plugins: ["AMap.Geocoder", "AMap.AutoComplete"],
})
.then((AMap) => {
this.map = new AMap.Map("container", {
viewMode: "3D", //是否为3D地图模式
zoom: 5, //初始化地图级别
center: [105.602725, 37.076636], //初始化地图中心点位置
});
//地址逆解析插件
this.geoCoder = new AMap.Geocoder({
city: "010", //城市设为北京，默认：“全国”
radius: 1000, //范围，默认：500
});
// 搜索提示插件
this.AutoComplete = new AMap.AutoComplete({ city: "全国" });
//点击获取经纬度;
this.map.on("click", (e) => {
// 获取经纬度
this.form.lng = e.lnglat.lng;
this.form.lat = e.lnglat.lat;
// 清除点
this.removeMarker();
// 标记点
this.setMapMarker();
});
})
.catch((err) => {
// 错误
console.log(err);
});
},
// 标记点
setMapMarker() {
// 自动适应显示想显示的范围区域
this.map.setFitView();
this.marker = new AMap.Marker({
map: this.map,
position: [this.form.lng, this.form.lat],
});
// 逆解析地址
this.toGeoCoder();
this.map.setFitView();
this.map.add(this.marker);
},
// 清除点
removeMarker() {
if (this.marker) {
this.map.remove(this.marker);
}
},
// 逆解析地址
toGeoCoder() {
let lnglat = [this.form.lng, this.form.lat];
this.geoCoder.getAddress(lnglat, (status, result) => {
if (status === "complete" && result.regeocode) {
this.form.address = result.regeocode.formattedAddress;
}
});
},
// 搜索
remoteMethod(query) {
console.log(query);
if (query !== "") {
this.loading = true;
setTimeout(() => {
this.loading = false;
this.AutoComplete.search(query, (status, result) => {
this.options = result.tips;
});
}, 200);
} else {
this.options = [];
}
},
// 选中提示
currentSelect(val) {
// 清空时不执行后面代码
if (!val) {
return;
}
this.form = {
lng: val.location.lng,
lat: val.location.lat,
address: val.district + val.address,
adcode: val.adcode,
};
// 清除点
this.removeMarker();
// 标记点
this.setMapMarker();
},
},
mounted() {
this.initMap();
},
};
</script>
<style>
.container {
width: 500px;
height: 300px;
}
</style>