首页 > 微信小程序开发 > 微信小程序-地图开发(一)

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

我又来了各位读者们,我是小猿,今天给大家带来的是地图开发!首先,我先说明一下,一般我是不会按顺序来写的,还有要看懂代码必须要具备前端开发知识,如果发现代码阅读困难就该去充下电再回头查看~

今天介绍的地图功能是小程序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方法,看到这相信大家都知道怎么用了,其他功能我就留下次再发吧。

,可以参考小程序开发的资料,