iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue使用高德地图实现城市定位
  • 554
分享到

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

2024-04-02 19:04:59 554人浏览 八月长安
摘要

本文实例为大家分享了Vue使用高德地图实现城市定位的具体代码,供大家参考,具体内容如下 一 前端选择框点击跳转至地图选址页面 <van-row class="address

本文实例为大家分享了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=""
}

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

--结束END--

本文标题: Vue使用高德地图实现城市定位

本文链接: https://www.lsjlt.com/news/134073.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue使用高德地图实现城市定位
    本文实例为大家分享了Vue使用高德地图实现城市定位的具体代码,供大家参考,具体内容如下 一 前端选择框点击跳转至地图选址页面 <van-row class="address...
    99+
    2024-04-02
  • Vue使用百度地图实现城市定位
    本文实例为大家分享了Vue使用百度地图实现城市定位的具体代码,供大家参考,具体内容如下 Vue项目运行环境:Vue 2.0,Vue Cli 3.0 步骤一:登录 百度地图开放平台 在...
    99+
    2024-04-02
  • Vue使用高德地图选点定位搜索定位功能实现
    目录一、申请高德地图的使用密钥key。二、安装依赖。三、使用。四、常见问题。项目下载: 高德地图测试demo,高德地图测试demo-Node.js文档 效果图: 一、申请高德地图的...
    99+
    2022-11-13
    vue高德地图定位 vue高德地图搜索定位
  • vue使用高德地图实现实时定位天气预报功能
    目录JSAPI 的加载使用 JSAPI Loader (推荐)JSAPI key和安全密钥的使用项目代码步骤:1、在index.html页面body中添加密钥2、安装@amap/am...
    99+
    2024-04-02
  • vue怎么使用高德地图根据坐标定位点
    这篇文章将为大家详细讲解有关vue怎么使用高德地图根据坐标定位点,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。正文<script> var map,...
    99+
    2024-04-02
  • vue使用高德地图根据坐标定位点的代码怎么写
    今天小编给大家分享一下vue使用高德地图根据坐标定位点的代码怎么写的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。代码如下&l...
    99+
    2023-07-04
  • React+高德地图实时获取经纬度,定位地址
    目录1. 初始化地图2. 地图扎点3. 开启定位4. 监听地图变化5. 获取详细地址6. 扎点动画😄7. 结束1.根据高德官方的教程进行前期的配置 高德地图JSAPI...
    99+
    2024-04-02
  • vue怎么使用原生高德地图
    本篇内容主要讲解“vue怎么使用原生高德地图”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么使用原生高德地图”吧!1、先在vue项目根目录下新建vue.config.js,这个文件是没有...
    99+
    2023-06-29
  • Android中集成高德地图SDK实现地图定位和导航功能(二)
    我们接着上一篇文章开始继续实现android中集成高德地图的SDK实现地图 定位,搜索,导航的功能 如何让地图在手机上实现呢? 1.配置AndroidManifest 中的权限申请 可以参考官方文档 ...
    99+
    2023-09-04
    android java 开发语言 android studio
  • vue项目中如何使用高德地图
    这篇文章主要介绍“vue项目中如何使用高德地图”,在日常操作中,相信很多人在vue项目中如何使用高德地图问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue项目中如何使用高德地图”的疑惑有所帮助!接下来,请跟...
    99+
    2023-07-05
  • VUE中怎么调用高德地图获取当前位置
    这篇文章主要介绍“VUE中怎么调用高德地图获取当前位置”,在日常操作中,相信很多人在VUE中怎么调用高德地图获取当前位置问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”VUE中怎么调用高德地图获取当前位置”的疑...
    99+
    2023-07-06
  • vue利用openlayers加载天地图和高德地图
    目录一、天地图部分1、在vue中安装openlayers二、高德地图部分一、天地图部分 1、在vue中安装openlayers npm i --save ol 这里说的vue是基于脚...
    99+
    2024-04-02
  • React使用高德地图的实现示例(react-amap)
    pc版React重构,使用到了高德地图。搜了资料,发现有一个针对React进行封装的地图插件react-amap。官方网址:https://elemefe.github.io/rea...
    99+
    2024-04-02
  • Vue接入高德地图的完整实例
    目录前言参考资料Vue接入高德地图引用使用实现点击按钮缩放功能地图放大地图缩小测量距离测量面积行政区划查询渲染关键字搜索鼠标绘制区域总结前言 Vue 使用高德地图,实现缩放,鼠标绘制...
    99+
    2024-04-02
  • Vue如何开发高德地图应用
    这篇文章主要为大家展示了“Vue如何开发高德地图应用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue如何开发高德地图应用”这篇文章吧。异步加载因为使用 js sdk 应用,脚本文件本身体积很...
    99+
    2023-06-20
  • 如何在Html5中获取高德地图定位天气
    本篇文章给大家分享的是有关如何在Html5中获取高德地图定位天气,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。创建一个AMap.js文件// AMap.js//&nb...
    99+
    2023-06-09
  • Vue组件如何实现高德地图地址选择功能
    这篇文章给大家分享的是有关Vue组件如何实现高德地图地址选择功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、效果图二、组件要实现的功能1. 如果有传入坐标点,则定位到坐标点...
    99+
    2024-04-02
  • Vue开发高德地图应用的最佳实践
    目录前言异步加载封装组件使用组件自定义界面最佳实践总结前言 之前做不过不少关于地图交互的产品系统,目前国内主流的地图应用 SDK 只有几家:高德、百度和腾讯。所以个人觉得在 PC ...
    99+
    2024-04-02
  • 【Uniapp】高德地图的接入、定位、自定义标点与信息窗体使用
    一、前言 因为公司的业务需求,需要实现一个接入高德地图的数据大屏,并根据坐标实现地图标点渲染,自定义信息窗体,点击定位等功能。查阅高德地图官方文档时发现使用的是原生 JavaScript ,且网上 uniapp 接入使用的教程较少,我自...
    99+
    2023-08-30
    uni-app 前端 html5 css 经验分享 个人开发 前端框架
  • 如何使用python画城市轮播地图
    这篇文章将为大家详细讲解有关如何使用python画城市轮播地图,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。这里是以其中5个省份的城市为例进行演示画图前准备在画图之前先导入相关的库from py...
    99+
    2023-06-15
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作