小程序地图控件怎么用，微信小程序-地图开发

地图开发（一）

今天介绍的地图功能是小程序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）就下次重点说。因为这个是添加地图组件的，地图还有很多功能等待大家去发掘，所以今天就说道这。