學習記錄：
最終效果：
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()">{{model.city}}</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>