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=""
}

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

(0)

相关推荐

  • vue使用高德地图根据坐标定位点的实现代码

    前言 项目中需要根据坐标定位,将自己的实现过程写下来,废话不多说,上代码 正文 <script> var map,marker; export default { data(){ return{ arriveCoor:[108.947025,34.2613255],//坐标点 arrive:"",//位置信息 } }, mounted() { mapDraw(this.arriveCoor), mapCoor(this.arriveCoor) }, methods:{ ma

  • vue百度地图 + 定位的详解

    vue 百度地图 + 定位 前提需要自己有百度的密钥,如没有可以去百度地图申请 一.在主目录下的index.html引入js,例如:   二.在webpack.base.conf.js配置文件中配置BMap,在module.exports 中与entry平级,例如: 三.在项目中引入BMap: 四.代码: <template> <div class="home"> <div id="allmap" class="allmap&

  • vue+高德地图实现地图搜索及点击定位操作

    首先需要在index.html中引入高德地图的js链接,key需要换成你自己的key 最近有个需求是实现一个使用地图搜索定位的功能,在网上参考了下其他的文章,感觉不是很完善,自己整理了一下,可以实现点击定位,搜索列表定位等功能,可能有些地方是多余的,需要的自己看着改下 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=你的key"></

  • Vue使用百度地图实现城市定位

    本文实例为大家分享了Vue使用百度地图实现城市定位的具体代码,供大家参考,具体内容如下 Vue项目运行环境:Vue 2.0,Vue Cli 3.0 步骤一:登录 百度地图开放平台 在 控制台---->应用管理---->我的应用 下面创建一个应用. 目的是获取 ak 步骤二:在public文件夹的index.html文件中 导入百度地图,拼上你的ak 步骤三:在项目的根目录中创建vue.config.js文件 如果有vue.config.js文件的话,直接添加以下代码即可. vue.config

  • vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

    1.首先在index.html引入高德地图的秘钥.如图: 注意:如果使用关键字搜索功能要加上 plugin=AMap.Autocomplete,AMap.PlaceSearch,否则功能无法使用,并会报错 2. 定位功能,代码如下: const map = new AMap.Map(this.$refs.container, { resizeEnable: true }) // 创建Map实例 const options = { 'showButton': true, // 是否显示定位按钮 '

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

    本文实例为大家分享了Vue使用高德地图实现城市定位的具体代码,供大家参考,具体内容如下 一 前端选择框点击跳转至地图选址页面 <van-row class="address_item"> <van-col span="6" class="item-title">收货地址</van-col> <van-col span="18"> <p class="item&qu

  • vue使用高德地图实现实时定位天气预报功能

    目录 JSAPI 的加载 使用 JSAPI Loader (推荐) JSAPI key和安全密钥的使用 项目代码步骤: 1.在index.html页面body中添加密钥 2.安装@amap/amap-jsapi-loader 使用 3.实现代码: 实现效果: 需求:根据定位功能,使用高德地图实现定位当前城市的天气预报功能. JSAPI 的加载 JS API 2.0 版本提供了两种方案引入地图 JSAPI: 1. 使用官网提供的 JSAPI Loader 进行加载: 2. 以常规 JavaScri

  • Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)

    最近项目要使用高德地图写了一个实时公交的应用,这边分享一个小应用主要熟悉下高德地图在vue中的使用,常用api,vue的常用指令 先给大家看下页面效果: 如果有需要源码的童鞋请移步我的github地址 vue搭建实时公交 (欢迎star) 实现思路 在vue项目中导入高德地图 具体功能调用相应高德js APi 1.在vue项目中导入高德地图 1.修改webpac.base.conf.js文件 externals: { 'AMap': 'AMap' } 2.引入sdk 引入有两种方式,一种是在in

  • vue 使用高德地图vue-amap组件过程解析

    这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先 npm install -S vue-amap 然后在 main.js import VueAMap from 'vue-amap'; //注意不要和 AMap原始名称覆盖 Vue.use(VueAMap); // 初始化vue-amap VueAMap.initAMapApiLoader({ // 高德的key key: '

  • vue使用高德地图点击下钻上浮效果的实现思路

    这里给使用高德地图下钻提供一个思路 先讲下我的思路,高德地图api有一个地图绘制区域,你只要提供区码,就可以绘制该区域.以浙江省为例,我一开给浙江省的区码就可以绘制出浙江省的区域,接下来我要进入杭州市,当我点击杭州市的时候我先清空地图上的覆盖层并且能获取到'杭州市'这个字符串,通过对比这个字符串我就可以给出杭州市的区码,最后绘制出杭州市的覆盖层. 接下来看代码: 第一步 绘制地图: //创建地图 this.map = new AMap.Map("container", { cursor

  • Vue接入高德地图的完整实例

    目录 前言 参考资料 Vue接入高德地图 引用 使用 实现点击按钮缩放功能 地图放大 地图缩小 测量距离 测量面积 行政区划查询渲染 关键字搜索 鼠标绘制区域 总结 前言 Vue 使用高德地图,实现缩放,鼠标绘制,测距.测面积.行政区域范围绘制.关键词查询等操作. 参考资料 高德地图API官网:https://lbs.amap.com/ 高德地图2.0参考手册:https://lbs.amap.com/api/jsapi-v2/documentation#pixel 高德地图2.0示例代码:ht

  • vue.js高德地图实现热点图代码实例

    1.在index.html引入高德地图JSAPI <script src="https://webapi.amap.com/maps?v=1.3&key=xxx"></script> 2.地图dom <div class="map-container"> <div id="container" style="width:100%;height:500px"></di

  • Vue开发高德地图应用的最佳实践

    目录 前言 异步加载 封装组件 使用组件 自定义界面最佳实践 总结 前言 之前做不过不少关于地图交互的产品系统,目前国内主流的地图应用 SDK 只有几家:高德.百度和腾讯.所以个人觉得在 PC 应用上高德地图开发相对好一些,至少体验起来没有很明显的坑.这篇文章算是总结下开发地图应用总结吧. 异步加载 因为使用 js sdk 应用,脚本文件本身体积很大,所以要注意下加载的白屏时间,解决用户体验问题,目前绝大部分产品应用都是 SPA 单页面应用系统,所以我封装一个异步加载的方法: const loa

随机推荐