feat:新增地图视图效果，接口待对接
This commit is contained in:
@@ -0,0 +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);
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
@@ -0,0 +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>
|
||||
@@ -0,0 +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)}}
|
||||
Reference in New Issue
Block a user