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

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

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

我们可以封装密钥，这样我们就不必每次都寻找它，并在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”中，但真机预览已经消失。

获得附近的积分，只有前十名

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

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

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

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

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

• 如何实现小程序发送服务通知（小程序如何主动向用户发送通知）
• 如何获取小程序的unionid（如何获取小程序的页面路径）
• 生成海报的示例小程序（Java后端）（微信小程序生成海报演示）
• 什么是小程序？ 有哪些功能？（什么是小程序？有哪些功能？）
• 介绍如何用小程序生成参数二维码（二维码+小程序参数）

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