最近,我正在研究微信小程序地图插件。通过输入起始位置的名称以及纬度和经度信息,您可以跳至路线规划插件页面。在此页面中,您可以根据起始位置搜索自动驾驶和公共交通工具。 ,步行等,并在地图上显示路线信息。在此过程中,使用微信小程序组件图和腾讯图sdk。接下来,我们将主要总结微信小程序的地图开发
一、微信小程序地图组件
为了方便微信小程序使用与地图相关的功能,微信小程序为我们提供了地图组件。通过此组件,我们可以轻松地引入地图并开发个性化地图。
1、地图组件
微信小程序提供了地图组件。要使用此组件,只需要将以下代码添加到wxml文件中
在上面的示例中,我们仅传递了组件的纬度和经度信息,并设置了缩放级别。当然,地图组件还包括以下常用属性
属性
类型
说明
需要吗?
经度
号码
中心经度
是
纬度
号码
中心纬度
是
规模
号码
缩放级别,值范围是3-20
否
标记
数组。
标记点
否
折线
数组。
路线
否
包含点
数组。
缩放视野以包括所有给定的坐标点
否
启用流量
布尔值
是否启用实时路况
否
bindregionchange
事件句柄
视野改变时触发
否
bindpoitap
事件句柄
点击地图Poi点时触发
否
其中,必须填写经度和纬度这两个属性。如果未填写,则地图将无法正常显示。除了上述属性外,还有许多其他属性。有关其他属性,请转到微信小程序官方文档。查看
2、地图组件的常用属性简介
([1)经度和纬度属性
通常来说,我们需要设置地图的中心纬度和经度才能正常显示。如果我们传入起点和经度srcLat和srcLng,终点纬度和经度dstLat和dstLng,如果要获取中心坐标,则可以使用以下计算所得:
centerLat =(srcLat + dstLat)/ 2
centerLng =(srcLng + dstLng)/ 2
通过以下简单计算,您可以设置地图的中心纬度和经度
([2)markers属性
在许多情况下,我们经常需要在地图上添加一些标记。例如,我们希望可以通过自定义图标来表示插件中指定的起点和终点。此时,可以使用markers属性。
Page({ data: { markers: [{ iconPath: "/resources/start.png", id: 0, latitude: srcLat, longitude: srcLng, width: 50, height: 50 }, { iconPath: "/resources/end.png", id: 0, latitude: dstLat, longitude: dstLng, width: 50, height: 50 }]})
([3)polyline属性
折线属性主要指定一系列坐标点。当我们设置这些坐标点时,它们将从第一个坐标点连接到最后一个坐标点。当我们需要在地图上显示起点时当目的地与目的地之间的路线时,可以使用polyline属性进行设置
Page({ data: { polyline: [{ points: [{ longitude: 113.3245211, latitude: 23.10229 }, { longitude: 113.324520, latitude: 23.21229 }], color:"#FF0000DD", width: 2, dottedLine: true }]})
有关折线属性的具体介绍,请参阅微信小程序官方文件
3、与地图相关的API
为了更好地使用地图功能,微信小程序还为我们提供了有关操作地图的相关API
([1) wx.createMapContext(string mapId,Object this)
创建地图上下文MapContext对象
([2)MapContext.getCenterLocation(Object object)
获取当前地图中心的纬度和经度
([3)MapContext.getRegion(Object object)
获取当前地图的视野
([4)MapContext.getScale(Object object)
获取当前地图的缩放级别
([5)MapContext.includePoints(Object object)
缩放视场以显示所有纬度和经度
([6)MapContext.moveToLocation()
将地图中心移动到当前锚点
([7)MapContext.translateMarker(对象对象)
带有动画的平移标记
使用以上API可以帮助我们对地图组件执行一些操作。让我们看一个简单的例子
获取位置
当您单击获取位置时,我们可以通过相关的API获取当前的中心位置
Page({ onReady: function (e) { // 使用 wx.createMapContext 获取 map 上下文 this.mapCtx = wx.createMapContext('myMap') }, getCenterLocation: function () { this.mapCtx.getCenterLocation({ success: function(res){ console.log(res.longitude) console.log(res.latitude) } }) }})
4、使用位置相关的API
在开发地图时,我们经常需要使用内置软件,AutoNavi地图和腾讯地图进行导航。目前,我们可以使用相关的位置服务API
([1) wx.openLocation(Object object)
使用微信内置地图查看位置
([2)wx.getLocation(Object object)
获取当前地理位置和速度
([3)wx.chooseLocation(Object object)
打开地图并选择一个位置
当我们指定目标位置,然后希望能够使用内置的地图软件进行导航时,就可以实现
wx.openLocation({ latitude: dstLat, longitude: dstLng, name: '终点名称'})
5、使用地图组件时出现一些问题
地图组件提供了许多与地图相关的功能,但是在使用地图组件时可能会遇到以下问题
([1) map组件和微信小程序 API无法提供路线规划,地址转换和其他功能
您可以使用腾讯地图sdk,高德地图sdk,百度地图sdk等进行开发。例如,腾讯定位服务向微信小程序提供基本的标点功能,线和圆绘图界面以及其他地图组件和位置显示,地图。地图API定位服务功能支持(例如点选择)允许开发人员自由实现自己的微信小程序产品。通过使用这些服务并与地图组件配合,可以开发出具有各种功能的地图
([2)地图组件级别问题
地图组件的级别设置为最高级别,无法通过z-index设置。因此,使用地图组件可能会覆盖一些文本,图片等,可以通过封面视图解决,并且文本和图片内容可以嵌套在“封面视图”中,但是封面视图只能嵌套封面视图和封面图片
二、在微信小程序中使用腾讯地图服务
尽管地图组件使我们可以非常方便地使用地图,但是地图组件仅提供最基本的地图显示功能。同时,微信小程序提供的地图API仅提供一些简单功能。如果您需要使用路线规划,距离计算等功能,可以在微信小程序中访问腾讯地图,高德地图,百度地图和其他服务,然后结合地图组件以实现我们的必需功能
以下以腾讯地图为例,介绍如何在微信小程序中使用腾讯地图服务。
1、关键应用程序和域名设置
在微信小程序中使用腾讯地图服务通常需要以下过程:
([1)申请开发者密钥
在这里,您需要填写密钥的名称。该名称可以根据实际项目应用程序命名。应用成功后,将生成一串开发人员密钥
([2)打开webserviceAPI服务
a。点击右上角的控制台
b。选择密钥管理
c。输入设置,检查webserviceAPI,然后单击保存
([3)域名配置
以上两个步骤均在腾讯定位服务平台上执行。要配置域名,您还需要登录微信公共平台以配置域名
在开发小程序时,我们将使用自己的APPID进行开发。仅在配置了相关域名后,我们才能在请求时将请求发送到指定的域名。
在“设置”->“开发设置”中设置请求的合法域名,然后添加
([4)下载微信小程序 JavaScriptSDK
如果上述步骤完成,我们可以在微信小程序中使用腾讯地图服务,在微信小程序中创建一个新项目,编写APPID,请记住该APPID需要在微信公共平台上完成的域名,否则将报告错误
2、实现路线规划
下面是一个简单的小示例,给定起点和终点的纬度和经度,计算起点和终点之间的路线
首先,我们需要介绍刚刚下载的JavaScriptSDK
// 引入SDK核心类var QQMapWX = require('xxx/qqmap-wx.js');
API核心类的实例
// 实例化API核心类var qqmapsdk = new QQMapWX({ key: '开发密钥(key)' // 必填});
接下来,我们需要通过调用路线规划接口方向来获取路线。方向界面可以提供路线规划功能,例如驾驶,骑自行车,步行和公共交通。
在direction接口中传递的参数如下
([1) mode
字符串,路线计划选择,可选值:“行车”(行车),“步行”(行车),“自行车”(骑车),“公交”(公交车),默认值:“行车”
([2)来自
字符串格式:lat,lng(例如:来自:“ 39.984060,116.307520')
对象格式:{纬度:纬度,经度:经度}(例如:来自:{纬度:39.984060,经度:116.307520})
([3)to
字符串格式:lat,lng(示例:位置:'39.984060,116.307520')
对象格式:{纬度:纬度,经度:经度}(例如:至:{纬度:39.984060,经度:116.307520})
以下是基于起点和终点实现路线规划的示例
// 引入SDK核心类var QQMapWX = require('xxx/qqmap-wx.js'); // 实例化API核心类var qqmapsdk = new QQMapWX({ key: '开发密钥(key)' // 必填});Page({ data: { srcLat: '起点经度', srcLng: '起点纬度', dstLat: '终点经度', dstLng: '起点纬度', latitude: '', longitude: '' }, onLoad() { var _this = this; //调用距离计算接口 qqmapsdk.direction({ mode: 'driving',//可选值:'driving'(驾车)、'walking'(步行)、'bicycling'(骑行),不填默认:'driving',可不填 //from参数不填默认当前地址 from: { latitude: _this.data.srcLat, longitude: _this.data.srcLng }, to: { latitude: _this.data.dstLat, longitude: _this.data.dstLng }, success: function (res) { console.log(res); var ret = res; var coors = ret.result.routes[0].polyline, pl = []; //坐标解压(返回的点串坐标,通过前向差分进行压缩) var kr = 1000000; for (var i = 2; i < coors.length; i++) { coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr; } //将解压后的坐标放入点串数组pl中 for (var i = 0; i < coors.length; i += 2) { pl.push({ latitude: coors[i], longitude: coors[i + 1] }) } console.log(pl) //设置polyline属性,将路线显示出来,将解压坐标第一个数据作为起点 _this.setData({ latitude:pl[0].latitude, longitude:pl[0].longitude, polyline: [{ points: pl, color: '#FF0000DD', width: 4 }] }) }, fail: function (error) { console.error(error); }, complete: function (res) { console.log(res); } }); }})
腾讯地图服务还提供其他功能,例如距离计算。有关具体功能,请参阅腾讯地图服务的官方文件
我刚刚开始与微信小程序联系,仍然有很多东西要学习,让我们一起交流和学习