vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue点击地图获取经纬度省市区

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

作者:陌人笙

这篇文章主要给大家介绍了关于vue项目接入高德地图点击地图获取经纬度以及省市区功能的相关资料,开发中我们需要地图定位,就是用户输入位置,自动定位获取经纬度,需要的朋友可以参考下

1、准备工作

可以先看官方的介绍,JSAPI结合Vue使用,这个不需要在main.js中引入

2、index.html中

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

3、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>

4、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>

5、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>

6、页面效果

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

Alt

总结 

到此这篇关于vue项目接入高德地图点击地图获取经纬度以及省市区功能的文章就介绍到这了,更多相关vue点击地图获取经纬度省市区内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文