商务服务
vue H5使用百度地图,高德地图,腾讯地图,企业微信js-sdk分享一些经验以及遇到的问题
2024-12-01 07:34
vue H5使用百度地图,高德地图,腾讯地图,企业微信js-sdk分享一些经验以及遇到的问题 地图

  最近设计H5业务需求需要实现类似钉钉一样打卡获取当前定位得功能。反复研究了各大官网地图,这里分享一些经验,和遇到得问题。

vue H5使用百度地图,高德地图,腾讯地图,企业微信js-sdk分享一些经验以及遇到的问题

首先是高德地图api,都说高德地图获取到得定位比较准确,但是在使用高德地图api的时候,发现高德地图现在通过官网提供的"AMap.Geolocation",插件根本获取不到精准定位。获取到的经纬度也是有偏差的,后来查阅很多资料才看到,现在的高德一个办法根本获取不到详细信息,还需要再调用别的方法。(有兴趣的小伙伴可以自己研究)

这里是高德地图我写的获取当前位置的方法。如果只是获取到当前城市的经纬度的话,这个是可以直接使用的。

温馨提醒

1.记得再mounted里面去调用getLocation()方法

2.谷歌浏览器打开会报错,使用edge可以

3.使用本地路径是可以查看的。

使用地图的基本步骤就不说了,申请key去各大官网平台申请对应的key

我这里是用vue2写的

首先在html中引入cdn 记得要放在script 标签最前面。

 

 

这里是edge显示的返回结果

vue H5使用百度地图,高德地图,腾讯地图,企业微信js-sdk分享一些经验以及遇到的问题

 因为这个获取不到详细定位,又研究了一下百度地图的api,这里分享一下使用百度地图api 的时候遇到的一些问题。百度地图是可以获取到详细街道的,但是有局限,在浏览器上获取定位是不准确的,需要使用测试域名 跑到服务上,从手机端去看,但是有浏览器限制,在uc,夸克,百度app上可以获取到精确定位,苹果自带的safari 和部分安卓自带的浏览器仍然是获取不到的。

这里也上一下代码,小伙伴们根据需求合理使用、

首先也是引入cdn

 

代码片段,百度地图三种获取当前定位的方法

 

这里是打印结果。在谷歌上只显示一种ip定位的结果,当然也是有误差的结果

vue H5使用百度地图,高德地图,腾讯地图,企业微信js-sdk分享一些经验以及遇到的问题

 下面是edge的打印结果,可以看到在pc浏览器上三种方法都打印出来了。但是这里显示的是有偏差的结果。

vue H5使用百度地图,高德地图,腾讯地图,企业微信js-sdk分享一些经验以及遇到的问题

 这里是详细信息,可以看到,浏览器定位跟开启sdk定位获取到的位置是一样的。但是同一个地址,ip定位和浏览器,sdk都有误差。 

vue H5使用百度地图,高德地图,腾讯地图,企业微信js-sdk分享一些经验以及遇到的问题

百度地图的详细信息是出来了,但是在pc端仍然是有问题的。但是使用测试地址发布在移动端通过浏览器和sdk是可以获取当详细地址并且能展现出来的,这里我因为用的是本地,就没办法给发打印结果了。但是上面也说了。他是在部分浏览器上才可以打印出来结果,获取详细信息的。

上面高德和百度都有各自的缺陷,百度虽然获取到了,但是不符合业务需求,所以研究资料之后,我最后去看了,微信js-sdk ,在vue中调用微信的sdk 获取位置。最后把功能实现了。分享一下成功的办法吧。因为我使用的是vue的框架 

首先在vue 中下载js-sdk 的node

1. npm i weixin-js-sdk 引入js-sdk

2.引入之后根据微信开发平台,请求后端接口获取参数。

vue H5使用百度地图,高德地图,腾讯地图,企业微信js-sdk分享一些经验以及遇到的问题

3.调用wx-sdk方法。 使用wx-getLocation

4.获取到经纬度,然后根据腾讯地图cdn逆编码转换成详细地址。

代码如下

 

记得还是在html中引入腾讯地图的cdn

 

  我们的项目一个是在企业微信,一个是在小程序上线的,所以我还特地看了一下企业微信的文档,跟微信公众号是一样的方法。就不多说了。但是如果小伙伴们,在企业微信或者微信公众号测试得时候,如果碰到报错invalid url domain得问题,记得看一下企业微信或者公众号有没有配置你本地得接口域名。

最后,因为没有权限问题,成功得截图没有办法展现给大家,回头我会再补一下成功得图。

    以上就是本篇文章【vue H5使用百度地图,高德地图,腾讯地图,企业微信js-sdk分享一些经验以及遇到的问题】的全部内容了,欢迎阅览 ! 文章地址:http://fabua.ksxb.net/news/3162.html 
     文章      相关文章      动态      同类文章      热门文章      栏目首页      网站地图      返回首页 海之东岸资讯移动站 http://fabua.ksxb.net/mobile/ , 查看更多   
最新文章
PICO启动“全民优化师”活动,征集VR游戏性能优化方案
创作期截至4月16日,评选期则是4月22日至5月9日(映维网Nweon 2025年03月31日)PICO正在举行名为“全民优化师”的活动,邀请你
TOSHIBA代理商东芝手机「TOSHIBA代理商」
TOSHIBA东芝半导体公司,在国际市场上盛名远扬,家喻户晓。在日本之外,东芝拥有100多家子公司和协作公司的庞大全球网络,仅海外
互传手机互传换机助手手机互传「互传手机互传换机助手」
互传手机互传换机助手,一般又称互传换机助手app。互传换机助手app是一款很受网友好评的手机换机工具。可以实现手机之间数据批量
噬心工具箱手机工具箱「噬心工具箱」
噬心工具箱这是一款方便好用的手机工具箱应用,用户可以使用软件轻松处理图片,超多使用功能,让用户生活更方便。噬心工具箱app
儋州清明假期旅游迎来热潮,民俗体验趣味十足
南海网4月6日消息(记者赵航)花落日渐暖,风起正清明,今年清明假期,踏青赏花趣味十足。4月5日,“福暖春日,泉享安康”温泉美
【教程】全民K歌,用手机唱卡拉OK,朋友一起听!手机k歌「【教程】全民K歌,用手机唱卡拉OK,朋友一起听!」
用手机软件来唱卡拉OK,我知道的有两个软件推荐给您,全民K歌和唱吧。两个软件功能都很强,以前年轻人似乎用唱吧的多一些,现在
繁荣“入境游”,“游”出“日常感”是关键
原标题:繁荣“入境游”,“游”出“日常感”是关键年初至今,我国入境游市场持续复苏,到清明节期间迎来小高峰。数据显示,清明
苹果iPhone14和13对比区别是什么 苹果美版值得买吗?手机壳多少钱「苹果iPhone14和13对比区别是什么 苹果美版值得买吗?」
处理器、屏幕、摄像头、内存等不同处理器相同:iPhone14的处理器没有变化,还是iPhone13 Pro上的满血版A15 仿生芯片,只有iPhone
两个人在线观看免费完整版日本手机在线播放「两个人在线观看免费完整版日本」
格式“武神主宰08集”是武神一部出色的武侠古装影片,充斥着大量精彩的主宰空手道、木棉三绝和剑术招式的武神视觉盛宴。它是主宰
北京:“以花为媒”培育新消费
  4月的北京,繁花似锦装点千年古都,满城春色中涌动着勃勃生机。  北京玉渊潭公园樱花绽放,吸引游客慕名赏花;元大都城垣