浅析小程序中怎么引入高德地图（高德微信小程序定位）

浅析小程序中怎么引入高德地图（高德微信小程序定位）

小程序中怎么引入高德地图？本篇文章给大家介绍一下在微信小程序中使用高德地图的方法，希望对大家有所帮助！

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

获得高德地图用户Key

没有申请key需要先申请，进入高德开发平台 lbs.amap.com/ ， 在 开发指南 -> 获取key 中有详细操作步骤，在 控制台 -> 应用管理 -> 我的应用中可以查看我们创建的key。【相关学习推荐：小程序开发教程】

我们可以把key封装在起来，这样就不用每次都找了，在 lib文件夹下新建一个 config.js 文件

var config = { key: "你的key"}module.exports.config = config;-

在js里导入 高德的js和key就可以调用高德地图api了

var amapFile = require('../../lib/amap-wx.130.js'); //高德jsvar config = require('../../lib/config.js'); //引用我们的配置文件-

获得当前位置

创建高德地图实例并命名为myAmapFun

var key = config.config.key;var myAmapFun = new amapFile.AMapWX({ key: key});-

调用 getRegeo 方法

myAmapFun.getRegeo({ success: (data) => { //保存位置的描述信息（ longitude经度 latitude纬度 和位置信息 ） let textData = {}; textData.name = data[0].name; textData.desc = data[0].desc //将获取的信息保存 this.setData({ textData: textData, longitude: data[0].longitude, latitude: data[0].latitude, // 给该经度纬度加上icon做标记，并调节大小 markers: [{ latitude: data[0].latitude, longitude: data[0].longitude, height: 30, width: 35, iconPath: '../../imgs/locationIcon/site1.png' }] }) }, fail: function(info){ console.log("get Location fail"); } });-

我们可以看下输出成功的data，里面的信息我们根据自己的需要取

在wxml文件中将地图显示出来，这边设置的是宽度100%，高度400px, scale是地图的缩放比例

{{textData.name}} {{textData.desc}}-

红色的标记点就是markers的数据；蓝色的标记点是show-location="true"展示的，但是真机预览就没有了

获取附近的点,只取前十个

data: { # 当前位置经度 longitude: "", # 当前位置纬度 latitude: "", # 获取位置的标记信息 markers: [], # 获取位置的位置信息 poisdatas : [], # 简单展示信息使用的 textData: {}}-

调用高德地图的getPoiAround接口根据关键字获取附近信息

调用getPoiAround接口返回成功的结果

{{textData.name}} {{textData.distance}}m {{textData.desc}}-

makertap 激活showMarkerInfo展示标记点信息，changeMarkerColor改变标记点颜色

makertap(e) { var id = e.detail.markerId; this.showMarkerInfo(id); this.changeMarkerColor(id);},-

之前不是说poisdatas存放该点的位置信息嘛，我们拿到 id 就可以取出来存到textData里面显示了

// 展示标记点信息 showMarkerInfo(i) { const {poisdatas} = this.data; this.setData({ textData: { name: poisdatas[i].name, desc: poisdatas[i].address, distance: poisdatas[i].distance } }) },-

// 改变标记点颜色 changeMarkerColor(index) { let {markers} = this.data; for (var i = 0; i < markers.length; i++) { if (i == index) { markers[i].iconPath = "../../icon/keshan/orange.svg"; markers[i].callout.display = 'ALWAYS' } else { markers[i].iconPath = "../../icon/keshan/blue.svg"; markers[i].callout.display = 'BYCLICK' } } this.setData({ markers: markers }) },-

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。