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

这篇具有很好参考价值的文章主要介绍了vue项目接入高德地图点击地图获取经纬度及省市区。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

准备工作，可以先看官方的介绍，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>