首页 > 网络编程 > JavaScript > 关于vue的element-ui web端引入高德地图并获取经纬度

关于vue的element-ui web端引入高德地图并获取经纬度

福牛 4月 25, 2023 33 0

发版前接到一个临时新需求 ，需要在web端地址选择时用地图，并获取经纬度。 临阵发版之际加需求，真的是很头疼，于是赶紧找度娘，找api。 我引入的是高德地图，首先要去申请key ， 和密钥，

首先用npm 安装loader

  1. npm i @amap/amap–jsapi–loader —save

然后在main.js里引入

-1

这里要注意，还需要在index.html文件里引入这一段，开始我没有引入这段，后面请求高德接口时就会报错

-2

这里我写了一个组件，后面直接引用就可以 组件内容如下：

-3

内容有点多，截不完图，下面附上源码：

  1. <template lang=“html”>
  2.      <el-dialog v-dialogDrag title=“选择地点” append-to-body width=“600px” :visible.sync=“mvisible” :close-on-click-modal=“false”
  3.                  @close=“cancel”
  4.      >
  5.      <div id=“amap-container”>
  6.          <el-input
  7.          id=“search-input”
  8.          v-model=“searchValue”
  9.          class=“input-with”
  10.          placeholder=“请输入地址”
  11.          clearable
  12.          @clear=“handelclearInput”
  13.          @keyup.native.enter=“onhandelSearch”
  14.          >
  15. <el-button
  16.              slot=“append”
  17.              size=“small”
  18.              type=“primary”
  19.              icon=“el-icon-search”
  20.              @click=“onhandelSearch”
  21.          >搜索
  22.          </el-button>
  23.          </el-input>
  24.          <el-row class=“margin-top-10 address”>
  25.          当前地址是： {{ formattedAddress }}
  26.          </el-row>
  27.          <div id=“custom-amap” />
  28.      </div>
  29.      <div slot=“footer” class=“dialog-footer”>
  30.          <el-button type=“primary” @click=“handelSave”>保 存</el-button>
  31.          <el-button @click=“cancel”>取 消</el-button>
  32.      </div>
  33.      </el-dialog>
  34. </template>
  35.  
  36. <script>
  37. import AMapLoader from ‘@amap/amap-jsapi-loader’
  38. // const AMap = window.AMap
  39. export default {
  40.      name: ‘AMap’,
  41.      props: {
  42.      defaultValue: {
  43.          type: String,
  44.          default: ”
  45.      },
  46.      visible: {
  47.          type: Boolean,
  48.          default: false
  49.      }
  50.      },
  51.      data() {
  52.      return {
  53.          mvisible: false,
  54.          defaultCity: ”,
  55.          // 地图对象
  56.          map: null,
  57.          // 定位默认地址 | 搜索后选择的地址
  58.          formattedAddress: null,
  59.          // 地址对应的经纬度信息
  60.          position: {},
  61.          // 检索关键字
  62.          searchValue: ”,
  63.          // 检索函数对象
  64.          placeSearch: null,
  65.          // 检索结果数据数据
  66.          searchInfoList: [],
  67.          // 地图标记
  68.          marker: ”,
  69.          // 地址解析（正向）
  70.          geocoder: ”,
  71.          // 地址名称
  72.          name: ”,
  73.          adcode: ”
  74.      }
  75.      },
  76.      watch: {
  77.      defaultValue() {
  78.          this.searchValue = this.defaultValue
  79.      },
  80.      visible() {
  81.          this.mvisible = this.visible
  82.          this.searchValue = this.defaultValue
  83.          // this.searchValue = ‘四川省成都市武侯区’
  84.          this.formattedAddress = this.defaultValue
  85.          // 初始化地图页面
  86.          this.initMap()
  87.      }
  88.      },
  89.      beforeDestroy() {
  90.      // 销毁地图
  91.      this.map.destroy()
  92.      },
  93.      methods: {
  94.      // 初始化地图页面
  95.      initMap() {
  96.          AMapLoader.load({
  97.          key: ‘dc4da34d26ef0a0851ce91ce099f6f46’, // 申请好的Web端开发者Key，首次调用 load 时必填
  98.          version: ‘2.0’, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
  99.          plugins: [”] // 需要使用的的插件列表，如比例尺’AMap.Scale’等
  100.          }).then((AMap) => {
  101.          this.map = new AMap.Map(‘custom-amap’, { // 设置地图容器id
  102.              viewMode: ‘3D’, // 是否为3D地图模式
  103.              zoom: 5, // 初始化地图级别
  104.              resizeEnable: true,
  105.              center: [105.602725, 37.076636] // 初始化地图中心点位置
  106.          })
  107.          // 添加maker
  108.          this.setMaker()
  109.          // 添加鼠标点选地图选择地址
  110.          this.addAmapGeocoder()
  111.          this.onhandelSearch()
  112.          }).catch(e => {
  113.          console.log(e)
  114.          })
  115.      },
  116.      // 添加maker
  117.      setMaker() {
  118.          // eslint-disable-next-line no-undef
  119.          this.marker = new AMap.Marker()
  120.          this.map.add(this.marker)
  121.          // 添加解析地理位置插件
  122.          this.map.plugin(‘AMap.Geocoder’, () => {
  123.          // 异步加载插件
  124.          this.geocoder = new AMap.Geocoder({
  125.              city: this.defaultCity, // 默认：“全国”
  126.              radius: 1000 // 范围，默认：500
  127.          })
  128.          })
  129.      },
  130.      // 添加鼠标点选地图选择地址
  131.      addAmapGeocoder() {
  132.          // 添加maker
  133.          this.setMaker()
  134.          // 地图添加点击事件
  135.          this.map.on(‘click’, function(e) {
  136.          console.log(‘e.lnglat.getLng()’, e.lnglat.getLng())
  137.          // document.getElementById(“lnglat”).value = e.lnglat.getLng() + ‘,’ + e.lnglat.getLat()
  138.          })
  139.          this.map.on(‘click’, e => {
  140.          console.log(‘e====’, e)
  141.          const lnglat = [e.lnglat.getLng(), e.lnglat.getLat()]
  142.          this.marker.setPosition(lnglat)
  143.          this.geocoder.getAddress(lnglat, (status, result) => {
  144.              if (status === ‘complete’ && result.regeocode) {
  145.              const res = result.regeocode
  146.              const { adcode, province, city, district } = res.addressComponent
  147.              this.searchValue = res.formattedAddress
  148.              const name = province + city + district
  149.              const sdata = { adcode, lng: lnglat[0], lat: lnglat[1], name }
  150.              this.searchSuccessData(sdata)
  151.              console.log(‘result’, result)
  152.              } else {
  153.              console.log(JSON.stringify(result))
  154.              }
  155.          })
  156.          })
  157.      },
  158.      // 按钮触发检索
  159.      onhandelSearch() {
  160.          const that = this
  161.          this.geocoder.getLocation(this.searchValue, function(status, result) {
  162.          if (status === ‘complete’ && result.geocodes.length) {
  163.              const { lng, lat } = result.geocodes[0].location
  164.              const { province, city, district } = result.geocodes[0].addressComponent
  165.              const { adcode } = result.geocodes[0]
  166.              const name = province + city + district
  167.              const sdata = { adcode, lng, lat, name }
  168.              that.searchSuccessData(sdata)
  169.              that.marker.setPosition([lng, lat])
  170.              that.map.add(that.marker)
  171.              that.map.setFitView(that.marker)
  172.          } else {
  173.              this.$message.error(‘根据地址查询位置失败’)
  174.          }
  175.          })
  176.      },
  177.      searchSuccessData(res) {
  178.          this.formattedAddress = this.searchValue
  179.          this.adcode = res.adcode
  180.          this.name = res.name
  181.          this.position = { lng: res.lng, lat: res.lat }
  182.      },
  183.      // 清除input里的值，清除搜索结果，再次初始化map
  184.      handelclearInput() {
  185.          document.querySelector(‘#searchResultPanel’).innerHTML = ”
  186.      },
  187.      // 保存当前选择的地址,分发事件
  188.      handelSave() {
  189.          this.searchValue = this.formattedAddress
  190.          const { lat, lng } = this.position
  191.          if (lat && lng) {
  192.          const data = {
  193.              name: this.name,
  194.              adcode: this.adcode,
  195.              // 地址名称
  196.              address: this.formattedAddress,
  197.              // 纬度lat
  198.              lat,
  199.              // 经度lng
  200.              lng
  201.          }
  202.          this.$emit(‘getPosition’, true, data)
  203.          } else {
  204.          this.$message.error(‘请选择地址获取经纬度’)
  205.          }
  206.      },
  207.      cancel() {
  208.          this.$emit(‘getPosition’, false)
  209.      }
  210.      }
  211. }
  212. </script>
  213.  
  214. <style scoped lang=“scss”>
  215. #amap-container {
  216.      margin: 20px;
  217.  
  218.      .el–input__clear {
  219.      line–height: 34px;
  220.      /*top: 20px;*/
  221.      }
  222.  
  223.      #custom-amap {
  224.      height: 30vh;
  225.      width: 100%;
  226.      margin–top: 10px;
  227.      border: 1px solid #ccc;
  228.      }
  229.  
  230.      .input–with {
  231.      /*position: fixed;*/
  232.      /*top: 40px;*/
  233.      z–index: 1;
  234.      width: 580px;
  235.      }
  236.  
  237.      .address {
  238.      color: #373737;
  239.      }
  240.  
  241. }
  242.  
  243. .amap–sug–result {
  244.      z–index: 99999;
  245. }
  246. </style>
  247.  

然后在需要的文件里引入就可以： 当我点击这个输入框时，就会弹出地图组件

-4

这个是地图组件：

-5

引用组件的代码如下：

  1.      <el-input v-model=“basicFormValidate.businessAddressDetail” @click.native=“initMapConfirm” />
  2.      <amap :visible=“amapVisible” :default-value=“basicFormValidate.businessAddressDetail” :business-province-id=“basicFormValidate.businessProvinceId” @getPosition=“mapConfirm” />
  3.      import Amap from ‘@/views/common/Amap’
  4.      components: { Amap }
  5.  
  6.      initMapConfirm() {
  7.          this.amapVisible = true
  8.      },
  9.      mapConfirm(flag, data) {
  10.          this.amapVisible = false
  11.          if (flag) {
  12.          this.basicFormValidate.businessAddressDetail = data.address
  13.          this.basicFormValidate.businessAddressLatitude = data.lat
  14.          this.basicFormValidate.businessAddressLongitude = data.lng
  15.          this.basicFormValidate.businessProvinceId = data.businessProvinceId
  16.          }
  17.      }

最后的结果就是这样的

-1

如果说之前有地址，那会代入并反向定位，获取其经纬度

-2

到此这篇关于关于vue的element-ui web端引入高德地图并获取经纬度的文章就介绍到这了,更多相关element-ui高德地图获取经纬度内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

标签

相关推荐

发表评论