在vue中，利用geolocation获取地理坐标，然后用高德地图所提供的api，将地理坐标转化为结构化的地址信息
1.注册高德地图账号，进入控制台，创建一个应用，获取key（选择web端 js api）。
2.html中引入，将{parameter} 替换成你的key
（踩坑：&plugin=AMap.Geocoder
<script src="https://webapi.amap.com/mapsv=1.4.15&key={parameter}&plugin=AMap.Geocoder"></script>
3.创建一个container的div，作为地图的容器，并绘制地图
<div id="container"></div>
creataMap:function(){
map = new AMap.Map('container',{
resizeEnable:true,
zoom: 13, //设置地图显示的缩放级别
center: [116.397428, 39.90923],//设置地图中心点坐标
layers: [new AMap.TileLayer.Satellite()], //设置图层,可设置成包含一个或多个图层的数组
mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
viewMode: '2D', //设置地图模式
lang:'zh_cn', //设置地图语言类型
});
// 创建一个 Marker 实例：
let marker = new AMap.Marker({
position: new AMap.LngLat(116.39,39.9), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: '北京',
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
marker.setLabel({
offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
content: "<div class='info'>北京</div>", //设置文本标注内容
direction: 'right' //设置文本标注方位
});
4.创建一个a标签，绑定点击事件，具体功能为调用定位api，返回坐标信息。
传送门：原文地址
getLocation:function(){
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(get_position);
}
else{
alert("该浏览器不支持获取地理位置");
}
}
get_position就是获取地理位置的回调函数，并在地图中绘制当前点坐标
get_position:(position)=>{
let lat = position.coords.latitude ;
let lon = position.coords.longitude ;
let lnglat = new AMap.LngLat(lon , lat);
console.log(lnglat);
let geocoder = new AMap.Geocoder();
geocoder.getAddress( lnglat , function(status , result){
// console.log(status);
console.log(result);
if(status === 'complete' && result.info === 'OK')
{
map.setCenter(lnglat);
// 创建一个 Marker 实例：
let marker = new AMap.Marker({
position: lnglat, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: "我是title",
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
// 移除已创建的 marker
// map.remove(marker);
console.log(result.regeocode.formattedAddress);
}
})
}
使用vue组件实现，全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 , user-scalable=no">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=3c9b0825bfed7f18804709c9399a3389&plugin=AMap.Geocoder"></script>
<style>
#container{
width: 100%;
height: 700px;
border: 1px salmon solid;
}
a{
text-decoration: none;
color: #000;
}
</style>
</head>
<body>
<div id="position">
<a href="javascript:void(0)" @click="getLocation()"></a>
<div id="container"></div>
</div>
<script>
var map ;
var vm = new Vue({
data() {
return {
model:{city:"未获取地址信息"}
}
},
mounted() {
this.creataMap();
},
methods: {
creataMap:function(){
map = new AMap.Map('container',{
resizeEnable:true,
zoom: 13, //设置地图显示的缩放级别
center: [116.397428, 39.90923],//设置地图中心点坐标
layers: [new AMap.TileLayer.Satellite()], //设置图层,可设置成包含一个或多个图层的数组
mapStyle: 'amap://styles/whitesmoke', //设置地图的显示样式
viewMode: '2D', //设置地图模式
lang:'zh_cn', //设置地图语言类型
});
// 创建一个 Marker 实例：
let marker = new AMap.Marker({
position: new AMap.LngLat(116.39,39.9), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: '北京',
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
marker.setLabel({
offset: new AMap.Pixel(20, 20), //设置文本标注偏移量
content: "<div class='info'>北京</div>", //设置文本标注内容
direction: 'right' //设置文本标注方位
});
},
getLocation:function(){
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(this.get_position);
}
else{
alert("该浏览器不支持获取地理位置");
}
},
get_position:(position)=>{
let lat = position.coords.latitude ;
let lon = position.coords.longitude ;
let lnglat = new AMap.LngLat(lon , lat);
console.log(lnglat);
let geocoder = new AMap.Geocoder();
geocoder.getAddress( lnglat , function(status , result){
// console.log(status);
console.log(result);
if(status === 'complete' && result.info === 'OK')
{
vm.$set(vm.model , 'city', result.regeocode.formattedAddress);
map.setCenter(lnglat);
// 创建一个 Marker 实例：
let marker = new AMap.Marker({
position: lnglat, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: vm.model.city,
});
// 将创建的点标记添加到已有的地图实例：
map.add(marker);
// 移除已创建的 marker
// map.remove(marker);
console.log(vm.model.city);
}
})
}
}
}).$mount("#position");
</script>
</body>
</html>
最终效果：
