VUE 高德地图选取地址组件开发
高德地图文档地址
http://lbs.amap.com/api/lightmap/guide/picker/
结合步骤:
1.通过iframe内嵌引入高德地图组件
key就选你自己申请的key
<template>
<div>
<div id="iframe">
<iframe class="map-item" v-if="ismap" id="getAddress" @load="loadiframe"
src="https://m.amap.com/picker/?key=xxxxxxxxxxx"
style="width:100%; height:100%;position: absolute;z-index:22222;"></iframe>
</div>
</div>
</template>
2.监听高德组件load事件
当然在vue里面可以使用 @load="loadiframe" 进行监听
ps:onload :事件,就是选取地址之后,触发的一个事件。比如点击咖啡陪你,就会触发onload事件。
3.实现监听代码:
ps:高德地图通过 iframe 的 postmessage 向父组件传值,我们进行接收就可以。更详细的内容产考
https://segmentfault.com/a/1190000004512967
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") {
/ /实现业务代码
}
}.bind(this), false);
},
3.完整高德地图组件代码
<template>
<div>
<div id="iframe">
<iframe class="map-item" v-if="ismap" id="getAddress" @load="loadiframe"
src="https://m.amap.com/picker/?key=xxxxxxxxxxxxx"
style="width:100%; height:100%;position: absolute;z-index:22222;"></iframe>
</div>
</div>
</template>
<script>
export default {
props: ["ismap"],
data() {
return {
locationData: {}
}
},
created() {
},
methods: {
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") {
//业务代码
console.log(e):
}
}.bind(this), false);
},
}
}
</script>
<style>
.map-item {
position: fixed;
width: 100%;
height: 100%;
top: 0;
background: #fff;
z-index: 222;
}
</style>
VUE 高德地图选取地址组件开发的更多相关文章
- 高德地图模糊搜索地址(elementUI)
首先引入AMap: 1.在index.html引入AMap <script type="text/javascript" src="http://webapi.am ...
- 基于vue 2.X和高德地图的vue-amap组件获取经纬度
今天我就讲了一下怎么通过vue和高德地图开发的vue-amap组件来获取经纬度. 这是vue-amap的官网文档:https://elemefe.github.io/vue-amap/#/ 这是我的码 ...
- VUE 2.0 引入高德地图,自行封装组件
1. 高德地图官网 申请帐号, 申请相应(JavaScript API)的 Key 2. 在项目中引入, 这里和其他的引入不同的是 直接在 index.html, 不是在 main.js 引入, 博主 ...
- vue+vant ui+高德地图的选址组件
首先在index.html引入高德地图的js <script src="https://webapi.amap.com/maps?v=1.4.14&key=你的key" ...
- vue 高德地图之玩转周边
前言:在之前的博客中,有成功引入高德地图,这是以前的地址 vue 调用高德地图. 因为一些需求,需要使用到地图的周边功能. 完整的项目代码请查看 我的github 一 .先看要实现的结果,参考了链 ...
- Vue 高德地图 路径规划 画点
CDN 方式 <!--引入高德地图JSAPI --> <script src="//webapi.amap.com/maps?v=1.4.13&key=您申请的ke ...
- 【视频教学】如何利用高德地图IOS SDK进行开发?
Step1:使用IOS SDK可以做什么高德地图 iOS SDK 是一套基于 iOS 5.1.1 及以上版本的地图应用程序开发接口.通过该接口,用户可使用高德地图数据和服务轻松构建功能丰富.交互性强的 ...
- vue 高德地图
index.html <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119. ...
- js/vue 高德地图绘制驾车路线图
地图容器: // css要给此容器设置宽高 <div class="map_container"></div> 画图 data{ return { Clng ...
随机推荐
- SR-IOV虚拟机的MTU与物理网卡的MTU
在进行SR-IOV虚拟机MTU方面的测试时,出现如下情况: 1)物理网卡PF的MTU值是4000: root@compute-1:~# ip l|more1: lo: <LOOPBACK,UP, ...
- Javascript时间戳和日期时间的相互转换
跟后台对接的时候经常碰到时间格式的问题,有时返回的是时间戳,有时返回的是具体时间,需求又需要它们之间的转换,所以干脆把之前遇到过的情况都给记录下来,以供自己参考! 本文备注:(时间戳单位为毫秒ms,换 ...
- 用python一起来看流星雨
源代码如下(遇上篇烟花代码几乎一样,参数值稍微不一样): # -*- coding: utf-8 -*- # Nola import tkinter as tk from PIL import Ima ...
- shell中下载最新版本或指定版本的办法(Dockerfile 中通用)
VER=$(curl -s https://api.github.com/repos/v2ray/v2ray-core/releases/latest | grep tag_name | cut -d ...
- VSTO:使用C#开发Excel、Word【14】
操作workbooks集合可从Application对象的Workbooks属性中获取的Workbooks集合包含当前在应用程序中打开的Workbook对象的集合. 它还具有用于管理开放工作簿,创建新 ...
- springboot学习之构建简单项目搭建
概述 相信对于Java开发者而言,spring和springMvc两个框架一定不陌生,这两个框架需要我们手动配置的地方非常多,各种的xml文件,properties文件,构建一个项目还是挺复杂的,在这 ...
- 一、JAVA变量类型:①类变量与实例变量的异同点
在JAVA中,变量使用前必须声明,格式如下: int a; //单个变量声明 int b, c, d; //多个变量一起声明 int e = 1, f = 2, g = 3; //声明时同时赋值(初始 ...
- Full permutation
Full Permutation 全排列问题, 将1~n这n个整数按字典序排放 划分: 输出1开头的全排列 输出2开头的全排列 ...... 输出n开头的全排列 递归边界:当下标1 ~ n 位都已经填 ...
- kolla-ansible源码分析
一.kolla-ansible 源码的目录结构 kolla-ansible是从kolla项目分离出来的一个可交付的项目,kolla-ansible负责部署容器化的openstack各个服务和基础设施组 ...
- 洛谷p1067
题目https://www.luogu.org/problemnew/show/P1067 #include<iostream> #include<cstdio> #inclu ...