微信小程序-地图功能学习

[复制链接]
hyt_xcx手机认证 实名认证 视频认证 发表于 2017-1-19 18:47:28 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
SearchPOI,map,获取位置,标记位置map地图的使用,主要功能有,选择位置,返回标记,选择标记,标注收藏信息;
  1. // pages/map/map.js
  2. // 获取应用实例
  3. var app = getApp();

  4. // 获取LeanCloud对象
  5. const AV = require('../../libs/av-weapp.js');

  6. var LOCATION_TYPE = 'gcj02';
  7. var DEFAULT_SCALA = 16;

  8. var location = {}; // 定位坐标
  9. var LOCATION_MARKER_ID = 0; // 定位点ID
  10. var locationMarker = { id: LOCATION_MARKER_ID }; // 定位标记
  11. var LOCATION_MARKER_RES = '/res/location.png'; // 定位标记图标

  12. var selected; // 选取坐标
  13. var SELECTED_MARKER_ID = 1; // 选取点ID
  14. var selectedMarker = { id: SELECTED_MARKER_ID, }; // 选取标记
  15. var SELECTED_MARKER_RES = '/res/selected.png'; // 选取标记图标

  16. // 添加收藏对话框
  17. var collectTitle; // 标题
  18. var collectType; // 类型
  19. var collectContent; // 内容

  20. var COLLECTION_MARKER_RES = '/res/collection.png'; // 收藏标记图标

  21. var search; //搜索框文本

  22. var markers = [
  23.   // 定位标记
  24.   locationMarker,
  25.   // 选取点ID
  26.   selectedMarker,
  27. ]; // 地图标记

  28. Page({
  29.   data: {
  30.     collectModalHidden: true, // 添加收藏对话框隐藏
  31.     collectionModalHidden: true, // 收藏信息对话框隐藏
  32.     value: '' // 输入框清空
  33.   },

  34.   // 显示对话框
  35.   showPrompt: function (content) {
  36.     wx.showModal({
  37.       title: '提示',
  38.       content: content,
  39.     });
  40.   },

  41.   // 定位
  42.   getLocation: function () {
  43.     var that = this;
  44.     // 开始定位
  45.     wx.getLocation({
  46.       type: LOCATION_TYPE, // 默认为 wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标
  47.       success: function (res) {
  48.         // 定位成功
  49.         // 定位坐标
  50.         location = {
  51.           latitude: res.latitude,
  52.           longitude: res.longitude,
  53.         }
  54.         // // 更新定位标记
  55.         // locationMarker = {
  56.         //   id: LOCATION_MARKER_ID,
  57.         //   title: 'location',
  58.         //   iconPath: LOCATION_MARKER_RES,
  59.         //   latitude: res.latitude,
  60.         //   longitude: res.longitude,
  61.         //   width: 100,
  62.         //   height: 100,
  63.         // };
  64.         // markers[LOCATION_MARKER_ID] = locationMarker;
  65.         //若尚未选定点,则把当前定位作为选定点
  66.         if (!selected) {
  67.           selected = location;
  68.         }
  69.         // 更新选取点标记
  70.         selectedMarker = {
  71.           id: SELECTED_MARKER_ID,
  72.           title: 'selected',
  73.           iconPath: SELECTED_MARKER_RES,
  74.           latitude: res.latitude,
  75.           longitude: res.longitude,
  76.           width: 40,
  77.           height: 40
  78.         };
  79.         markers[SELECTED_MARKER_ID] = selectedMarker;
  80.         // 更新数据
  81.         that.setData({
  82.           position: location, // 定位坐标
  83.           scala: DEFAULT_SCALA, // 缩放比例[5-18]
  84.           markers: markers, // 标记点
  85.         });
  86.       },
  87.       fail: function () {
  88.         // 定位失败
  89.         that.showPrompt('定位失败');
  90.       },
  91.       complete: function () {
  92.         // 定位完成
  93.       }
  94.     })
  95.   },

  96.   // 加载收藏标记
  97.   showCollection: function () {
  98.     var that = this;
  99.     var query = new AV.Query('Collection');
  100.     // 添加条件后,开始查询
  101.     query.find()
  102.       .then(function (data) {
  103.         // 查询成功
  104.         for (var i = 0; i < data.length; ++i) {
  105.           // 添加标记
  106.           markers.push({
  107.             id: markers.length,
  108.             title: data[i].get('title'),
  109.             iconPath: COLLECTION_MARKER_RES,
  110.             latitude: data[i].get('latitude'),
  111.             longitude: data[i].get('longitude'),
  112.             width: 40,
  113.             height: 40,
  114.             type: data[i].get('type'),
  115.             content: data[i].get('content'),
  116.           });
  117.         }
  118.         that.setData({
  119.           markers: markers,
  120.         });
  121.       }, function (error) {
  122.         // 查询失败
  123.         console.error('Failed to save in LeanCloud:' + error.message);
  124.         that.showPrompt('加载收藏失败');
  125.       });
  126.   },
  127.   // 搜索框输入事件
  128.   onSearchInput: function (e) {
  129.     search = e.detail.value;
  130.   },
  131.   // 搜索按钮点击事件
  132.   onSearchTap: function (e) {
  133.     if (!search || search.length == 0) {
  134.       this.showPrompt('搜索值不能为空');
  135.     }
  136.     var that = this;
  137.     // 新建查询
  138.     var query = new AV.Query('Collection');
  139.     query.contains('type', search);
  140.     query.find()
  141.       .then(function (data) {
  142.         // 查询成功
  143.         // 清空收藏标记
  144.         markers = [
  145.           locationMarker,
  146.           selectedMarker,
  147.         ];
  148.         for (var i = 0; i < data.length; ++i) {
  149.           // 添加标记
  150.           markers.push({
  151.             id: markers.length,
  152.             title: data[i].get('title'),
  153.             iconPath: COLLECTION_MARKER_RES,
  154.             latitude: data[i].get('latitude'),
  155.             longitude: data[i].get('longitude'),
  156.             width: 40,
  157.             height: 40,
  158.             type: data[i].get('type'),
  159.             content: data[i].get('content'),
  160.           });
  161.         }
  162.         that.setData({
  163.           markers: markers,
  164.         });
  165.       }, function (error) {
  166.         // 查询失败
  167.         console.error('Failed to save in LeanCloud:' + error.message);
  168.         that.showPrompt('加载收藏失败');
  169.       });
  170.   },
  171.   // 取消搜索按钮点击事件
  172.   onCancelSearchTap: function (e) {
  173.     var that = this;
  174.     // 清空收藏标记
  175.     markers = [
  176.       locationMarker,
  177.       selectedMarker,
  178.     ];
  179.     // 清空搜索框
  180.     this.setData({
  181.       searchValue: '',
  182.       markers: markers,
  183.     });
  184.     var query = new AV.Query('Collection');
  185.     query.find()
  186.       .then(function (data) {
  187.         // 查询成功
  188.         for (var i = 0; i < data.length; ++i) {
  189.           // 添加标记
  190.           markers.push({
  191.             id: markers.length,
  192.             title: data[i].get('title'),
  193.             iconPath: COLLECTION_MARKER_RES,
  194.             latitude: data[i].get('latitude'),
  195.             longitude: data[i].get('longitude'),
  196.             width: 40,
  197.             height: 40,
  198.             type: data[i].get('type'),
  199.             content: data[i].get('content'),
  200.           });
  201.         }
  202.         that.setData({
  203.           markers: markers,
  204.         });
  205.       }, function (error) {
  206.         // 查询失败
  207.         console.error('Failed to save in LeanCloud:' + error.message);
  208.         that.showPrompt('加载收藏失败');
  209.       });
  210.   },

  211.   // 地图非标记点点击事件
  212.   onMapTap: function (e) {
  213.     var that = this;
  214.     // 显示加载中
  215.     wx.showToast({
  216.       title: '加载选取工具',
  217.       icon: 'loading',
  218.       duration: 2000
  219.     });
  220.     // 跳转选取位置
  221.     wx.chooseLocation({
  222.       success: function (res) {
  223.         // 选取成功
  224.         // 更新选取点
  225.         selected = {
  226.           latitude: res.latitude,
  227.           longitude: res.longitude,
  228.         };
  229.         // 更新选取点标记
  230.         selectedMarker = {
  231.           id: SELECTED_MARKER_ID,
  232.           title: 'selected',
  233.           iconPath: SELECTED_MARKER_RES,
  234.           latitude: res.latitude,
  235.           longitude: res.longitude,
  236.           width: 40,
  237.           height: 40
  238.         };
  239.         markers[SELECTED_MARKER_ID] = selectedMarker;
  240.         that.setData({
  241.           markers: markers,
  242.         });
  243.       },
  244.       cancel: function () {
  245.         // 选取取消
  246.       },
  247.       fail: function () {
  248.         // 选取失败
  249.         this.showPrompt('选取失败');
  250.       },
  251.       complete: function () {
  252.         // 选取完成
  253.       }
  254.     })
  255.   },

  256.   // 标记点点击事件
  257.   onMarkerTap: function (e) {
  258.     // 定位标记
  259.     if (e.markerId == LOCATION_MARKER_ID) {
  260.       wx.showToast({
  261.         title: '当前定位',
  262.         icon: 'success',
  263.       });
  264.     } else if (e.markerId == SELECTED_MARKER_ID) {
  265.       // 选取标记
  266.       wx.showToast({
  267.         title: '选取位置',
  268.         icon: 'success',
  269.       });
  270.     } else {
  271.       // 收藏标记
  272.       var marker = markers[e.markerId];
  273.       var collection = {
  274.         title: marker.title,
  275.         type: marker.type,
  276.         content: marker.content,
  277.       };
  278.       // 弹出添加收藏对话框
  279.       this.setData({
  280.         collectionModalHidden: false,
  281.         collection: collection
  282.       });
  283.     }
  284.   },
  285.   // 点击收藏信息对话框确认按钮
  286.   onCollectionTap: function () {
  287.     this.setData({
  288.       collectionModalHidden: true,
  289.     });
  290.   },

  291.   // 点击添加收藏按钮事件
  292.   onCollectTap: function () {
  293.     if (!selected) {
  294.       this.showPrompt('还未选取点')
  295.       return;
  296.     }
  297.     // 弹出添加收藏对话框
  298.     this.setData({
  299.       collectModalHidden: false
  300.     });
  301.   },
  302.   // 点击确认添加收藏事件
  303.   onConfirmCollectTap: function () {
  304.     var that = this;
  305.     if (!selected) {
  306.       that.showPrompt('还未选取点');
  307.       return;
  308.     }
  309.     // 输入校验
  310.     if (!collectTitle || collectTitle.length == 0) {
  311.       that.showPrompt('标题不能为空');
  312.       return;
  313.     }
  314.     if (!collectType || collectType.length == 0) {
  315.       that.showPrompt('类型不能为空');
  316.       return;
  317.     }
  318.     if (!collectContent) {
  319.       collectContent = '';
  320.     }

  321.     var collection = AV.Object.extend('Collection');
  322.     var col = new collection();
  323.     col.set('title', collectTitle);
  324.     col.set('type', collectType);
  325.     col.set('content', collectContent);
  326.     col.set('latitude', selected.latitude);
  327.     col.set('longitude', selected.longitude);
  328.     col.save().then(function (success) {
  329.       // 添加成功
  330.       that.showPrompt('添加成功');
  331.       markers.push({
  332.         id: markers.length,
  333.         title: collectTitle,
  334.         iconPath: COLLECTION_MARKER_RES,
  335.         latitude: selected.latitude,
  336.         longitude: selected.longitude,
  337.         width: 40,
  338.         height: 40
  339.       });
  340.       that.setData({
  341.         markers: markers,
  342.       });
  343.       // 隐藏添加收藏对话框
  344.       that.setData({
  345.         collectModalHidden: true,
  346.         value: '', // 清空输入框内容
  347.       });
  348.     }, function (error) {
  349.       // 添加失败
  350.       console.error('Failed to save in LeanCloud:' + error.message);
  351.       that.showPrompt('添加失败');
  352.     });
  353.   },
  354.   // 点击取消添加收藏事件
  355.   onCancelCollectTap: function () {
  356.     //隐藏添加收藏对话框
  357.     this.setData({
  358.       collectModalHidden: true,
  359.       value: '', // 清空输入框内容
  360.     });
  361.   },
  362.   // 标题输入事件
  363.   onCollectTitleInput: function (e) {
  364.     collectTitle = e.detail.value;
  365.   },
  366.   // 类型输入事件
  367.   onCollectTypeInput: function (e) {
  368.     collectType = e.detail.value;
  369.   },
  370.   // 内容输入事件
  371.   onCollectContentInput: function (e) {
  372.     collectContent = e.detail.value;
  373.   },

  374.   onLoad: function (options) {
  375.     // 页面初始化 options为页面跳转所带来的参数
  376.   },
  377.   onReady: function () {
  378.     // 页面渲染完成
  379.     this.getLocation(); // 定位
  380.     this.showCollection(); // 显示收藏点
  381.   },
  382.   onShow: function () {
  383.     // 页面显示
  384.   },
  385.   onHide: function () {
  386.     // 页面隐藏
  387.   },
  388.   onUnload: function () {
  389.     // 页面关闭
  390.   }
  391. })
复制代码
1.gif


项目地址:
游客,如果您要查看本帖隐藏内容请回复

回复

使用道具 举报

精彩评论4

fanglangdehaizi实名认证 手机认证 视频认证 发表于 2017-7-15 15:40:32 | 显示全部楼层
回复一下真不容易啊
回复 支持 反对

使用道具 举报

notable 发表于 2018-3-4 15:03:58 | 显示全部楼层
最近学习GPS部分功能~~学习一下!!
回复 支持 反对

使用道具 举报

large_zhao 发表于 2018-3-22 23:05:10 | 显示全部楼层
学习学习
回复

使用道具 举报

shineforce 发表于 2018-8-10 15:13:29 | 显示全部楼层
学习一下,能用到的啊
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ- Archiver-手机版-小黑屋- 浩阳天社区  

Powered by Discuz! X3.2© 2001-2013 Comsenz Inc.  蜀ICP备16032957号-1