返回

专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

微信小程序如何实现在地图上多地点标识

2020-09-27 作者:秩名

如何在微信小程序上实现对地图上的控件进行多地点标识,以下是具体做法:

微信小程序如何实现在地图上多地点标识

 

 

wxml

 

  1. 1 <map id="map" scale="{{scale}}" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" bindregionchange="regionchange" show-location style="width: 100%; height: 580px;"></map>

js


微信小程序如何实现在地图上多地点标识

  1. 1 let hospitalData = require('hospitalData')
  2. 2 Page({
  3. 3 data: {
  4. 4 centerX: 0.0,
  5. 5 centerY: 0.0,
  6. 6 //可能我标识的地点和你所在区域比较远,缩放比例建议5;
  7. 7 scale:15,
  8. 8 markers: [],
  9. 9 controls: [{
  10. 10 id: 1,
  11. 11 iconPath: '/image/location-control.png',
  12. 12 position: {
  13. 13 left: 0,
  14. 14 top: 10,
  15. 15 width: 40,
  16. 16 height: 40
  17. 17 },
  18. 18 clickable: true
  19. 19 }]
  20. 20 },
  21. 21 onReady: function(e) {
  22. 22 // 使用 wx.createMapContext 获取 map 上下文
  23. 23 this.mapCtx = wx.createMapContext('myMap')
  24. 24 },
  25. 25
  26. 26 onLoad: function() {
  27. 27 console.log('地图定位!')
  28. 28 let that = this
  29. 29 wx.getLocation({
  30. 30 type: 'gcj02', //返回可以用于wx.openLocation的经纬度
  31. 31 success: (res) => {
  32. 32 let latitude = res.latitude;
  33. 33 let longitude = res.longitude;
  34. 34 let marker = this.createMarker(res);
  35. 35 this.setData({
  36. 36 centerX: longitude,
  37. 37 centerY: latitude,
  38. 38 markers: this.getHospitalMarkers()
  39. 39 })
  40. 40 }
  41. 41 });
  42. 42 },
  43. 43
  44. 44 /**
  45. 45 * 标示点移动触发
  46. 46 */
  47. 47 regionchange(e) {
  48. 48 console.log(e.type)
  49. 49 },
  50. 50
  51. 51 /**
  52. 52 * 点击标识点触发
  53. 53 */
  54. 54 markertap(e) {
  55. 55 console.log(e)
  56. 56 },
  57. 57
  58. 58 /**
  59. 59 * control控件点击时间
  60. 60 */
  61. 61 controltap(e) {
  62. 62 console.log(e.controlId)
  63. 63 this.moveToLocation()
  64. 64 },
  65. 65
  66. 66
  67. 67 /**
  68. 68 * 获取医院标识
  69. 69 */
  70. 70 getHospitalMarkers() {
  71. 71 let markers = [];
  72. 72 for (let item of hospitalData) {
  73. 73 let marker = this.createMarker(item);
  74. 74 markers.push(marker)
  75. 75 }
  76. 76 return markers;
  77. 77 },
  78. 78
  79. 79 /**
  80. 80 * 移动到自己位置
  81. 81 */
  82. 82 moveToLocation: function() {
  83. 83 let mpCtx = wx.createMapContext("map");
  84. 84 mpCtx.moveToLocation();
  85. 85 },
  86. 86
  87. 87
  88. 88 /**
  89. 89 * 还有地图标识,可以在name上面动手
  90. 90 */
  91. 91 createMarker(point) {
  92. 92 let latitude = point.latitude;
  93. 93 let longitude = point.longitude;
  94. 94 let marker = {
  95. 95 iconPath: "/image/location.png",
  96. 96 id: point.id || 0,
  97. 97 name: point.name || '',
  98. 98 latitude: latitude,
  99. 99 longitude: longitude,
  100. 100 width: 25,
  101. 101 height: 48
  102. 102 };
  103. 103 return marker;
  104. 104 }
  105. 105 })

hospitalData.js (模拟数据)

 

  1. 1 module.exports = [{
  2. 2 "id": 1,
  3. 3 "name": "永州市中心医院",
  4. 4 "longitude": "111.62852107566833",
  5. 5 "latitude": "26.42142999357519"
  6. 6 },
  7. 7 {
  8. 8 "id": 2,
  9. 9 "name": "永州市中医院",
  10. 10 "longitude": "111.5972679762268",
  11. 11 "latitude": "26.44470581245983"
  12. 12 }
  13. 13 ]

运行示例时,建议放在同一目录下.

线上+线下+进销存+收银+会员门店零售管理好帮手

  • 极速收银管理

    门店能实现快速收银,提升门店经营效率。

  • 进销存管理

    系统自带进销存管理,更好管理库存销售。

  • 软硬件一体化

    配备收银硬件一站式整体服务。

收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价

推荐文章

门店系统 获取报价 立即咨询 免费试用