网站推广.NET

网站推广.NET

个人最爱:微信小程序地图开发摘要

来源:互联网

最近,我正在研究微信小程序地图插件。通过输入起始位置的名称以及纬度和经度信息,您可以跳至路线规划插件页面。在此页面中,您可以根据起始位置搜索自动驾驶和公共交通工具。 ,步行等,并在地图上显示路线信息。在此过程中,使用微信小程序组件图和腾讯图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})

以下是基于起点和终点实现路线规划的示例

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); } }); }})

腾讯地图服务还提供其他功能,例如距离计算。有关具体功能,请参阅腾讯地图服务的官方文件

我刚刚开始与微信小程序联系,仍然有很多东西要学习,让我们一起交流和学习