- 準(zhǔn)備工作，可以先看官方的介紹，JSAPI結(jié)合Vue使用，這個不需要在main.js中引入
- index.html中
//如果只需要獲取經(jīng)緯度可以跳過這步，經(jīng)緯度逆解析為詳細(xì)地址時需要配置這個
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'XXX', //所申請的安全密鑰 注意這是安全密鑰而不是key
}
</script>
- index.vue的html部分
//我是封裝在antd的彈窗組件中
<template>
<a-modal title="選擇區(qū)域" :visible="visible" @ok="handleOk" @cancel="handleCancel" okText="提交" cancelText="取消">
<div id="container"></div>
<div class="toolbar">
當(dāng)前坐標(biāo): {{ point[0] }}, {{ point[1] }}
<br />
地址: {{ address }}
</div>
</a-modal>
</template>
- index.vue的script部分
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
name: 'MapDialog',
data() {
return {
visible: false, //彈窗顯隱
center: [115.97539, 28.715532], //地圖中心點
point: [], //經(jīng)緯度-lng lat
map: null, //地圖實例
marker: null, //地圖icon
geocoder: null, //逆解析實例
address: null //地址
}
},
methods: {
// 打開彈窗
open({ point, address }) {
// 如果父組件攜帶了參數(shù) 賦值做回顯
if (point && address) {
this.address = address
this.point = point
this.center = point
}
// 打開彈窗
this.visible = true
//地圖初始化
this.initMap()
},
//DOM初始化完成進(jìn)行地圖初始化
initMap() {
AMapLoader.load({
key: 'XXX', // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
version: '2.0', // 指定要加載的 JSAPI 的版本，缺省時默認(rèn)為 1.4.15
plugins: [
'AMap.Geocoder', // 逆向地理解碼插件
'AMap.Marker' // 點標(biāo)記插件
] // 需要使用的的插件列表
})
.then(AMap => {
this.map = new AMap.Map('container', {
//設(shè)置地圖容器id
zoom: 12, //初始化地圖級別
center: this.center //初始化地圖中心點位置
})
// 如果父組件傳入了有效值 回顯一個icon
if (this.point.length > 0) {
this.addMarker()
}
//監(jiān)聽用戶的點擊事件
this.map.on('click', e => {
let lng = e.lnglat.lng
let lat = e.lnglat.lat
this.point = [lng, lat]
// 增加點標(biāo)記
this.addMarker()
// 獲取地址
this.getAddress()
})
})
.catch(e => {
console.log(e)
})
},
// 增加點標(biāo)記
addMarker() {
// 清除其他icon
if (this.marker) {
this.marker.setMap(null)
this.marker = null
}
// 重新渲染icon
this.marker = new AMap.Marker({
icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
position: this.point, //icon經(jīng)緯度
offset: new AMap.Pixel(-13, -30) //icon中心點的偏移量
})
this.marker.setMap(this.map) //設(shè)置icon
},
// 將經(jīng)緯度轉(zhuǎn)換為地址
getAddress() {
const self = this
// 這里通過高德 SDK 完成。
this.geocoder = new AMap.Geocoder({
city: '全國', //地理編碼時，設(shè)置地址描述所在城市; 默認(rèn)全國; 可選值：城市名（中文或中文全拼）、citycode、adcode
radius: 1000, //逆地理編碼時，以給定坐標(biāo)為中心點; 默認(rèn)1000; 取值范圍(0-3000)
extensions: 'all' //逆地理編碼時，返回信息的詳略; 默認(rèn)值：base，返回基本地址信息; 默認(rèn)值：base，返回基本地址信息
})
//調(diào)用逆解析方法 個人開發(fā)者調(diào)用量上限5000（次/日）
this.geocoder.getAddress(this.point, function(status, result) {
if (status === 'complete' && result.info === 'OK') {
if (result && result.regeocode) {
// this指向改變
self.address = result.regeocode.formattedAddress
}
}
})
},
// 提交回調(diào)
handleOk() {
this.$emit('callback', { point: this.point, address: this.address })
this.map = null
this.marker = null
this.visible = false
},
// 取消回調(diào)
handleCancel() {
this.map = null
this.marker = null
this.visible = false
}
}
}
</script>
- index.vue的css部分
<style lang="less" scoped>
/deep/ .ant-modal {
width: 100vw !important;
max-width: 100vw !important;
top: 0;
padding-bottom: 0;
.ant-modal-body {
height: calc(100vh - 55px - 53px);
overflow-y: auto;
padding: 0;
.search-box {
width: 100%;
height: 150px;
}
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
.amap-icon img,
.amap-marker-content img {
width: 25px;
height: 34px;
}
}
.toolbar {
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
height: 100px;
background-color: #fff;
font-size: 20px;
text-align: center;
line-height: 50px;
}
}
}
</style>
- 頁面效果
逆解析經(jīng)緯度得到的詳細(xì)地址
文章來源地址http://www.zghlxwxcb.cn/news/detail-566725.html
文章來源：http://www.zghlxwxcb.cn/news/detail-566725.html
到了這里，關(guān)于vue項目接入高德地圖點擊地圖獲取經(jīng)緯度及省市區(qū)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
