- 准备工作，可以先看官方的介绍，JSAPI结合Vue使用，这个不需要在main.js中引入
- index.html中
//如果只需要获取经纬度可以跳过这步，经纬度逆解析为详细地址时需要配置这个
<script type="text/javascript">
window._AMapSecurityConfig = {
securityJsCode: 'XXX', //所申请的安全密钥 注意这是安全密钥而不是key
}
</script>
- index.vue的html部分
//我是封装在antd的弹窗组件中
<template>
<a-modal title="选择区域" :visible="visible" @ok="handleOk" @cancel="handleCancel" okText="提交" cancelText="取消">
<div id="container"></div>
<div class="toolbar">
当前坐标: {
{ 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: [], //经纬度-lng lat
map: null, //地图实例
marker: null, //地图icon
geocoder: null, //逆解析实例
address: null //地址
}
},
methods: {
// 打开弹窗
open({
point, address }) {
// 如果父组件携带了参数 赋值做回显
if (point && address) {
this.address = address
this.point = point
this.center = point
}
// 打开弹窗
this.visible = true
//地图初始化
this.initMap()
},
//DOM初始化完成进行地图初始化
initMap() {
AMapLoader.load({
key: 'XXX', // 申请好的Web端开发者Key，首次调用 load 时必填
version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
plugins: [
'AMap.Geocoder', // 逆向地理解码插件
'AMap.Marker' // 点标记插件
] // 需要使用的的插件列表
})
.then(AMap => {
this.map = new AMap.Map('container', {
//设置地图容器id
zoom: 12, //初始化地图级别
center: this.center //初始化地图中心点位置
})
// 如果父组件传入了有效值 回显一个icon
if (this.point.length > 0) {
this.addMarker()
}
//监听用户的点击事件
this.map.on('click', e => {
let lng = e.lnglat.lng
let lat = e.lnglat.lat
this.point = [lng, lat]
// 增加点标记
this.addMarker()
// 获取地址
this.getAddress()
})
})
.catch(e => {
console.log(e)
})
},
// 增加点标记
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经纬度
offset: new AMap.Pixel(-13, -30) //icon中心点的偏移量
})
this.marker.setMap(this.map) //设置icon
},
// 将经纬度转换为地址
getAddress() {
const self = this
// 这里通过高德 SDK 完成。
this.geocoder = new AMap.Geocoder({
city: '全国', //地理编码时，设置地址描述所在城市; 默认全国; 可选值：城市名（中文或中文全拼）、citycode、adcode
radius: 1000, //逆地理编码时，以给定坐标为中心点; 默认1000; 取值范围(0-3000)
extensions: 'all' //逆地理编码时，返回信息的详略; 默认值：base，返回基本地址信息; 默认值：base，返回基本地址信息
})
//调用逆解析方法 个人开发者调用量上限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
}
}
})
},
// 提交回调
handleOk() {
this.$emit('callback', {
point: this.point, address: this.address })
this.map = null
this.marker = null
this.visible = false
},
// 取消回调
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>
- 页面效果
逆解析经纬度得到的详细地址
