微信小程序-地图开发(微信小程序地图开发文档)

地图开发(一)

今天介绍的地图功能是小程序API里比较好玩的一个,所以我先试尝试了一下,而且这部分也比较容易被读者接收。那我们现在开始讲这部分的内容吧。

先来看看微信小程序地图的文档内容!

微信小程序-地图开发(微信小程序地图开发文档)

首先,跟着图片去查找一下地图的组件,我们可以看到有很多属性,额~一般人看到这些都会头晕。不过你认真阅读就会知道这些属性对应着什么,根据英文对应就能理解。看完组件,我们尝试一下编写这个组件。创建应用这个就不用我多说了,使用过开发工具的朋友应该多很清楚。这个例子使用的是最简单的初始项目来做的。

请看下图结构:

微信小程序-地图开发(微信小程序地图开发文档)

注意看里面的代码,我在wxml内编写了地图的组件,一个<view/>内包含了一个<map/>标签,这里我使用了几个比较常用的属性

这几个属性依次分别表示:

class="map" 类名

scale="12" 缩放级别(取值范围为5-18)

show-location="true" 显示带有方向的当前定位点

latitude="{{latitude}}" 纬度

longitude="{{longitude}}" 经度

markers="{{markers}}" 标记点(这个标记是一个Array类型的数据)

这里使用了数据绑定,花括号{{}}对应的值,还不清楚数据绑定请去查看文档,这里不累赘。

到这里我们就简单的编写好了,来看一下样子

微信小程序-地图开发(微信小程序地图开发文档)

简单实例

这里我用北京天安门广场作为坐标,不要问我怎么知道这个坐标的,因为百度地图,腾讯地图,高德地图等都有个叫拾取器的东西。

好了我们继续,难道这个地图就只有这点功能吗,其实不是的,还有很多功能,例如:路线规划、查询附近标记点(这个需要一个接口,因为是腾讯的地图,所以最好用腾讯的WebService API)等;

还有这么多怎么讲呢?没事,我们慢慢看。讲到这,只是使用了视图层的显示,现在开始就要使用API的方法了!

获取位置-getLocation()

看到这个方法是不是很熟悉,使用过地图的小伙伴都会知道这个跟SDK里的方法是一样的,究竟怎么用

在开发工具内index.js文件中Page内写了一个方法

微信小程序-地图开发(微信小程序地图开发文档)

wx.getLocation这就是微信小程序提供的获取当前位置的方法,我们看看他的具体参数

微信小程序-地图开发(微信小程序地图开发文档)

API参数说明

因为在文档可能看得不够直观,我编译了一次,给大家看看获取的数据

微信小程序-地图开发(微信小程序地图开发文档)

Object位置就是数据

嗯嗯,看到这大家都知道获取的是经纬度。那么拿到这个经纬度应该怎么用。那就要在成功获取时,使用setData把之前的数据设置进去。

微信小程序-地图开发(微信小程序地图开发文档)

设置后格式

微信小程序-地图开发(微信小程序地图开发文档)

初始化数据格式

编写时要仔细认真对比,这里我也踩坑了!

来看看效果

微信小程序-地图开发(微信小程序地图开发文档)

编译后

可以看到之前是天安门广场,然后获取位置后就到获取的位置了。

今天先说到这,说了一下<map/>组件的使用和简单的API方法。

地图开发(二)

今天我来继续讲解剩下的方法和如何添加外部接口。

接下来跟着我一起看下吧。

看过文档的小伙伴都知道,在API里还有几个方法

微信小程序-地图开发(微信小程序地图开发文档)

文档中API 的位置

昨天讲了getLocation,今天继续下面的几个方法,看看究竟怎么用。

wx.chooseLocation

微信小程序-地图开发(微信小程序地图开发文档)

文档介绍

这个方法很简单,我在wxml中添加了一个<button/>组件

微信小程序-地图开发(微信小程序地图开发文档)

index.wxml

然后设置一下样式

微信小程序-地图开发(微信小程序地图开发文档)

index.wxss

绑定事件用(bindtap="方法")即可,在bindtap绑定事件触发时,会受到一个事件对象,这个不多解释上图简单说明即可

微信小程序-地图开发(微信小程序地图开发文档)

事件对象

来看看实际点击效果如何

微信小程序-地图开发(微信小程序地图开发文档)

效果

wx.openLocation

首先看看文档介绍,很直观,没有太多解析。

微信小程序-地图开发(微信小程序地图开发文档)

文档中说这是一个打开地图选择位置,究竟什么样子的呢?

这也不多解释,直接代码说话!

微信小程序-地图开发(微信小程序地图开发文档)

index.js文件内容

因为这里使用了一个<button/>组件,所以我们还要看一下index.wxml文件

微信小程序-地图开发(微信小程序地图开发文档)

index.wxml文件

到这里这个方法就解释完了,置于openLocation需要设置的数据都在上图内了,还有注释;

让我们来点击一下看看效果

微信小程序-地图开发(微信小程序地图开发文档)

效果

看完以上效果,个人感觉动态的更好。就是点击按钮跳转到微信自带地图,然后可以设置地点,然后还可以发送。因为在模拟器里,所以就没演示发送了,看完这篇文章可以去尝试下,还有在模拟器里定位会失败,最好在真机测试看看。还有一个API(wx.createMapContext)就下次重点说。因为这个是添加地图组件的,地图还有很多功能等待大家去发掘,所以今天就说道这。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。