折翼天使资源社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 94|回复: 0

[文档教程] 微信小程序地图使用总结

[复制链接]

7860

主题

8261

帖子

284

积分

网站编辑

Rank: 8Rank: 8

天使之心
0
注册时间
2013-8-22
发表于 2018-11-23 11:22:32 | 显示全部楼层 |阅读模式
小程序官方的 map地图说明文档已经非常详细了,但是鉴于如果没有一个合适的使用场景,对于刚接触 map 的初级开发,看着这些繁杂又贼多的属性名和字段,外加急切的开发需求,晕头转向是不可避免的了。接下来我会将自己在项目中对 map 的一些使用做一个总结,希望能帮助到正在开发的你。

请粗略的浏览下这两篇介绍文档,确保下面的内容看起来更通俗易懂
小程序官方地图 map 文档参考
小程序官方地图 map 相关 API (地图组件控制)参考

小程序不支持直接获取到定位的地点信息,返回的是当前位置的经纬度,如果你需要用到 「逆地址解析」(将指定经纬度转换为具体地址) 、「关键词输入提示」等功能,个人建议使用「腾讯位置服务微信小程序JavaScript SDK」,都是腾讯家的,在定位上的精准度要好得多,当然也可以使用百度、高德等小程序 API 服务。

微信位置服务SDK参考

先放上一张效果图:开发工具的效果会差一点,真机上体验还是不错的,顶部的提示框的样式在真机上显示正常,在小程序开发工具上却不居中。
049ed73a460a418fb820ad1429bed705.png

先贴出 map 标签 css 代码,并对其中重要属性进行说明.
复制代码
复制代码

  • id :map 组件的 id,在 wx.createMapContext(mapId, this) 中需要用到
  • longitude: map 组件的中心经度 latitude:map 组件的中心纬度
  • scale:缩放级别,取值范围为5-18,默认为16
  • show-location:显示带有方向的当前定位点,即显示代表当前位置的蓝色定位点图标,另外 mapContext 的moveToLocation()方法在官方文档有着这样的说明(将地图中心移动到当前定位点,需要配合map组件的show-location使用)
  • markers:标记点用于在地图上显示标记的位置,是一个数组对象
  • bindmarkertap:点击 marker 标记点时触发
  • bindcontroltap:点击控件时触发
  • bindregionchange:拖动地图触发
  • controls:在地图上显示控件,控件不随着地图移动,是一个数组对象bindtap: 点击地图时触发(拖动地图时不会触发点击)


下面给出我在项目中遇到的问题,以及一些功能的解决方案。

1、map 上无法显示 view 等标签

map 上放置常规标签,在开发工具模拟器上能显示,在真机却显示不出来。
原因:map 组件是由客户端创建的原生组件,它的层级是最高的,不能通过 z-index 控制层级。
这里有两个解决方案,为了方便,此处采用微信提供的 cover-view 控件:

代码:
  1. {{warningText}}
复制代码
复制代码
2、怎么定位到某个坐标,并且让这个经纬度地址处于地图中心?
map 的两个属性 longitude 和 latitude 表示当前地图的中心经纬度,和当前用户定位的经纬度是两个概念,并无直接关系,如果我们一直改变此 longitude 和 latitude,地图的中心是会一直变化的,所以只要利用好了这两个属性变量,实现上面的功能是很简单的
  1. that.setData({
  2. latitude: res.latitude,
  3. longitude: res.longitude,
  4. })
复制代码
复制代码
3、怎么实现拖动地图,让定位图标一直在地图中心,并实时获取中心经纬度?
  1. //创建中心指针图标
  2. that.setData({
  3. controls: [{
  4. id: 1,
  5. iconPath: '../../img/center-location.png',
  6. position: {
  7. left: (windowWidth - controlsWidth) / 2,
  8. top: (windowHeight - bottomHeight) / 2 - controlsHeight * 3 / 4,
  9. width: controlsWidth,
  10. height: controlsHeight
  11. },
  12. clickable: true
  13. }]
  14. })
  15. /** * 拖动地图回调 */
  16. regionChange: function (res) {
  17. var that = this;
  18. // 改变中心点位置
  19. if (res.type == "end") {
  20. that.getCenterLocation();
  21. }
  22. },
  23. /** * 得到中心点坐标 */
  24. getCenterLocation: function () {
  25. var that = this;
  26. //mapId 就是你在 map 标签中定义的 id
  27. var mapCtx = wx.createMapContext(mapId);
  28. mapCtx.getCenterLocation({
  29. success: function (res) {
  30. console.log('getCenterLocation----------------------->');
  31. console.log(res);
  32. that.updateCenterLocation(res.latitude, res.longitude);
  33. that.regeocodingAddress();
  34. that.queryMarkerInfo();
  35. }
  36. })
复制代码
复制代码
4、如何准确回到当前定位点
  1. //请求当前定位
  2. wx.getLocation({
  3. type: 'gcj02',
  4. success: function (res) {
  5. that.setData({
  6. latitude: res.latitude,
  7. longitude: res.longitude,
  8. })
  9. that.moveTolocation();
  10. },
  11. })
  12. /** * 移动到中心点 */
  13. moveTolocation: function () {
  14. //mapId 就是你在 map 标签中定义的 id
  15. var mapCtx = wx.createMapContext(mapId);
  16. mapCtx.moveToLocation();
  17. },
复制代码
复制代码
5、如何创建 marker 点
markers 是包含一个至多个 marker 点的数组,一个 marker 标记点至少需要包含图标 iconPath,出现的经度坐标点 longitude,出现的纬度坐标点 latitude,你可以自定义 marker 点的宽高(单位为 px),如果你有点击 marker 进行逻辑操作的要求,那就一定要为每一个 marker 标记点设置一个唯一的 id,用于在点击触发时判断点击的是哪一个 marker 点。
  1. //marker 点的格式是这样的,需要一个
  2. markers: [{
  3. iconPath: "/resources/others.png",
  4. id: 0,
  5. latitude: 23.099994,
  6. longitude: 113.324520,
  7. width: 50,
  8. height: 50
  9. }],
复制代码
复制代码
  1. //但是更多时候是请求服务器返回 marker 点集合,类似膜拜和 ofo,拖动地图,改变中心点就会刷新改变周围的 marker 点,这些点可能是客户端上传的,也有可能是膜拜这种车载GPS模块发送给服务器记录的。
  2. //大致类似于以下这样,但是代码仅供参考
  3. // 创建marker
  4. createMarker: function (dataList) {
  5. var that = this;
  6. var currentMarker = [];
  7. var markerList = dataList.data;
  8. for (var key in markerList) {
  9. var marker = markerList[key];
  10. marker.id = marker.info_id;
  11. marker.latitude = marker.lat;
  12. marker.longitude = marker.lng;
  13. marker.width = 40;
  14. marker.height = 40;
  15. if (marker.image) {
  16. marker.iconPath = '../../img/dog-select.png';
  17. } else {
  18. marker.iconPath = '../../img/dog-yellow.png';
  19. }
  20. }
  21. currentMarker = currentMarker.concat(markerList);
  22. consoleUtil.log('-----------------------');
  23. consoleUtil.log(currentMarker);
  24. that.setData({
  25. markers: currentMarker
  26. })
  27. },
复制代码
复制代码