mapindex.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <view class="content">
  3. <button type="primary" @click="location">位置定位</button>
  4. <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
  5. </view>
  6. </template>
  7. <script>
  8. const img = '/static/logo.png';
  9. export default {
  10. data() {
  11. return {
  12. latitude: 43.780458,
  13. longitude: 125.384426,
  14. }
  15. },
  16. onReady() {
  17. this._mapContext = uni.createMapContext("map", this);
  18. // 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})
  19. this._mapContext.initMarkerCluster({
  20. enableDefaultStyle: false,
  21. zoomOnClick: true,
  22. gridSize: 60,
  23. complete(res) {
  24. console.log('initMarkerCluster', res)
  25. }
  26. });
  27. this._mapContext.on("markerClusterCreate", (e) => {
  28. console.log("markerClusterCreate", e);
  29. });
  30. this.addMarkers();
  31. },
  32. methods: {
  33. addMarkers() {
  34. const positions = [
  35. {
  36. latitude: 43.780458,
  37. longitude: 125.384426,
  38. }
  39. ]
  40. const markers = []
  41. positions.forEach((p, i) => {
  42. console.log(i)
  43. markers.push(
  44. Object.assign({},{
  45. id: i + 1,
  46. iconPath: img,
  47. width: 50,
  48. height: 100,
  49. joinCluster: true, // 指定了该参数才会参与聚合
  50. label: {
  51. width: 50,
  52. height: 30,
  53. borderWidth: 1,
  54. borderRadius: 10,
  55. bgColor: '#ffffff',
  56. content: `定位点`
  57. }
  58. },p)
  59. )
  60. })
  61. this._mapContext.addMarkers({
  62. markers,
  63. clear: false,
  64. complete(res) {
  65. console.log('addMarkers', res)
  66. }
  67. })
  68. },
  69. //位置定位
  70. location(){
  71. uni.openLocation({
  72. latitude: 45.780558,
  73. longitude: 125.384426,
  74. success: function (res) {
  75. console.log('打开系统位置地图成功')
  76. },
  77. fail: function (error) {
  78. console.log(error)
  79. }
  80. })
  81. },
  82. }
  83. }
  84. </script>
  85. <style>
  86. .content {
  87. flex: 1;
  88. }
  89. .map {
  90. width: 20rem;
  91. height: 40rem;
  92. flex: 1;
  93. }
  94. </style>