效果展示
通过点击标签切换到相应的景点地区
html部分
1. <!--pages/map/map.wxml--> 2. <!-- <text>地图页面</text> --> 3. <view class="geographical_map"> 4. <!-- 标记点预留处 --> 5. <view class="map_label" > 6. <view wx:for="{{biao_shi}}" bindtap="map_ditu" data-id="{{item.id}}">{{item.name}}</view> 7. </view> 8. <!-- 地图 --> 9. <view class="map"> 10. <map 11. id="map" 12. style="width: 100%;height: 100%;" 13. longitude="{{longitude}}" 14. latitude="{{latitude}}" 15. markers="{{markers}}" 16. scale="{{scale}}" 17. show-location 18. ></map> 19. </view> 20. </view>
css部分
1. /* pages/map/map.wxss */ 2. /* 给地图一个宽高 */ 3. .geographical_map map{ 4. width: 100%; 5. height: 100vh; 6. } 7. .map_label{ 8. justify-content: space-around; 9. display: flex; 10. width: 100%; 11. height: 60px; 12. background-color: #ffffff; 13. font-size: 20px; 14. line-height: 100rpx; 15. } 16. page{ 17. height: 100%; 18. } 19. .map_diaply{ 20. width: 70%; 21. display: flex; 22. font-size: 40rpx; 23. } 24. .map_diaply view{ 25. margin: 0 10px 0 10px; 26. } 27. .map_image image{ 28. width:50rpx ; 29. height: 50rpx; 30. } 31. /* ditu */ 32. .map{ 33. width: 100vw; 34. height: 100vh; 35. }page{ 36. background-color: #8a8a8a; 37. }
json部分
1. { 2. "usingComponents": { "van-tab": "@vant/weapp/tab/index", 3. "van-tabs": "@vant/weapp/tabs/index"} 4. }
js部分
1. // pages/map/map.js 2. Page({ 3. // 地图控件 4. 5. /** 6. * 页面的初始数据 7. */ 8. data: { 9. // 标识 10. biao_shi:'', 11. // 地图其他数据 12. qi_ta:'', 13. // ditu 14. longitude:"", // 中心经度 15. latitude:"", // 中心纬度 16. markers:[], // 标记点 17. scale:10 // 缩放级别，取值范围为3-20 18. 19. }, 20. 21. /** 22. * 生命周期函数--监听页面加载 23. */ 24. onLoad(options) { 25. let str = wx.getStorageSync('shezhi') 26. var that = this; 27. wx.request({ 28. url: '通过这个接口获取标记点', 29. data: { 30. //需要的参数 31. }, 32. header: { 33. 'content-type': 'application/json' 34. }, 35. success (res) { 36. console.log(res); 37. console.log(res.data.data); 38. that.setData({ 39. biao_shi:res.data.data 40. }) 41. // console.log(biao_shi); 42. } 43. }), 44. // 获取当前地理位置 45. wx.getLocation({ 46. success:(res)=>{ 47. let {latitude,longitude} = res; 48. this.setData({ 49. latitude, 50. longitude, 51. }) 52. } 53. }) 54. 55. 56. }, 57. // 地图标识点击事件 58. map_ditu:function (e) { 59. let {id} = e.target.dataset; 60. console.log(e.currentTarget.dataset.id); 61. let str = wx.getStorageSync('shezhi') 62. var that = this; 63. wx.request({ 64. url: '地图地点接口', 65. data: { 66. //参数 67. }, 68. header: { 69. 'content-type': 'application/json' 70. }, 71. success (res) { 72. console.log(res); 73. console.log(res.data.tab); 74. console.log(res.data) 75. let ar=[] 76. // 标记点 77. for (let i = 0; i < res.data.tab.length; i++) { 78. let obj={ 79. name:res.data.tab[i].name, 80. joinCluster:true, // 是否点聚合 81. iconPath:"/image/bar.jpg", // 项目目录下的图片路径 82. longitude:res.data.tab[i].lng, // 经度 83. latitude:res.data.tab[i].lat, // 纬度 84. width:30, // 标注图标宽度 85. height:30, // 标注图标高度 86. label:{ 87. content:`${res.data.tab[i].name}`, //文本 88. color: '#000000', //文本颜色 89. borderRadius: 3, //边框圆角 90. // borderWidth: 1, //边框宽度 91. borderColor: '#409eff', //边框颜色 92. bgColor: '#ffffff', //背景色 93. padding: 5, //文本边缘留白 94. textAlign: 'center' //文本对齐方式。有效值: left, right, center 95. }, 96. } 97. ar.push(obj) 98. } 99. console.log(ar); 100. that.setData({ 101. longitude:res.data.tab[0].lng, // 中心经度 102. latitude:res.data.tab[0].lat, // 中心纬度 103. markers:ar 104. }) 105. 106. } 107. }) 108. }, // 自定义markers 109. 110. /** 111. * 生命周期函数--监听页面初次渲染完成 112. */ 113. onReady() { 114. 115. }, 116. 117. /** 118. * 生命周期函数--监听页面显示 119. */ 120. onShow() { 121. 122. }, 123. 124. /** 125. * 生命周期函数--监听页面隐藏 126. */ 127. onHide() { 128. 129. }, 130. 131. /** 132. * 生命周期函数--监听页面卸载 133. */ 134. onUnload() { 135. 136. }, 137. 138. /** 139. * 页面相关事件处理函数--监听用户下拉动作 140. */ 141. onPullDownRefresh() { 142. 143. }, 144. 145. /** 146. * 页面上拉触底事件的处理函数 147. */ 148. onReachBottom() { 149. 150. }, 151. 152. /** 153. * 用户点击右上角分享 154. */ 155. onShareAppMessage() { 156. 157. } 158. })
