微信小程序地图开发,小程序地图开发,点赞收藏的文章,值得细看

网络营销 06-09 15:40:20
====================================
###【承-接-小-程-序-开-发,咨-询-请-联-系-站-长】###
====================================

一、微信小程序地图组件

为了方便微信小程序使用地图的相关功能,微信小程序为我们提供了一个地图组件。通过这个组件,我们可以简单的介绍地图,开发个性化地图。

1.地图组件

微信小程序提供的地图组件。要使用该组件,只需在wxml文件中添加以下代码。

在上面的例子中,我们简单地为组件传递了纬度和经度信息,并设置了缩放级别。当然,地图组件还包括以下常见属性

需要类型描述。经度数字中心经度是纬度数字中心纬度是刻度数字缩放级别。值的范围是3-20。没有标记阵列。没有标记点。没有polylineArray。没有路线。没有包含点数组。缩放视野以包含所有给定的坐标点。没有enable-trafficboolean。开启实时路况。没有bindregionchangeeventhandle。视野改变时触发。没有bindpoitapeventhandle。单击地图上的poi点时触发。不

其中,经度和纬度是必须填写的两个属性。如果没有填写,地图将无法正常显示。除了以上属性,还有很多其他属性。其他属性请查看微信小程序官方文档。

2.地图组件的公共属性介绍

(1)经度和纬度属性

一般来说,我们需要设置地图的中心经纬度才能正常显示。如果我们传入起始经纬度srcLat和srcLng,以及终止经纬度dstLat和dstLng,如果我们想得到它们的中心坐标,可以通过下面的计算得到:

centerLat=(srcLat dstLat)/2

center ng=(srcLng dst LNG)/2

通过下面的简单计算,可以设置地图的中心经纬度。

(2)标记属性

很多情况下,我们经常需要在地图上添加一些标记。例如,我们希望插件中指定的起点和终点由自定义图标表示,然后我们可以使用markers属性。

(3)折线属性

折线属性主要指定一系列坐标点。当我们设置这些坐标点时,这些坐标点的第一个坐标点将连接到最后一个坐标点。当我们需要在地图上显示起点和终点之间的路线时,我们可以使用折线属性来设置它。

折线属性的具体属性介绍,可以查看微信小程序官方文档。

3.与地图相关的API

为了更好的利用地图的功能,微信小程序还为我们提供了关于操作地图的相关API。

(1)wx.createMapContext(字符串mapId,对象this)

创建MapContext MapContext对象

(2)map context . getcenterlocation(Object对象)

获取当前地图中心的经纬度。

(3)MapContext.getRegion(对象对象)

获取当前地图的视野

(4)MapContext.getScale(对象对象)

获取当前地图的缩放级别

(5)MapContext.includePoints(对象对象)

缩放视野以显示所有纬度和经度

(6)MapContext.moveToLocation()

将地图中心移动到当前锚点

(7)MapContext.translateMarker(对象对象)

带动画的声相标记

使用上面的这些API可以方便我们操作地图组件。让我们看一个简单的例子。

当点击获取位置时,我们可以通过相关的API获取当前的中心位置。

4.使用与位置服务相关的API。

(1)wx.openLocation(Object对象)

使用微信内置地图查看位置。

(2)wx.getLocation(Object对象)

获取当前的地理位置、速度

(3)wx.chooseLocation(Object对象)

打开地图选择一个位置。

当我们指定一个目的地位置,然后希望能够使用内置的地图软件导航时,就可以做到这一点。

5.地图组件使用中的几个问题

地图组件提供了许多与地图相关的功能,但在使用地图组件时可能会遇到以下问题。

(1)1)地图组件和微信小程序的API无法提供路线规划、地址翻译等功能。

(2)地图组件的层次结构

地图组件的级别被设置为最高级别,这不能由z-index设置。因此,使用地图组件可能会模糊一些文本、图片和其他内容,这可以通过covering-view来解决。文本和图片内容可以嵌套在封面视图中,但封面视图只能嵌套封面视图和封面图像。

1.申请密钥和设置域名

(1)申请开发者密钥

img src="https://p26.toutiaoimg.com/large/pgc-image/06024b0dbff9414e9023f1e61ffab57e" />

这里需要填写Key的名称,名称可以根据实际项目应用来命名,申请成功后,会生成一串开发者密钥

(2)开通webserviceAPI服务

a、点击右上角的控制台

b、选择key管理

c、进入设置,勾选webserviceAPI,点击保存

(3)域名的配置

在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com

(4)下载微信小程序JavaScriptSDK

2、实现路线规划

下面举一个简单的小例子,给定起点和终点经纬度,计算出起点和终点之间的路线

首先,需要引入我们刚才下载的JavaScriptSDK

进行API核心类的实例化

接着,我们需要通过调用路线规划的接口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})

下面给一个根据起点和终点实现路线规划的例子

相关问答:开发微信小程序引入百度地图出现app服务被禁用怎么解决

你说的这种情况,很有可能是接口没有做好造成的。

在小程序中引入地图功能,无论是引入哪个地图服务商,都需要拿到接口的权限才可以,所以你说的这种情况,很可能是接口出了问题。如果方便的话,可以把情况截图发我看看,我没准可以帮到你。

相关问答:如何开发一个百度小程序?

搜索“智能小程序”,打开官网,查看开发者文档

链接如下:

https://smartprogram.baidu.com/docs/develop/tutorial/codedir/

以下是关于百度智能小程序的常见问题解答:

1、个人可以注册百度小程序吗?

目前仅面向企业、政府、媒体及其它组织等非个人主体开放申请,个人开发者暂时无法申请。

2、百度智能小程序可以添加到桌面吗?

安卓手机可以添加到桌面,苹果的不行。

3、百度智能小程序可以转发微信吗?

可以,可以转发微信好友、微信群,不过打开时还是需要跳转到百度。

4、百度智能小程序可以转发朋友圈吗?

可以,可以转发微信朋友圈,不过打开时还是需要跳转到百度。5、百度小程序5、有哪些入口?

目前是百度APP内入口:首页下拉、百度搜索入口、百度app-个人中心、百度信息流、百家号文章页、二维码

后续将会开放百度APP外入口:百度贴吧、百度云盘、百度地图等百度系产品

更多百度智能小程序入口正在研发中.....

6、百度智能小程序申请/注册教程

程序社公号 回复“注册”即可了解

7、百度小程序名字怎么取?

小程序名称长度2-10个汉字,一个汉字等于2个字符

8、百度智能小程序名称是唯一的吗?

是唯一的

9、注册百度智能小程序审核需要多久?

审核预计需要2个工作日左右

10、百度智能小程序名字可以修改吗?

小程序发布前,可修改两次名称。发布后一年内修改2次名称

11、百度智能小程序头像可以修改吗?

一个月内可申请修改5次

12、百度智能小程序简介可以修改吗?

一个月内可申请修改5次

13、百度智能小程序服务范围可以修改吗?

一个月内可申请修改3次

14、百度智能小程序管理员可绑定的项目成员数量?

未认证、未发布:30

已认证、未发布:60

已认证、已发布:90

15、一个开发者账号可以注册几个百度智能小程序?

目前一个账号可以注册5个百度智能小程序;

16、企业/个体工商户注册百度智能小程序所需资料?

(1)企业名称、(2)营业执照注册号/统一社会信用代码、(3)营业执照原件照片、(4)企业类型(企业、个人个体工商户)

17、百度智能小程序支付方式有哪些?

聚合了主流的百度钱包、微信、支付宝、网银等多种支付方式,

官方文档推荐的是接百度收银台 接入流程

智能小程序页面 ----> 百度收银台(订单确认页) ----> 百度收银台(收银台页)

详情请见百度电商开放平台-百度收银台:http://dianshang.baidu.com/platform/doclist/index.html#!/doc/nuomiplus_3_business/mini_program_cashier/product_intro.md

18、目前已有天店通微信小程序可以和百度小程序数据共通吗?

可以。如已开通订购天店通微信小程序模板,开通百度小程序可不用再单独上传内容进行制作,可直接用已有微信小程序的。(内容信息互通、会员信息不通)

19、百度小程序认证收费么,多少钱

目前不收费

20、百度小程序认证方式

对公打款形式

希望对你有帮助!