API

【代码分享】在mugeda里使用高德地图或腾讯地图以及导航的方法

 
方法一,使用默认的木疙瘩地图行为:
 
比如从地图上获得的这些信息
奥林匹克森林公园
北京市朝阳区科荟路33号
 
需要分别填到两个输入框里。

奥森.png


地图.png


地图结果.png

 
 
 
 
方法二,使用跳转链接,直接跳到网页链接:

一般而言,地图服务都会有一个电脑版本和手机版,
比如高德电脑版本是:https://ditu.amap.com,可以搜索到高德手机版网址是:https://m.amap.com
 
现在需要做的就是直接用手机的默认浏览器去访问高德地图的手机版本网址,搜索你的结果,比如说“中关村”。
得到结果后,手机上浏览器的网址会变
成 https://m.amap.com/search/mapview/keywords=%E4%B8%AD%E5%85%B3%E6%9D%91
 
现在需要把这个网址复制一下,填到mugeda里的跳转链接行为里

图片.png

 
最后一步,保存,发布作品,完成。效果就是用户点击这个行为,会跳转到网页链接。
 
编辑链接:
https://www.mugeda.com/animation/edit/4e3a0bb4
最终效果:
https://e.u.mgd5.com/c/ams9/3whw/index.html
 
 
 
方法三,使用代码:
这个方法会调用微信自带的地图功能,效果最为流畅, 大概效果如下图。

640.gif

 
 
使用此方法打开地图功能后,可以调用手机上其他的地图app,比如苹果地图,高德地图等,同时关闭地图功能可以回到H5之前的页面,上边的方法二不能回到H5之前的页面,只能回到H5开头。
 

这是公众号文章链接,可以直接打开看描述:  https://mp.weixin.qq.com/s/NIiJRkGvqkixw2jJjcQQVg

你可以在以下公众号回复“地图导航预览效果”,得到预览链接,在手机上测试效果。

扫码.png

 

2 个评论

https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.openLocation.html 这个是微信的官方文档,可以去查询需要的代码添加到木疙瘩里,如果不太会用,可以打开上边评论里的链接获取现成的demo
如何给木疙瘩H5添加导航定位功能 https://mp.weixin.qq.com/s/NIiJRkGvqkixw2jJjcQQVg

要回复文章请先登录注册