VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动

浅析如何将高德地图引入小程序(如何在小程序中调用地图)

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

如何将高德地图引入小程序?本文为您介绍在微信小程序中使用高德地图的方法,希望对您有所帮助!

浅析如何将高德地图引入小程序(如何在小程序中调用地图)

获得高德地图密钥的用户需要首先申请进入lbs.amap.com/,高德开发平台。开发指南-》获取密钥中有详细的操作步骤。您可以在控制台-》应用程序管理-》我的应用程序中查看我们创建的密钥。【相关学习推荐:小程序开发教程】

1.png

我们可以封装密钥,这样我们就不必每次都寻找它,并在lib文件夹下创建一个新的config.js文件。

var config = { key:“your key“} module . exports . config = config;您可以通过将高德的js和key导入js来调用高德地图api。

var amapFile = require(& # 39;../../lib/AMAP -wx . 130 . js & # 39;);//高德jsvar config = require(& # 39;../../lib/config . js & # 39;);//引用我们的配置文件以获取当前位置,创建一个高德地图实例并将其命名为myAmapFun。

var key = config . config . key;var myAmapFun =新amapFile。AMapWX({ key:key });调用getRegeo方法

myamapfun . get regeo({ success:(data)=》{//保存位置的描述信息(经度、纬度和位置信息)let text data = { };textData.name = data

在wxml文件中显示地图。这里的宽度是100%,高度是400像素,比例是地图的比例。

{ { text data . name } } { { text data . desc } }红色标记点是标记的数据;蓝色标记显示在show -location =“true”中,但真机预览已经消失。

3.png

获得附近的积分,只有前十名4.gif

数据:{#当前位置的经度:““,#当前位置的纬度:““,#获取位置的标记信息:

6.png

Bindmarkertap激活makertap图标以单击事件,并更改map_text中的内容。

{{textdata。name}} {{textdata。距离}} m {{textdata。desc}} MakerTap激活showMarkerInfo以显示标记信息,changeMarkerColor更改标记颜色。

maker tap(e){ var id = e . detail . marker id;this . showmarkerinfo(id);this . changemarkercolor(id);},之前不是说poisdatas存储这个点的位置信息吗?我们可以在获得id后将其取出并存储在textData中。

//显示标记信息Show marker info(I){ const { pois data } = this . data;this . setdata({ text data:{ name:pois datas

更多编程相关知识请访问:编程入门!!

以上是如何将高德地图引入小程序的详细内容。更多资讯请关注主机参考其他相关文章!

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:浅析如何将高德地图引入小程序(如何在小程序中调用地图) https://zhujicankao.com/105935.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 浅析如何将高德地图引入小程序(如何在小程序中调用地图)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!