地图开发（一）
今天介绍的地图功能是小程序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）就下次重点说。因为这个是添加地图组件的，地图还有很多功能等待大家去发掘，所以今天就说道这。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。