diff --git a/pages/component/map/map.uvue b/pages/component/map/map.uvue index 4d86cb482acbf36dae82af3d1da3ba8de6b9c063..60025f01ed3fcfcbfd8ec7f65012973902cebc04 100644 --- a/pages/component/map/map.uvue +++ b/pages/component/map/map.uvue @@ -1,21 +1,22 @@ @@ -44,20 +48,34 @@ borderWidth : number, borderColor : string, bgColor : string, - padding : string, + padding : number, display : string } + type Label = { + content : string, + color : string, + fontSize : number, + x : number, + y : number, + borderColor: string + borderWidth : number, + borderRadius: number, + bgColor : string, + padding:number + } + type Markers = { id : number, latitude : number, longitude : number, - title ?: string - zIndex ?: string, + title ?: string, iconPath : string, + zIndex ?: string, rotate ?: number, width ?: number, height ?: number, + label?:Label, anchor ?: Anchor, callout ?: Callout } @@ -94,6 +112,20 @@ fillColor : string; } + type PositionType = { + left: number, + top: number, + width: number, + height: number + } + + type ControlsType = { + id?: number; + position: PositionType; + iconPath:string; + clickable?: boolean; + } + const testMarkers = [{ id: 0, latitude: 39.989631, @@ -116,7 +148,7 @@ borderWidth: 1, borderColor: '#333300', bgColor: '#CCFF99', - padding: '5', + padding: 5, display: 'ALWAYS' } }, @@ -137,16 +169,17 @@ content: '首都北京\n天安门', color: '#00BFFF', fontSize: 12, - borderRadius: 2, - borderWidth: 0, + borderRadius:10, + borderWidth: 2, borderColor: '#333300', bgColor: '#CCFF11', - padding: '1', + padding: 5, display: 'ALWAYS' } } ]; + const testPolyline = [{ points: [{ latitude: 39.925539, @@ -157,7 +190,7 @@ longitude: 116.520285 }], color: '#FFCCFF', - width: 7, + width:7, dottedLine: true, arrowLine: true, borderColor: '#000000', @@ -186,7 +219,7 @@ }], color: '#CCFFFF', width: 5, - dottedLine: true, + dottedLine: false, arrowLine: true, borderColor: '#CC0000', borderWidth: 3 @@ -276,50 +309,25 @@ } ]; - type ControlsType = { - id?: number; - position: PositionType; - iconPath:string; - clickable?: boolean; - } - - type PositionType = { - left: number, - top: number, - width: number, - height: number - } + const map = ref(null as MapContext | null); const location = ref({ longitude: 116.39742, latitude: 39.909 }); - const controls = ref( []as ControlsType[]); - const showLocation = ref(false); - const scale = ref(13); - const showCompass = ref(true); - const enable3D = ref(true); - const enableOverlooking = ref(true); - const enableZoom = ref(true); - const enableScroll = ref(true); - const enableRotate = ref(true); - const enableSatellite = ref(false); - const enableTraffic = ref(false); - const polyline = ref([] as Polyline[]); - const markers = ref([] as Markers[]); - const polygons = ref([] as Polygons[]); - const circles = ref([] as Circles[]); - const includePoints = ref([] as Points[]); const rotate = ref(0); const skew = ref(0); - const map = ref(null as MapContext | null); const autoTest = ref(false); - const getCenterLocationTest = ref({}); - const getRegionTest = ref({}); onReady(() => { map.value = uni.createMapContext("map1", getCurrentInstance()!.proxy!) }); + const scale = ref(13); + const confirm_scale_input = (value: number) => { + scale.value = value + }; + + const controls = ref([]as ControlsType[]); const addControls = () => { - controls.value = [{ + controls.value.push({ id: 1, position: { left: 5, @@ -329,16 +337,72 @@ }, iconPath: '../../../static/uni.png', clickable: true - }] + }) } - const confirm_scale_input = (value: number) => { - scale.value = value - }; + const showLocation = ref(false); const change_show_location = (checked : boolean)=>{ showLocation.value = checked } + const includePoints = ref([] as Points[]); + const includePoint = () => { + includePoints.value = testIncludePoints; + }; + + + const markers = reactive([] as Markers[]); + const addMarkers = () => { + markers.push(...testMarkers); + }; + + const addMarkersLabel = () => { + markers.forEach((marker, index) => { + marker.label = { + content: 'Hello Label'+ (index + 1), + color: '#aa00ff', + fontSize: 12, + x: 5, + y: 0, + borderColor:'#333300', + borderWidth:2, + borderRadius: 20, + bgColor: '#aaffff', + padding: 10 + }; + }); + }; + + + const polyline = ref([] as Polyline[]); + const addPolyline = () => { + scale.value = 12; + polyline.value = testPolyline; + }; + + + const polygons = ref([] as Polygons[]); + const addPolygons = () => { + scale.value = 10; + polygons.value = testPolygons; + }; + + + const circles = ref([] as Circles[]); + const addCircles = () => { + scale.value = 10; + circles.value = testCircles; + }; + + const showCompass = ref(true); + const enable3D = ref(true); + const enableOverlooking = ref(true); + const enableZoom = ref(true); + const enableScroll = ref(true); + const enableRotate = ref(true); + const enableSatellite = ref(false); + const enableTraffic = ref(false); + const enableThreeD = (e)=>{ enable3D.value = e.detail.value; } @@ -369,55 +433,42 @@ enableTraffic.value = e.detail.value; }; - const addMarkers = () => { - markers.value = testMarkers; - }; - - const addPolygons = () => { - polygons.value = testPolygons; - }; - - const addPolyline = () => { - polyline.value = testPolyline; - }; - - const addCircles = () => { - circles.value = testCircles; - }; - - const includePoint = () => { - includePoints.value = testIncludePoints; - }; + const getCenterLocationTest = ref({}); const handleGetCenterLocation = () => { if (map.value) { map.value.getCenterLocation({ success: ret => { - console.log('getCenterLocation',ret); - // console.log(JSON.stringify(ret)); + // console.log('getCenterLocation',ret); getCenterLocationTest.value = ret; - uni.showModal({ - content: JSON.stringify(ret) - }); + if(!autoTest.value){ + uni.showModal({ + content: JSON.stringify(ret) + }); + } } }); } }; + const getRegionTest = ref({}); const handleGetRegion = () => { if (map.value) { map.value.getRegion({ success: ret => { - console.log(JSON.stringify(ret)); + // console.log('getRegion',JSON.stringify(ret)); getRegionTest.value = ret; - uni.showModal({ - content: JSON.stringify(ret) - }); + if(!autoTest.value){ + uni.showModal({ + content: JSON.stringify(ret) + }); + } } }); } }; + const handleTranslateMarker = () => { if (map.value) { map.value.translateMarker({ @@ -435,35 +486,76 @@ success: ret => { console.log('handleTranslateMarker',JSON.stringify(ret)); }, - fail: ret => { - console.log('handleTranslateMarker',JSON.stringify(ret)); + fail: error => { + console.log(error) } }); } }; - const maptap = (e) => { + + const handleGetScale = () => { + if (map.value) { + map.value.getScale({ + success: res => { + // console.log('getScale',res); + scale.value = res.scale + if(!autoTest.value){ + uni.showModal({ + content: '当前地图的缩放级别为:'+ res.scale + }); + } + }, + fail: error => { + console.log(error) + }, + }); + } + }; + + const handleMoveToLocation = () => { + if (map.value) { + map.value.moveToLocation({ + latitude: 39.909, + longitude: 116.39742, + success: res => { + // console.log('moveToLocation',res); + if(!autoTest.value){ + uni.showModal({ + content: JSON.stringify(res) + }); + } + }, + fail: error => { + console.log(error) + } + }); + } + }; + + const maptap = (e:UniEvent) => { + // console.log('点击地图时触发',e) uni.showModal({ content: JSON.stringify(e) }); }; const onmarkertap = (e:UniEvent) => { - console.log('点击标记点时触发',e) + // console.log('点击标记点时触发',e) uni.showModal({ content: JSON.stringify(e) }); }; const oncontroltap = (e:UniEvent) => { - console.log('点击控件时触发',e) + // console.log('点击控件时触发',e) uni.showModal({ content: JSON.stringify(e) }); }; const oncallouttap = (e:UniEvent) => { - console.log('点击标记点对应的气泡时触发',e) + // console.log('点击标记点对应的气泡时触发',e) uni.showModal({ content: JSON.stringify(e) }); @@ -477,7 +569,8 @@ console.log('视野发生变化时触发',e) }; - const onpoitap = (e) => { + const onpoitap = (e:UniEvent) => { + // console.log('点击地图poi点时触发',e) uni.showModal({ content: JSON.stringify(e) });