feat:新增地图模块,用于查找附近设备场地
This commit is contained in:
@@ -1 +1 @@
|
||||
"use strict";const e=require("../common/vendor.js"),t=require("../common/assets.js"),i={__name:"MapComponent",props:{userLocation:{type:Object,default:null},positionList:{type:Array,default:()=>[]},filteredPositions:{type:Array,default:()=>[]},searchKeyword:{type:String,default:""}},emits:["relocate","scan","showList","markerTap","mapCenterChange"],setup(i,{expose:o,emit:a}){const n=i,l=a,u=e.ref(0),d=e.ref(16),r=e.ref({longitude:116.397128,latitude:39.916527}),s=e.ref(null),c=e.ref(!1),p=()=>{l("relocate")},f=()=>{l("scan")},m=()=>{l("showList")},g=t=>{if(!t.detail||void 0===t.detail.markerId)return;const i=t.detail.markerId;if(9999===i)return void e.index.showToast({title:"这是您的位置",icon:"none"});const o=n.filteredPositions[i];o&&l("markerTap",o)},v=e=>{if("end"===e.detail.type){const{center:t}=e.detail;if(!t||void 0===t.longitude||void 0===t.latitude)return;r.value={longitude:t.longitude,latitude:t.latitude},d.value=16,s.value&&clearTimeout(s.value),s.value=setTimeout((()=>{l("mapCenterChange",r.value)}),500)}},h=e.computed((()=>{const e=[];return n.filteredPositions.forEach(((t,i)=>{t.longitude&&t.latitude&&e.push({id:i,longitude:parseFloat(t.longitude),latitude:parseFloat(t.latitude),title:t.name,iconPath:"/static/scan-icon.png",width:30,height:30,callout:{content:t.name,fontSize:14,borderRadius:8,bgColor:"#ffffff",padding:10,display:"BYCLICK"}})})),n.userLocation&&e.push({id:9999,longitude:n.userLocation.longitude,latitude:n.userLocation.latitude,title:"我的位置",iconPath:"/static/scan-icon.png",width:32,height:32,callout:{content:"我的位置",fontSize:14,borderRadius:8,bgColor:"#2196F3",color:"#ffffff",padding:10,display:"BYCLICK"}}),e}));return e.watch((()=>n.userLocation),(t=>{var i,o;t&&t.longitude&&t.latitude&&!c.value&&(i=t.longitude,o=t.latitude,r.value.longitude===i&&r.value.latitude===o||(r.value={longitude:i,latitude:o},d.value=16,e.nextTick$1((()=>{setTimeout((()=>{const t=e.index.createMapContext("mainMap");t&&t.setCenterOffset({longitude:i,latitude:o,success:()=>{},fail:()=>{t.includePoints({points:[{longitude:i,latitude:o}],padding:[0,0,0,0]})}})}),200)}))),c.value=!0)}),{immediate:!0,deep:!0}),e.onMounted((()=>{})),e.onUnmounted((()=>{s.value&&clearTimeout(s.value)})),o({mapCenter:e.computed((()=>r.value))}),(i,o)=>e.e({a:u.value,b:r.value.longitude,c:r.value.latitude,d:d.value,e:h.value,f:e.o(g),g:e.o(v),h:!r.value.longitude},(r.value.longitude,{}),{i:t._imports_0,j:e.o(p),k:t._imports_0,l:e.o(f),m:t._imports_0,n:e.o(m)})}},o=e._export_sfc(i,[["__scopeId","data-v-65e2cece"]]);wx.createComponent(o);
|
||||
"use strict";const e=require("../common/vendor.js"),t=require("../common/assets.js");if(!Array){e.resolveComponent("uv-icon")()}Math;const o={__name:"MapComponent",props:{userLocation:{type:Object,default:null},positionList:{type:Array,default:()=>[]},filteredPositions:{type:Array,default:()=>[]},searchKeyword:{type:String,default:""}},emits:["relocate","scan","showList","markerTap","mapCenterChange"],setup(o,{expose:i,emit:a}){const l=e.ref(null);e.ref([{title:"扫码使用",desc:"找到附近设备,扫描设备上的二维码"},{title:"免押金支付",desc:"无需支付押金,使用支付分免押即可完成租借"},{title:"开始使用",desc:"设备自动解锁,风扇弹出后取出即可开始使用"},{title:"归还设备",desc:"使用完毕后,按照设备规格要求将风扇还入即可结束订单"}]);const n=o,u=a,d=e.ref(!0),r=e.ref({longitude:116.397128,latitude:39.916527}),s=e.ref(17),c=e.ref([]),p=e.ref(null),f=()=>{c.value=[],n.userLocation&&c.value.push({id:0,width:32,height:32,latitude:n.userLocation.latitude,longitude:n.userLocation.longitude,title:"我的位置",callout:{content:"我的位置",color:"#ffffff",fontSize:12,borderRadius:4,bgColor:"#2196F3",padding:6,display:"BYCLICK"},customCallout:{anchorX:0,anchorY:0}}),n.filteredPositions&&n.filteredPositions.length>0&&n.filteredPositions.forEach(((e,t)=>{if(e.longitude&&e.latitude){const o=parseFloat(e.latitude),i=parseFloat(e.longitude);o>=-90&&o<=90&&i>=-180&&i<=180?c.value.push({id:t+1,width:30,height:30,latitude:o,longitude:i,title:e.name,position:e,callout:{content:e.name,color:"#333333",fontSize:12,borderRadius:4,bgColor:"#ffffff",padding:6,display:"BYCLICK"}}):console.warn(`忽略无效坐标: ${e.name}, 纬度=${o}, 经度=${i}`)}})),d.value=!1},v=e=>{e&&e.longitude&&e.latitude&&p.value&&p.value.moveToLocation({longitude:e.longitude,latitude:e.latitude,success:()=>{console.log("地图已移动到指定位置")},fail:e=>{console.error("移动地图失败:",e)}})};e.watch((()=>n.userLocation),(e=>{e&&e.longitude&&e.latitude&&(r.value={longitude:e.longitude,latitude:e.latitude},f(),v(e))}),{immediate:!0,deep:!0}),e.watch((()=>n.filteredPositions),(e=>{f()}),{deep:!0});const m=()=>{d.value=!1},g=e=>{"end"===e.type&&"drag"===e.causedBy&&p.value&&p.value.getCenterLocation({success:e=>{e.longitude&&e.latitude&&(r.value={longitude:e.longitude,latitude:e.latitude},u("mapCenterChange",r.value))}})},h=t=>{const o=t.markerId,i=c.value.find((e=>e.id===o));if(i){if(0===o)return void e.index.showToast({title:"这是您的位置",icon:"none"});i.position&&u("markerTap",i.position)}},C=e=>{const t=e.markerId,o=c.value.find((e=>e.id===t));o&&o.position&&u("markerTap",o.position)},L=e=>{console.error("地图加载失败:",e),d.value=!1},y=()=>{u("relocate")},w=()=>{u("scan")},_=()=>{u("showList")};return e.onMounted((()=>{e.nextTick$1((()=>{p.value=e.index.createMapContext("map"),f(),l.value&&l.value.init()}))})),e.onUnmounted((()=>{p.value=null})),i({mapCenter:e.computed((()=>r.value)),moveToLocation:v,updateMapMarkers:f,initCollapse:()=>{l.value&&l.value.init()}}),(o,i)=>e.e({a:r.value.longitude,b:r.value.latitude,c:c.value,d:s.value,e:e.o(g),f:e.o(h),g:e.o(C),h:e.o(m),i:e.o(L),j:d.value},(d.value,{}),{k:e.p({name:"map-fill",size:"18"}),l:e.o(y),m:t._imports_0,n:e.o(w),o:t._imports_1$1,p:e.o(_)})}},i=e._export_sfc(o,[["__scopeId","data-v-bb5e40bd"]]);wx.createComponent(i);
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
"usingComponents": {
|
||||
"uv-icon": "../node-modules/@climblee/uv-ui/components/uv-icon/uv-icon"
|
||||
}
|
||||
}
|
||||
@@ -1 +1 @@
|
||||
<view class="map-container data-v-65e2cece"><map id="mainMap" class="map data-v-65e2cece" key="{{a}}" longitude="{{b}}" latitude="{{c}}" scale="{{d}}" markers="{{e}}" show-location="{{false}}" enable-scroll="{{true}}" enable-zoom="{{true}}" enable-rotate="{{false}}" show-compass="{{false}}" bindmarkertap="{{f}}" bindregionchange="{{g}}"></map><view wx:if="{{h}}" class="map-loading data-v-65e2cece"><view class="loading-content data-v-65e2cece"><view class="loading-spinner data-v-65e2cece"></view><text class="data-v-65e2cece">地图加载中...</text></view></view><view class="map-controls data-v-65e2cece"><view class="control-btn location-control data-v-65e2cece" bindtap="{{j}}"><image class="control-icon data-v-65e2cece" src="{{i}}" mode="aspectFit"/><text class="data-v-65e2cece">我的位置</text></view><view class="control-btn scan-control main-btn data-v-65e2cece" bindtap="{{l}}"><image class="control-icon data-v-65e2cece" src="{{k}}" mode="aspectFit"/><text class="data-v-65e2cece">扫码使用</text></view><view class="control-btn list-control data-v-65e2cece" bindtap="{{n}}"><image class="control-icon data-v-65e2cece" src="{{m}}" mode="aspectFit"/><text class="data-v-65e2cece">附近场地</text></view></view></view>
|
||||
<view class="map-container data-v-bb5e40bd"><view class="map-wrapper data-v-bb5e40bd"><map id="map" class="native-map data-v-bb5e40bd" longitude="{{a}}" latitude="{{b}}" markers="{{c}}" scale="{{d}}" show-location="{{true}}" bindregionchange="{{e}}" bindmarkertap="{{f}}" bindcallouttap="{{g}}" bindupdated="{{h}}" binderror="{{i}}"></map><view wx:if="{{j}}" class="map-loading data-v-bb5e40bd"><view class="loading-content data-v-bb5e40bd"><view class="loading-spinner data-v-bb5e40bd"></view><text class="data-v-bb5e40bd">地图加载中...</text></view></view></view><view class="map-controls data-v-bb5e40bd"><view class="control-btn location-control data-v-bb5e40bd" bindtap="{{l}}"><uv-icon wx:if="{{k}}" class="data-v-bb5e40bd" u-i="bb5e40bd-0" bind:__l="__l" u-p="{{k}}"></uv-icon><text class="data-v-bb5e40bd" style="margin-left:8rpx">我的位置</text></view><view class="control-btn scan-control main-btn data-v-bb5e40bd" bindtap="{{n}}"><image class="control-icon data-v-bb5e40bd" src="{{m}}" mode="aspectFit"/><text class="data-v-bb5e40bd">扫码使用</text></view><view class="control-btn list-control data-v-bb5e40bd" bindtap="{{p}}"><image class="control-icon data-v-bb5e40bd" src="{{o}}" mode="aspectFit"/><text class="data-v-bb5e40bd">附近设备</text></view></view></view>
|
||||
@@ -1 +1 @@
|
||||
.map-container.data-v-65e2cece{flex:1;position:relative;height:100vh;width:100%}.map-container .map.data-v-65e2cece{width:100%;height:100%}.map-container .map-loading.data-v-65e2cece{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.8);display:flex;justify-content:center;align-items:center;z-index:10}.map-container .map-loading .loading-content.data-v-65e2cece{display:flex;flex-direction:column;align-items:center;justify-content:center}.map-container .map-loading .loading-content .loading-spinner.data-v-65e2cece{width:60rpx;height:60rpx;border:8rpx solid #f3f3f3;border-top:8rpx solid #3498db;border-radius:50%;animation:spin-65e2cece 1s linear infinite;margin-bottom:20rpx}.map-container .map-loading .loading-content text.data-v-65e2cece{font-size:32rpx;color:#333;font-weight:500}.map-container .map-controls.data-v-65e2cece{position:absolute;right:30rpx;bottom:20rpx;left:30rpx;display:flex;justify-content:center;align-items:center;gap:30rpx}.map-container .map-controls .control-btn.data-v-65e2cece{min-width:140rpx;height:80rpx;background:#fff;border-radius:40rpx;display:flex;flex-direction:row;align-items:center;justify-content:center;box-shadow:0 4rpx 12rpx rgba(0,0,0,.1);transition:all .2s ease;padding:0 20rpx}.map-container .map-controls .control-btn.data-v-65e2cece:active{transform:scale(.95)}.map-container .map-controls .control-btn .control-icon.data-v-65e2cece{width:32rpx;height:32rpx;margin-right:12rpx}.map-container .map-controls .control-btn text.data-v-65e2cece{font-size:26rpx;color:#333;white-space:nowrap;font-weight:500}.map-container .map-controls .control-btn.main-btn.data-v-65e2cece{min-width:160rpx;height:90rpx;box-shadow:0 6rpx 20rpx rgba(33,150,243,.4);transform:translateY(-5rpx)}.map-container .map-controls .control-btn.main-btn .control-icon.data-v-65e2cece{width:36rpx;height:36rpx;margin-right:16rpx}.map-container .map-controls .control-btn.main-btn text.data-v-65e2cece{font-size:28rpx;font-weight:600}.map-container .map-controls .control-btn.main-btn.data-v-65e2cece:active{transform:translateY(-5rpx) scale(.95)}.map-container .map-controls .scan-control.data-v-65e2cece{background:#2196f3}.map-container .map-controls .scan-control .control-icon.data-v-65e2cece{filter:brightness(0) invert(1)}.map-container .map-controls .scan-control text.data-v-65e2cece{color:#fff}.map-container .map-controls .list-control.data-v-65e2cece{background:#4caf50}.map-container .map-controls .list-control .control-icon.data-v-65e2cece{filter:brightness(0) invert(1)}.map-container .map-controls .list-control text.data-v-65e2cece{color:#fff}.map-container .map-controls .location-control.data-v-65e2cece{background:#fff;border:2rpx solid #e0e0e0}.map-container .map-controls .location-control .control-icon.data-v-65e2cece{filter:none}.map-container .map-controls .location-control text.data-v-65e2cece{color:#333}@keyframes spin-65e2cece{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
|
||||
.map-container.data-v-bb5e40bd{flex:1;position:relative;height:60vh;width:92%;margin:10rpx auto 30rpx;border-radius:24rpx;overflow:hidden;box-shadow:0 4rpx 16rpx rgba(0,0,0,.1)}.map-container .map-wrapper.data-v-bb5e40bd{width:100%;height:100%;position:relative;overflow:hidden;border-radius:24rpx}.map-container .map-wrapper .native-map.data-v-bb5e40bd{width:100%;height:100%;display:block;border-radius:24rpx}.map-container .map-loading.data-v-bb5e40bd{position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(255,255,255,.8);display:flex;justify-content:center;align-items:center;z-index:10}.map-container .map-loading .loading-content.data-v-bb5e40bd{display:flex;flex-direction:column;align-items:center;justify-content:center}.map-container .map-loading .loading-content .loading-spinner.data-v-bb5e40bd{width:60rpx;height:60rpx;border:8rpx solid #f3f3f3;border-top:8rpx solid #3498db;border-radius:50%;animation:spin-bb5e40bd 1s linear infinite;margin-bottom:20rpx}.map-container .map-loading .loading-content text.data-v-bb5e40bd{font-size:32rpx;color:#333;font-weight:500}.map-container .map-controls.data-v-bb5e40bd{position:absolute;right:20rpx;bottom:20rpx;left:20rpx;display:flex;justify-content:center;align-items:center;gap:20rpx}.map-container .map-controls .control-btn.data-v-bb5e40bd{min-width:120rpx;height:70rpx;background:#fff;border-radius:35rpx;display:flex;flex-direction:row;align-items:center;justify-content:center;box-shadow:0 4rpx 12rpx rgba(0,0,0,.1);transition:all .2s ease;padding:0 16rpx}.map-container .map-controls .control-btn.data-v-bb5e40bd:active{transform:scale(.95)}.map-container .map-controls .control-btn .control-icon.data-v-bb5e40bd{width:32rpx;height:32rpx;margin-right:12rpx}.map-container .map-controls .control-btn text.data-v-bb5e40bd{font-size:26rpx;color:#333;white-space:nowrap;font-weight:500}.map-container .map-controls .control-btn.main-btn.data-v-bb5e40bd{min-width:140rpx;height:80rpx;box-shadow:0 6rpx 20rpx rgba(33,150,243,.4);transform:translateY(-5rpx)}.map-container .map-controls .control-btn.main-btn .control-icon.data-v-bb5e40bd{width:36rpx;height:36rpx;margin-right:16rpx}.map-container .map-controls .control-btn.main-btn text.data-v-bb5e40bd{font-size:28rpx;font-weight:600}.map-container .map-controls .control-btn.main-btn.data-v-bb5e40bd:active{transform:translateY(-5rpx) scale(.95)}.map-container .map-controls .scan-control.data-v-bb5e40bd{background:#2196f3}.map-container .map-controls .scan-control .control-icon.data-v-bb5e40bd{filter:brightness(0) invert(1)}.map-container .map-controls .scan-control text.data-v-bb5e40bd{color:#fff}.map-container .map-controls .list-control.data-v-bb5e40bd{background:#4caf50}.map-container .map-controls .list-control .control-icon.data-v-bb5e40bd{filter:brightness(0) invert(1)}.map-container .map-controls .list-control text.data-v-bb5e40bd{color:#fff}.map-container .map-controls .location-control.data-v-bb5e40bd{background:#fff;border:2rpx solid #e0e0e0}.map-container .map-controls .location-control .control-icon.data-v-bb5e40bd{filter:none}.map-container .map-controls .location-control text.data-v-bb5e40bd{color:#333}@keyframes spin-bb5e40bd{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
|
||||
|
||||
Reference in New Issue
Block a user