您好,欢迎来到保捱科技网。
搜索
您的当前位置:首页微信小程序地图开发总结

微信小程序地图开发总结

来源:保捱科技网
微信⼩程序地图开发总结

  最近在做⼀个微信⼩程序地图插件,通过传⼊起始位置名称和经纬度信息,就可以跳转到路线规划插件页⾯中,在该页⾯中,可以根据起始位置查询⾃驾,公共交通,步⾏等⽅式的路线信息,并且在地图上显⽰路线信息,在这个过程中,⽤到了微信⼩程序的组件map和腾讯地图sdk,接下来主要对微信⼩程序的地图开发进⾏总结

⼀、微信⼩程序地图组件

  为了⽅便微信⼩程序使⽤地图的相关功能,微信⼩程序为我们提供了map组件,通过这个组件,我们可以很简单的引⼊地图,并且还可以进⾏个性化地图的开发

1、map组件

  微信⼩程序提供的地图组件,使⽤该组件只需要在wxml⽂件中加⼊下⾯的代码

  上⾯这个例⼦中,我们只是简单的为该组件传⼊经纬度信息,并且设置缩放级别,当然,map组件还包括以下⼀些常⽤的属性

属性longitudelatitudescalemarkerspolylineinclude-pointsenable-trafficbindregionchangebindpoitap

类型numbernumbernumberArray.Array.Array.booleaneventhandleeventhandle

说明中⼼经度中⼼纬度

缩放级别,取值范围为3-20标记点路线

缩放视野以包含所有给定的坐标点是否开启实时路况视野发⽣变化时触发点击地图poi点时触发

是否必填是是否否否否否否否

  其中,longitude和latitude这两个属性是必须填写的,如果没有填写,地图将⽆法正常显⽰,除了上⾯的属性之外,还有很多其它属性,其它属性请前往微信⼩程序官⽅⽂档进⾏查看

2、map组件常⽤的属性介绍

(1)longitude和latitude属性

  ⼀般来说,我们需要设置地图的中⼼经纬度地图才能够正常显⽰,如果我们传⼊的是起点经纬度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属性主要指定⼀系列坐标点,当我们设置了这些坐标点之后,将会从这些坐标点的第⼀个坐标点连线连到最后⼀个坐标点,当我们需要在地图上显⽰起点和终点之间的路线时,就可以⽤polyline属性进⾏设置

Page({ data: {

polyline: [{ points: [{

longitude: 113.3245211, latitude: 23.10229 }, {

longitude: 113.324520, latitude: 23.21229 }],

color:\"#FF0000DD\", width: 2,

dottedLine: true }]})

  关于polyline属性的具体属性介绍,可以查看微信⼩程序官⽅⽂档

3、地图相关的API

  为了更好的使⽤地图的功能,微信⼩程序也是为我们提供了关于操作地图的相关API

  (1)wx.createMapContext(string mapId, Object this)    创建map上下⽂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(Object object)    平移marker,带动画

  使⽤上⾯的这些API,可以⽅便我们对map组件进⾏⼀些操作,下⾯来看个简单的例⼦

  当点击获取位置时,我们可以通过相关的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  在进⾏地图开发的时候,我们经常需要使⽤内置软件,⾼德地图,腾讯地图这些进⾏导航,这个时候可以使⽤相关的位置服务API  (1)wx.openLocation(Object object)    使⽤微信内置地图查看位置  (2)wx.getLocation(Object object)    获取当前的地理位置、速度  (3)wx.chooseLocation(Object object)    打开地图选择位置  当我们指定⼀个终点位置,然后希望能够使⽤内置地图软件进⾏导航时,可以这样实现wx.openLocation({ latitude: dstLat, longitude: dstLng, name: '终点名称'}) 5、使⽤map组件的⼀些问题  map组件提供了很多地图的相关功能,但是使⽤map组件可能会遇到下⾯这些问题  (1)map组件及微信⼩程序的API⽆法提供路线规划,地址转换等功能   可以使⽤腾讯地图sdk,⾼德地图sdk,百度地图sdk等进⾏开发,⽐如腾讯位置服务为微信⼩程序提供了基础的标点能⼒、线和圆的绘制接⼝等地图组件和位置展⽰、地图选点等地图API位置服务能⼒⽀持,使得开发者可以⾃由地实现⾃⼰的微信⼩程序产品,通过使⽤这些服务,再配合map组件,可以开发出具有各种各样功能的地图  (2)map组件的层级问题    map组件的层级被设置为最⾼,不能通过z-index进⾏设置,因此使⽤map组件可能会遮住⼀些⽂字图⽚等内容,可以通过cover-view进⾏解决,将⽂字和图⽚内容嵌套在cover-view中,但是cover-view只能嵌套cover-view和cover-image ⼆、在微信⼩程序中使⽤腾讯地图服务  虽然map组件使我们可以很⽅便的使⽤地图,但是map组件只提供了最基本的地图显⽰功能,同时,微信⼩程序提供的关于地图的API也只是提供了⼀些简单的功能,在实际中⽆法满⾜我们的各种需求,如果需要使⽤到路线规划,距离计算等功能,我们可以在微信⼩程序中接⼊腾讯地图,⾼德地图,百度地图等服务,再结合map组件,去实现我们需要的功能  下⾯以腾讯地图为例来介绍如何在微信⼩程序中使⽤腾讯地图服务1、密钥的申请以及域名的设置  在微信⼩程序中使⽤腾讯地图服务⼤致需要进⾏如下⼏个过程:  (1)申请开发者密钥        这⾥需要填写Key的名称,名称可以根据实际项⽬应⽤来命名,申请成功后,会⽣成⼀串开发者密钥  (2)开通webserviceAPI服务    a、点击右上⾓的控制台    b、选择key管理

    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获取路线,direction接⼝可以提供驾车、骑⾏、步⾏、公交等路线规划功能  direction接⼝传⼊的参数如下  (1)mode

    String,路线规划选择,可选值:'driving'(驾车)、'walking'(步⾏)、'bicycling'(骑⾏)、'transit'(公交),默认:'driving'  (2)from

    String格式:lat<纬度>,lng<经度>(例:from: '39.984060,116.307520')

    Object格式:{latitude: 纬度,longitude: 经度}(例:from: { latitude: 39.984060,longitude: 116.307520})  (3)to

    String格式:lat<纬度>,lng<经度>(例:location: '39.984060,116.307520')

    Object格式:{latitude: 纬度,longitude: 经度}(例:to: { latitude: 39.984060,longitude: 116.307520})  下⾯给⼀个根据起点和终点实现路线规划的例⼦

longitude=\"{{longitude}}\" latitude=\"{{latitude}}\" scale='16' polyline=\"{{polyline}}\" show-location>

// 引⼊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); } }); }})

  腾讯地图服务还提供了距离计算等其它功能,具体功能可以查看腾讯地图服务官⽅⽂档

  刚开始接触微信⼩程序,还有很多东西需要学习,⼤家⼀起交流学习呀

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- baoaiwan.cn 版权所有 赣ICP备2024042794号-3

违法及侵权请联系:TEL:199 18 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务