hch-position.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. <template>
  2. <view>
  3. <view class="page-body">
  4. <view class="page-section page-section-gap">
  5. <map scale="10" ubkey='CQIBZ-P2MR5-PM3IB-QRKTX-SEVJE-GYF34' :showScale="false" :showLocation="true" :showCompass="false" enableZoom="true" enableScroll="true" enableBuilding="true" enable3D="true" id="myMap" style="width: 100%; height: 600px;"
  6. :latitude="latitude"
  7. :longitude="longitude"
  8. :markers="markersIn"
  9. :layerStyle="mapStyle"
  10. @markertap='markertap'
  11. @anchorpointtap='anchorpointtap'
  12. >
  13. </map>
  14. </view>
  15. <lPainter
  16. style="position: fixed;left:0px;top: -500px;"
  17. isRenderImage
  18. :board="painter.base"
  19. @success="(e)=>{painter.path = e; painter.wait=0}"
  20. />
  21. </view>
  22. </view>
  23. </template>
  24. <script>
  25. import lPainter from '@/components/lime-painter/index.vue'
  26. export default {
  27. components:{
  28. lPainter
  29. },
  30. props: {
  31. markers: {
  32. type: Array,
  33. default: [{
  34. id: 1,
  35. latitude: 30.6034799,
  36. longitude: 104.1132550,
  37. // iconPath: "../../static/hch-position/门店.png",
  38. width: '38rpx',
  39. height: '40rpx',
  40. joinCluster: true, // 指定了该参数才会参与聚合
  41. callout: {
  42. content: "门店1号店",
  43. borderRadius: 10,
  44. padding: 5,
  45. display: "ALWAYS",
  46. transform: "tranlateY(20px)"
  47. }
  48. },
  49. ]
  50. }
  51. },
  52. data() {
  53. return {
  54. latitude: 30.6034799,
  55. longitude: 104.1132550,
  56. mapStyle: 1, //个性化地图
  57. markersIn: [],
  58. isUpdate: false,
  59. painter:{
  60. wait: 0,
  61. base:{
  62. width: '94rpx',
  63. height: '110rpx',
  64. radius: "100rpx",
  65. views:[
  66. {
  67. type: 'image',
  68. src: '../../static/icon/late02.png',
  69. css: {
  70. left: '0rpx',
  71. top: '0rpx',
  72. width: '90rpx',
  73. height: '100rpx',
  74. }
  75. },
  76. {
  77. type: 'image',
  78. src: '',
  79. css: {
  80. left: '10rpx',
  81. top: '8rpx',
  82. width: '70rpx',
  83. height: '70rpx',
  84. borderRadius: '30rpx'
  85. }
  86. }
  87. ]
  88. },
  89. path:""
  90. },
  91. }
  92. },
  93. onReady() {
  94. this._mapContext = uni.createMapContext("map", this);
  95. // 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})
  96. this._mapContext.initMarkerCluster({
  97. enableDefaultStyle: false,
  98. zoomOnClick: true,
  99. gridSize: 60,
  100. complete(res) {
  101. console.log('initMarkerCluster', res)
  102. }
  103. });
  104. this._mapContext.on("markerClusterCreate", (e) => {
  105. console.log("markerClusterCreate", e);
  106. });
  107. // this.addMarkers();
  108. },
  109. methods: {
  110. goLocation(la,lo){
  111. this.latitude = la
  112. this.longitude = lo
  113. },
  114. //生成图片
  115. generateImg(imgUrl){
  116. if(this.painter.wait != 0) return new Promise();
  117. this.painter.show = false;
  118. this.painter.base.views[1].src = imgUrl;
  119. this.painter.show = true;
  120. this.painter.wait = 1;
  121. return new Promise(resolve=>{
  122. let timer = setInterval(()=>{
  123. if(this.painter.wait === 0){
  124. clearInterval(timer);
  125. resolve(this.painter.path);
  126. }else if(this.painter.wait <= 3000){
  127. this.painter.wait += 10
  128. }else{
  129. clearInterval(timer);
  130. this.painter.wait = 0;
  131. resolve(this.painter.path);
  132. }
  133. }, 10);
  134. })
  135. },
  136. // 点击标记点时触发,e.detail = {markerId}
  137. markertap(e) {
  138. this.markersIn.forEach((item,index) => {
  139. if(e.markerId === item.id){
  140. this.generateImg(item.active.iconPath).then(()=>{
  141. item.width = item.active.width;
  142. item.height = item.active.height;
  143. item.iconPath = this.painter.path;
  144. item.isActive = true;
  145. console.log(item.latitude,item.longitude)
  146. this.latitude = item.latitude
  147. this.longitude = item.longitude
  148. this.$set(this.markersIn, index, item);
  149. this.addMarkers()
  150. })
  151. return;
  152. }else if(item.isActive){
  153. item.width = item.noActive.width;
  154. item.height = item.noActive.height;
  155. item.iconPath = item.noActive.iconPath;
  156. item.isActive = false;
  157. this.$set(this.markersIn, index, item);
  158. this.addMarkers()
  159. }
  160. })
  161. this.isUpdate = false
  162. this.$emit('moveToMarkId',e.markerId)
  163. },
  164. //点击定位标时触发,e.detail = {longitude, latitude}
  165. anchorpointtap(e) {
  166. console.log('---->定位点', e.detail);
  167. },
  168. addMarkers() {
  169. this._mapContext.addMarkers({
  170. markers: this.markersIn,
  171. clear: false,
  172. complete(res) {
  173. console.log('addMarkers', res)
  174. }
  175. })
  176. },
  177. },
  178. onShow() {
  179. this.markersIn = this.markers;
  180. },
  181. watch:{
  182. 'markers': {
  183. handler(val,oldVal) {
  184. this.markersIn = this.markers;
  185. },
  186. // immediate: true
  187. }
  188. }
  189. }
  190. </script>
  191. <style lang="scss" scoped>
  192. .content {
  193. text-align: center;
  194. height: 400rpx;
  195. }
  196. .page-section {
  197. z-index: 0;
  198. }
  199. .store-tips {
  200. width: 600rpx;
  201. height: 100rpx;
  202. margin: 10rpx auto;
  203. border-radius: 10rpx;
  204. position: absolute;
  205. top: 10rpx;
  206. left: 50%;
  207. transform: translate(-50%, 0);
  208. z-index: 2;
  209. overflow: hidden;
  210. .store-des-box {
  211. background: #fff;
  212. }
  213. .store-img {
  214. width: 80rpx;
  215. height: 80rpx;
  216. border-radius: 10rpx;
  217. margin: 10rpx;
  218. float: left;
  219. }
  220. .store-des {
  221. padding-top: 8rpx;
  222. float: left;
  223. line-height: 1;
  224. font-size: 22rpx;
  225. color: #666;
  226. padding-left: 20rpx;
  227. .store-name {
  228. font-weight: 600;
  229. color: deeppink;
  230. }
  231. }
  232. .store-clear {
  233. width: 30rpx;
  234. height: 30rpx;
  235. position: absolute;
  236. top: 7rpx;
  237. right: 7rpx;
  238. margin: 30rpx;
  239. }
  240. }
  241. .address-icon {
  242. width: 38rpx;
  243. height: 40rpx;
  244. position: absolute;
  245. top: 22%;
  246. left: 50%;
  247. z-index: 2;
  248. margin-bottom: -20rpx;
  249. margin-left: -20rpx;
  250. }
  251. .near-num {
  252. padding: 10rpx 20rpx;
  253. border-radius: 10rpx;
  254. position: absolute;
  255. top: 17%;
  256. left: 50%;
  257. z-index: 2;
  258. font-size: 24rpx;
  259. background: #fff;
  260. transform: translate(-50%, 0);
  261. }
  262. </style>