腾讯地图踩坑记之选点组件

最近遇到一个需求，h5页面用户新增地址的时候除了可以调起级联菜单弹窗进行选择也可以点击图标进入地图进行选择，如下图：

我们用的是腾讯地图，要使用腾讯地图功能首先要组册key完成验证，这个按照文档一步一步来就可以了，完成之后需要进行一些设置，就我这个选点组件而言就必须开启 WebServiceAPI，否则无法使用相应的地图功能。

腾讯地图选点组件，用起来还是挺方便的，使用方式有两种：一种是使用iframe内嵌调用；还有一种是通过<a>标签直接跳转一个新的地图页面。iframe嵌入不是很好用，于是选了第二种。通过页面跳转的方式调用该组件的时候，需要设置backurl参数，用户点击选中的位置点后，页面跳转至开发者指定的返回地址（backurl），并将位置信息添加到回跳地址（backurl）上，具体使用可查看文档。我是使用vue框架开发的，具体实现代码如下：

//1.<tempalte>中
<a :href="href" @click="toSelectAddress">
<img src="@/assets/images/address/ic_address_location.png" class="location-icon"></a>//<script>中
//2.在data中定义一个值用来存放跳转的href值
href: 'http://apis.map.qq.com/tools/locpicker?search=1&type=0&key=yourkey&referer=myapp'//3.点击事件处理 主要是获取当前页面的url 作为backUrl值然后拼接到href上
toSelectAddress() {let href = window.location.href;let urlArr = href.split('?');this.href = this.href + `&backurl=${urlArr[0]}`
}//4.进入地图页面显示是你当前地址附近，你也可以搜索，匹配的地址会显示在页面下方列表中，
//点击地址就可以回到backurl所指的页面，此时地址相关值会拼接到backurl上//5.解析携带地址信息的URL，获取信息，我是通过处理把地址信息转化成对象方便使用
//处理URL
let handleUrl = function(url) {let decodedUrl = decodeURI(url);let query = decodedUrl.split('?')[1];let queryObj = {};if (query) {let queryArr = query.split('&');queryArr.forEach(item=> {let itemArr = item.split('=');queryObj[itemArr[0]] = itemArr[1];})}console.log('处理url', queryObj)return queryObj;
}//到这里你已经获取到了用户经纬度 所选地址 所在城市等信息 如果你想获取更详细的信息 比如省、市、区、街道等等 可以通过腾讯地图逆地址解析来获取。 腾讯地图这个接口是跨域的，可以前端处理也可以让后端处理再返回数据，我是使用jquery通过JSONP的方式处理，代码如下
//逆解析腾讯地图获取到的地址 location参数是获取到的经纬度parseAddress(location) {let data = {　　　　　key: "yourkey",get_poi: '1',location,output: 'jsonp'　　}var url = `https://apis.map.qq.com/ws/geocoder/v1/`;let that = this;$.ajax({type: "get",dataType: 'jsonp',jsonp: "callback",jsonpCallback: "parseAddressSucc",url: url,data: data,success: function(res) {console.log('成功')const { address_component } = res.result;//复制一份数据const copyAddress = JSON.parse(JSON.stringify(that.address));copyAddress.province = address_component.province;copyAddress.city = address_component.city;copyAddress.area = address_component.district;copyAddress.address_details = address_component.street +  address_component.street_number;that.areas = [address_component.province, address_component.city , address_component.district];that.info = copyAddress;//业务处理console.log(res, '跨域数据')},error: function(err) {//业务处理console.log(err, '出错')}});

2.在一个后台管理项目也需要用到选点组件的功能，这时使用页面跳转的方式就不太合适了，于是选择iframe方式调用，src中的coord参数是设置地图的中心点，在这个点会显示一个marker。

<iframeid="myMap"width="100%"height="400px"frameborder=0:src="`https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=yourkey&referer=myapp&coord=${latLng}`"></iframe>window.addEventListener("message",function(event) {// 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息var loc = event.data;if (loc && loc.module == "locationPicker") {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'//获取了用户选择的地址信息}},false);

腾讯地图踩坑记之选点组件相关推荐

在百度地图中叠加CAD图及GIS数据展示踩坑记
前言在之前的几篇博客中分别介绍了在Cesium中实现与CAD的DWG图叠加显示分析 https://www.cnblogs.com/vjmap/p/16541751.html . 高德地图与CAD ...
android小程序_小程序踩坑记
小程序踩坑记希望这个文章能尽量记录下小程序的那些坑,避免开发者们浪费自己的生命来定位到底是自己代码导致的还是啥神秘的字节跳变原因. 前记小程序大多数坑是同一套代码在不同平台上表现不一致导致的,微信 ...
微信公众号服务器配置但没有回调,微信公众号 “服务器配置” 踩坑记
前言今天工作的时候,碰到一个极其无语的关于微信公众号的坑,为此,我语言攻击了腾讯的机器人客服.然而并没有卵用...万万没想到,我还是解决了这个问题,并记录下踩坑经历,希望能帮到一些朋友吧. 背景今 ...
python从入门到实践django看不懂_Python编程：从入门到实践踩坑记 Django
<>踩坑记 Django Django Python 19.1.1.5 模板new_topic 做完书上的步骤后,对主题添加页面经行测试,但是浏览器显示服务器异常. 个人采用的开发环境是 ...
东八区转为0时区_踩坑记 | Flink 天级别窗口中存在的时区问题
❝ 本系列每篇文章都是从一些实际的 case 出发,分析一些生产环境中经常会遇到的问题,抛砖引玉,以帮助小伙伴们解决一些实际问题.本文介绍 Flink 时间以及时区问题,分析了在天级别的窗口时会遇到的 ...
Spring @Transactional踩坑记
@Transactional踩坑记总述 Spring在1.2引入@Transactional注解, 该注解的引入使得我们可以简单地通过在方法或者类上添加@Transactional注解,实现事务 ...
服务器重新部署踩坑记
服务器重新部署踩坑记 Intro 之前的服务器是 Ubuntu 18.04 ,上周周末想升级一下服务器系统,从 18.04 升级到 20.04,结果升级升挂了... 后来 SSH 始终连不上,索性删除 ...
IdentityServer 部署踩坑记
IdentityServer 部署踩坑记 Intro 周末终于部署了 IdentityServer 以及 IdentityServerAdmin 项目,踩了几个坑,在此记录分享一下. 部署架构项目是 ...
windows container 踩坑记
windows container 踩坑记 Intro 我们有一些服务是 dotnet framework 的,不能直接跑在 docker linux container 下面,最近一直在折腾把它部署 ...

腾讯地图踩坑记之选点组件

腾讯地图踩坑记之选点组件相关推荐

最新文章

热门文章