h5端地图导航

h5端地图导航

微信扫码打开是腾讯地图,其他扫码打开是百度地图

首先这里的经纬度坐标和地点是从后台传过来的,后台是使用百度地图定位的,这里在腾讯地图里显示时就需要进行转换,具体知识点请参考这篇文章:JS不同地图坐标系经纬度转换(天地图、高德地图、百度地图、腾讯地图)_天地图坐标和高德地图坐标系-CSDN博客

( 我的理解是有三种坐标标准,不同的坐标标准对应的坐标精度也会不同,所以要根据标准进行转换,以保证精准)

这里我会介绍两种方法,方法一是通过iframe直接链接引入,方法二是利用微信内置方法wx.openLocation唤起地图,这里第二种需要申请腾讯地图的key值,

建议使用方法二,因为方法一是在自己的域名下打开地图,这里跳百度地图软件会有一些问题

使用方法二直接在点击事件里面写就可以,不用单独新建一个页面,否则百度地图返回的时候会有一个空白页,此处是因为想显示的更清晰所以才放一个新页面展示。

方法一:参考的是这位博主的文章WEB端唤起 百度|腾讯|高德 地图一键导航功能_点击网页唤起百度地图并导航-CSDN博客

方法二:

此方法需申请腾讯地图key值,否则会出现地图显示不出来,并报“Map key not configured”这个错。

申请网址:腾讯位置服务 - 立足生态,连接未来

步骤:① 先登录/注册,② 点击右上角【控制台】,③ 点击左侧【应用管理】下的【我的应用】,④ 创建应用,创建key值,⑤ 把key值粘进项目的下图中的位置

相关推荐