当前位置:   article > 正文

uniapp移动端地图,点击气泡弹窗并实现精准定位_uniapp 气泡弹窗

uniapp 气泡弹窗

记录移动端地图map组件的使用

需求记录:

移动端地图部分需要展示两个定位点,上报点及人员定位点。通过右上角的两个按钮实现地图定位。点击对应定位气泡,弹出定位点的信息。

效果图如下:

map在nvue中的使用。直接用nvue可以直接调整层级,可以覆盖住map组件。在map组件上添加按钮控制,实现交互。map组件内添加按钮使用cover-image如下:

  1. <view>
  2. <map id="map" class="map" :scale="15" ref="map" style="width:320px;height:500px;margin-left: 30px;"
  3. :latitude="latitude" :longitude="longitude" :markers="cover">
  4. <view class="btnStyle">
  5. <cover-image src="../../static/images/people.png"
  6. class="removeToReal" @tap="removeToReal"></cover-image>
  7. <cover-image src="../../static/images/gaodeMap.png" style="margin-top: 18px;" class="removeToMap" @tap="removeToMap"></cover-image>
  8. </view>
  9. </map>
  10. </view>

js部分:

  1. <script>
  2. export default {
  3. data() {
  4. return {
  5. // 地图
  6. mapContext: null,
  7. latitude: null,
  8. longitude: null,
  9. latitudeReal: null,
  10. longitudeReal: null,
  11. cover: [],
  12. }
  13. },
  14. methods: {
  15. // 移动到对应点坐标
  16. removeToReal() {
  17. this.mapContext.moveToLocation({
  18. latitude: this.latitudeReal,
  19. longitude: this.longitudeReal
  20. });
  21. },
  22. // 移动到对应点坐标
  23. removeToMap() {
  24. this.mapContext.moveToLocation({
  25. latitude: this.latitude,
  26. longitude: this.longitude
  27. });
  28. },
  29. // 关键代码:
  30. // 加载坐标点及气泡。(data参数中包含了所需的所有数据,以下仅为气泡弹窗的代码示例参考)
  31. async setMarkers(data) {
  32. let latlng = JSON.parse(data.inspectorLocation)
  33. let reallatlngTurn = this.wgs84_gcj02(latlng[0],latlng[1])
  34. let realatlng = JSON.parse(data.inspectorRealsite)
  35. let realTurn = this.wgs84_gcj02(realatlng[0],realatlng[1])
  36. this.longitude = reallatlngTurn[0]
  37. this.latitude = reallatlngTurn[1]
  38. this.longitudeReal = realTurn[0]
  39. this.latitudeReal = realTurn[1]
  40. let markers = []
  41. let markerInspector = {
  42. id: 'id_' + 'inspectorLocation',
  43. latitude: reallatlngTurn[1],
  44. longitude: reallatlngTurn[0],
  45. width: 30,
  46. height: 35,
  47. iconPath: '../../static/images/position2.png',
  48. callout:{//自定义标记点上方的气泡窗口 点击有效
  49. content: ` 上报点
  50. 任务单号:${data.taskSn}
  51. 任务类型:外部任务
  52. 派发时间:${data.dispatchTime.slice(0,10)}
  53. 上报人: ${data.inspectorName}
  54. 经度: ${latlng[0].toFixed(6)}
  55. 纬度: ${latlng[1].toFixed(6)}`,//文本
  56. color: '#ffffff',//文字颜色
  57. fontSize: 14,//文本大小
  58. borderRadius: 15,//边框圆角
  59. borderWidth: '10',
  60. padding: '10',
  61. textAlign: 'left',
  62. bgColor: '#e51860',//背景颜色
  63. display: 'BYCLICK',//常显
  64. }
  65. }
  66. markers.push(markerInspector)
  67. let markerReal = {
  68. id: 'id_' + 'realLocation',
  69. latitude: realTurn[1],
  70. longitude: realTurn[0],
  71. callout:{//自定义标记点上方的气泡窗口 点击有效
  72. content: ` 定位点
  73. 任务单号:${data.taskSn}
  74. 任务类型:外部任务
  75. 上报人: ${data.inspectorName}
  76. 角色: ${people}
  77. 派发时间:${data.dispatchTime.slice(0,10)}
  78. 经度: ${realatlng[0]}
  79. 纬度: ${realatlng[1]}`,//文本
  80. color: '#ffffff',//文字颜色
  81. fontSize: 14,//文本大小
  82. borderRadius: 15,//边框圆角
  83. borderWidth: '10',
  84. padding: '10',
  85. textAlign: 'left',
  86. bgColor: '#e51860',//背景颜色
  87. display: 'BYCLICK',//常显
  88. }
  89. }
  90. markers.push(markerReal)
  91. this.cover=markers
  92. },
  93. onLoad(options) {
  94. this.mapContext = uni.createMapContext("map", this);
  95. }
  96. </scritpt>

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/985667
推荐阅读
相关标签
  

闽ICP备14008679号