Vue使用高德地图实现城市定位

 更新时间:2021年08月31日 17:26:39   作者:水香木鱼  
这篇文章主要为大家详细介绍了Vue使用高德地图实现城市定位,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue使用高德地图实现城市定位的具体代码,供大家参考,具体内容如下

一 前端选择框点击跳转至地图选址页面

<van-row class="address_item">
  <van-col span="6" class="item-title">收货地址</van-col>
  <van-col span="18">
  <p class="item">
  <van-icon name="arrow" class="arrow"/>
  <van-icon name="location-o" />
  <span><van-field v-model="mapname" placeholder="点击选择" readonly v-on:click="mapaddress"/></span>
  </p>
  </van-col>
</van-row>

二 触发点击事件

mapaddress(){
     et a=this.$route.query.id
      localStorage.setItem('names',this.names);
      localStorage.setItem('phone',this.phone);
      localStorage.setItem('addressDetail',this.addressDetail);
      localStorage.setItem('postalCode',this.postalCode);
      localStorage.setItem('checked',this.checked);
      this.$router.push({
        path: '/mapLocation',
        query: {id:a,are:this.are}
     })
}

三 地图选址页面

使用ifarm内嵌引入高德地图组件高德地图 注意使用地图需要申请key申请时注意根据自己需求选择服务

<template>
  <iframe id="getAddress" @load="loadiframe"
    src="https://m.amap.com/picker/?keywords=写字楼,小区,学校&zoom=15&center=&radius=1000&total=20&key=你申请的key"
    style="width:100%; height:100%;position: absolute;z-index:22222;">
  </iframe>
</template>

四 地图加载完成选择地址后跳转至父页面

由于我的需求在输入后跳转父页面,父页面的表单会刷新,所以做了一个缓存处理。

loadiframe() {
  let iframe = document.getElementById('getAddress').contentWindow;
  iframe.postMessage('hello', 'https://m.amap.com/picker/');
  window.addEventListener("message", function (e) {
  if (e.data.command != "COMMAND_GET_TITLE") {
  //实现业务代码
  let a=this.$route.query.id
  let are=this.$route.query.are
  let address=e.data.address
  let location=e.data.location
  let name=e.data.name
  this.$router.push({
  path: '/addressFill',
    query: {address:address,location:location,name:name,id:a,are:are}
  })

  }

  }.bind(this), false);
},

五 缓存处理

在跳转子地图选择页面时将表单数据存入缓存,子页面跳转回来时当前页面表单数据不刷新。

localStorage.setItem('names',this.names);
localStorage.setItem('phone',this.phone);
localStorage.setItem('addressDetail',this.addressDetail);
localStorage.setItem('postalCode',this.postalCode);
localStorage.setItem('checked',this.checked);

六 清除缓存

缓存解决了页面返回无数据的情况,但是同时会产生这个页面的缓存一直存在,所以,在返回当前页面时进行验证,并清除缓存

let addressDetail= localStorage.getItem('addressDetail');

if(addressDetail!=undefined&&addressDetail!=null&&addressDetail!=""){
  this.addressDetail=addressDetail
  localStorage.removeItem("addressDetail");
}else{
  this.addressDetail=""
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue 对象和数据的强制更新方式

    Vue 对象和数据的强制更新方式

    这篇文章主要介绍了Vue 对象和数据的强制更新方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue 3 + Element Plus树形表格全选多选及子节点勾选的问题解决方法

    Vue 3 + Element Plus树形表格全选多选及子节点勾选的问题解决方

    在本文中,我们解决了Vue 3和Element Plus树形表格中的全选、多选、子节点勾选和父节点勾选等常见问题,通过逐步实现这些功能,您可以构建功能强大且用户友好的树形表格组件,以满足各种数据展示需求,对Vue 3 Element Plus树形表格相关知识感兴趣的朋友一起看看吧
    2023-12-12
  • 详解Vue3中Teleport的使用

    详解Vue3中Teleport的使用

    门户(Portal)的概念是Vue3的新功能之一,也就是将模板 HTML 移至 DOM 的不同部分的方法。Portal 是 React 中的常见功能,Vue2 的 portal-vue &nbsp;库也提供了相似的功能。在 Vue3 中用 Teleport 对这个概念提供了原生支持。本文将介绍Teleport的相关用法
    2021-05-05
  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解

    这篇文章主要介绍了vue中v-model动态生成的实例详解的相关资料,希望通过本文能帮助到大家,让大家理解掌握这部分内容,需要的朋友可以参考下
    2017-10-10
  • Storybook 7.0 Beta Vue3踩坑解决记录

    Storybook 7.0 Beta Vue3踩坑解决记录

    这篇文章主要为大家介绍了Storybook 7.0 Beta Vue3踩坑解决记录详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • vue 移动端记录页面浏览位置的方法

    vue 移动端记录页面浏览位置的方法

    这篇文章主要介绍了vue 移动端记录页面浏览位置的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • vue之监听器的使用案例详解

    vue之监听器的使用案例详解

    这篇文章主要介绍了vue之监听器的使用案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • Vue3中toRef与toRefs的区别

    Vue3中toRef与toRefs的区别

    这篇文章主要介绍了Vue3中toRef与toRefs的区别,toRefs与toRef功能一致,但可以批量创建多个ref对象,需要注意的是它只会解析对象的第一层属性,语法直接传入对象 toRefs,下面更多内容的介绍需要的小伙伴可以参考一下
    2022-03-03
  • 解决betterScroll在vue中存在图片时,出现拉不动的问题

    解决betterScroll在vue中存在图片时,出现拉不动的问题

    今天小编就为大家分享一篇解决betterScroll在vue中存在图片时,出现拉不动的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue基于iview实现登录密码的显示与隐藏功能

    Vue基于iview实现登录密码的显示与隐藏功能

    这篇文章主要介绍了Vue基于iview实现登录密码的显示与隐藏功能,本文通过截图实例代码说明给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03

最新评论