快捷導航

vue項目接入高德地圖點擊地圖獲取經(jīng)緯度以及省市區(qū)功能

更新時間：2023年08月05日 09:43:31 作者：陌人笙

這篇文章主要給大家介紹了關(guān)于vue項目接入高德地圖點擊地圖獲取經(jīng)緯度以及省市區(qū)功能的相關(guān)資料,開發(fā)中我們需要地圖定位,就是用戶輸入位置,自動定位獲取經(jīng)緯度,需要的朋友可以參考下

1、準備工作

可以先看官方的介紹，JSAPI結(jié)合Vue使用，這個不需要在main.js中引入

2、index.html中

//如果只需要獲取經(jīng)緯度可以跳過這步，經(jīng)緯度逆解析為詳細地址時需要配置這個
<script type="text/javascript">
   window._AMapSecurityConfig = {
   		securityJsCode: 'XXX', //所申請的安全密鑰 注意這是安全密鑰而不是key
   }
</script>

3、index.vue的html部分

//我是封裝在antd的彈窗組件中
<template>
  <a-modal title="選擇區(qū)域" :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: [], //經(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初始化完成進行地圖初始化
    initMap() {
      AMapLoader.load({
        key: 'XXX', // 申請好的Web端開發(fā)者Key，首次調(diào)用 load 時必填
        version: '2.0', // 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15
        plugins: [
          'AMap.Geocoder', // 逆向地理解碼插件
          'AMap.Marker' // 點標記插件
        ] // 需要使用的的插件列表
      })
        .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]
            // 增加點標記
            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經(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è)置地址描述所在城市; 默認全國; 可選值：城市名（中文或中文全拼）、citycode、adcode
        radius: 1000, //逆地理編碼時，以給定坐標為中心點; 默認1000; 取值范圍(0-3000)
        extensions: 'all' //逆地理編碼時，返回信息的詳略; 默認值：base，返回基本地址信息; 默認值：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>

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、頁面效果

逆解析經(jīng)緯度得到的詳細地址

Alt

總結(jié)

到此這篇關(guān)于vue項目接入高德地圖點擊地圖獲取經(jīng)緯度以及省市區(qū)功能的文章就介紹到這了,更多相關(guān)vue點擊地圖獲取經(jīng)緯度省市區(qū)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: