vue项目接入高德地图点击地图获取经纬度及省市区

1. 准备工作，可以先看官方的介绍，JSAPI结合Vue使用，这个不需要在main.js中引入
2. index.html中

//如果只需要获取经纬度可以跳过这步，经纬度逆解析为详细地址时需要配置这个<script type="text/javascript">
   window._AMapSecurityConfig ={securityJsCode:'XXX',//所申请的安全密钥 注意这是安全密钥而不是key}</script>

1. index.vue的html部分

//我是封装在antd的弹窗组件中
<template><a-modaltitle="选择区域":visible="visible"@ok="handleOk"@cancel="handleCancel"okText="提交"cancelText="取消"><divid="container"></div><divclass="toolbar">
      当前坐标: {{ point[0] }}, {{ point[1] }}
      <br/>
      地址: {{ address }}
    </div></a-modal></template>

1. index.vue的script部分

<script>import AMapLoader from'@amap/amap-jsapi-loader'exportdefault{name:'MapDialog',data(){return{visible:false,//弹窗显隐center:[115.97539,28.715532],//地图中心点point:[],//经纬度-lng latmap:null,//地图实例marker:null,//地图icongeocoder: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.15plugins:['AMap.Geocoder',// 逆向地理解码插件'AMap.Marker'// 点标记插件]// 需要使用的的插件列表}).then(AMap=>{this.map =newAMap.Map('container',{//设置地图容器idzoom:12,//初始化地图级别center:this.center //初始化地图中心点位置})// 如果父组件传入了有效值 回显一个iconif(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(){// 清除其他iconif(this.marker){this.marker.setMap(null)this.marker =null}// 重新渲染iconthis.marker =newAMap.Marker({icon:'//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',position:this.point,//icon经纬度offset:newAMap.Pixel(-13,-30)//icon中心点的偏移量})this.marker.setMap(this.map)//设置icon},// 将经纬度转换为地址getAddress(){const self =this// 这里通过高德 SDK 完成。this.geocoder =newAMap.Geocoder({city:'全国',//地理编码时，设置地址描述所在城市; 默认全国; 可选值：城市名（中文或中文全拼）、citycode、adcoderadius: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 =nullthis.marker =nullthis.visible =false},// 取消回调handleCancel(){this.map =nullthis.marker =nullthis.visible =false}}}</script>

1. 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>

1. 页面效果

逆解析经纬度得到的详细地址