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

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

 

 

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 onl oad: 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 ]

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