| | |
| | | <template> |
| | | <baidu-map class="bigMap" ref="map" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 85.126263, lat: 45.603813}" :zoom="17" map-type="BMAP_SATELLITE_MAP" @ready="initMap"> |
| | | <!-- <bm-polygon :path="polygonPath1" stroke-color="blue" fillColor="blue" :fillOpacity="1" :stroke-weight="2"/>--> |
| | | <!-- <bm-polygon :path="polygonPath2" stroke-color="red" fillColor="red" :fillOpacity="1" :stroke-weight="2"/>--> |
| | | <!-- <bm-overlay pane="mapPane" class="bg-pic" @draw="initMap">--> |
| | | <bm-ground class="picBg" :bounds="{ne: {lng: 85.129048, lat: 45.605790}, sw:{lng: 85.122984, lat: 45.592812}}" imageURL="/bigMap2.png" opacity="1" :displayOnMaxLevel="18" :zIndex="1"></bm-ground> |
| | | <!-- </bm-overlay>--> |
| | | <bm-overlay pane="mapPane" class="polys" @draw="initMap"> |
| | | <bm-polygon :path="polygonPath3" stroke-color="yellow" fillColor="yellow" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/> |
| | | <bm-label content="1" :position="{lng: 85.127634, lat: 45.604176}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="1" :zIndex="3"/> |
| | | <!-- <bm-polygon :path="polygonPath4" stroke-color="red" fillColor="red" :fillOpacity="1" :stroke-weight="2"/>--> |
| | | <bm-polygon :path="polygonPath5" stroke-color="#01007f" fillColor="#01007f" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/> |
| | | <bm-label content="2" :position="{lng: 85.126928, lat: 45.603873}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="2" :zIndex="3"/> |
| | | <bm-polygon :path="polygonPath6" stroke-color="#ff00fa" fillColor="#ff00fa" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/> |
| | | <bm-label content="3" :position="{lng: 85.123940, lat: 45.604109}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="3" :zIndex="3"/> |
| | | <bm-polygon :path="polygonPath7" stroke-color="#02ff02" fillColor="#02ff02" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/> |
| | | <bm-label content="4" :position="{lng: 85.125489, lat: 45.603525}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="4" :zIndex="3"/> |
| | | <bm-polygon :path="polygonPath8" stroke-color="#028002" fillColor="#028002" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/> |
| | | <bm-label content="5" :position="{lng: 85.126150, lat: 45.603173}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="5" :zIndex="3"/> |
| | | <bm-polygon :path="polygonPath9" stroke-color="#008081" fillColor="#008081" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/> |
| | | <bm-label content="6" :position="{lng: 85.126805, lat: 45.602739}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="6" :zIndex="3"/> |
| | | </bm-overlay> |
| | | <!-- <bm-ground class="picBg" :bounds="{ne: {lng: 85.127749, lat: 45.600383}, sw:{lng: 85.106981, lat: 45.592463}}" imageURL="/bigMapPic.jpg" opacity="0.5"></bm-ground>--> |
| | | <baidu-map class="bigMap" ref="map" ak="Z4tYehNEVsdeMw3Mjspdn77pV50ffc8t" v="3.0" type="API" :scroll-wheel-zoom="true" :center="{lng: 87.681678, lat: 43.943787}" :zoom="18" map-type="BMAP_SATELLITE_MAP" @ready="initMap"> |
| | | <!-- <bm-polygon :path="polygonPath1" stroke-color="blue" fillColor="blue" :fillOpacity="1" :stroke-weight="2"/>--> |
| | | <!-- <bm-polygon :path="polygonPath2" stroke-color="red" fillColor="red" :fillOpacity="1" :stroke-weight="2"/>--> |
| | | <!-- <bm-overlay pane="mapPane" class="bg-pic" @draw="initMap">--> |
| | | <!-- <bm-ground class="picBg" :bounds="{ne: {lng: 85.129048, lat: 45.605790}, sw:{lng: 85.122984, lat: 45.592812}}" imageURL="/bigMap2.png" opacity="1" :displayOnMaxLevel="18" :zIndex="1"></bm-ground>--> |
| | | <!-- </bm-overlay>--> |
| | | <!-- <bm-overlay pane="mapPane" class="polys" @draw="initMap">--> |
| | | <!-- <bm-polygon :path="polygonPath3" stroke-color="yellow" fillColor="yellow" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>--> |
| | | <!-- <bm-label content="1" :position="{lng: 85.127634, lat: 45.604176}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="1" :zIndex="3"/>--> |
| | | <!-- <bm-polygon :path="polygonPath4" stroke-color="red" fillColor="red" :fillOpacity="1" :stroke-weight="2"/>--> |
| | | <!-- <bm-polygon :path="polygonPath5" stroke-color="#01007f" fillColor="#01007f" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>--> |
| | | <!-- <bm-label content="2" :position="{lng: 85.126928, lat: 45.603873}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="2" :zIndex="3"/>--> |
| | | <!-- <bm-polygon :path="polygonPath6" stroke-color="#ff00fa" fillColor="#ff00fa" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>--> |
| | | <!-- <bm-label content="3" :position="{lng: 85.123940, lat: 45.604109}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="3" :zIndex="3"/>--> |
| | | <!-- <bm-polygon :path="polygonPath7" stroke-color="#02ff02" fillColor="#02ff02" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>--> |
| | | <!-- <bm-label content="4" :position="{lng: 85.125489, lat: 45.603525}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="4" :zIndex="3"/>--> |
| | | <!-- <bm-polygon :path="polygonPath8" stroke-color="#028002" fillColor="#028002" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>--> |
| | | <!-- <bm-label content="5" :position="{lng: 85.126150, lat: 45.603173}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="5" :zIndex="3"/>--> |
| | | <!-- <bm-polygon :path="polygonPath9" stroke-color="#008081" fillColor="#008081" :fillOpacity="1" :stroke-weight="2" :zIndex="2"/>--> |
| | | <!-- <bm-label content="6" :position="{lng: 85.126805, lat: 45.602739}" :labelStyle="{color: '#000000', fontSize : '24px'}" title="6" :zIndex="3"/>--> |
| | | <!-- </bm-overlay>--> |
| | | <!-- <bm-ground class="picBg" :bounds="{ne: {lng: 85.127749, lat: 45.600383}, sw:{lng: 85.106981, lat: 45.592463}}" imageURL="/bigMapPic.jpg" opacity="0.5"></bm-ground>--> |
| | | <bm-map-type :map-types="['BMAP_SATELLITE_MAP','BMAP_NORMAL_MAP' ]" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> |
| | | <!-- <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>--> |
| | | <!-- <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-navigation>--> |
| | | </baidu-map> |
| | | </template> |
| | | |
| | |
| | | lat: number | null |
| | | } |
| | | export default defineComponent({ |
| | | name: 'map', |
| | | components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel }, |
| | | setup() { |
| | | const state = reactive<TableDataState>({ |
| | | // polygonPath1: [], |
| | | // polygonPath2: [], |
| | | polygonPath3: [], |
| | | // polygonPath4: [], |
| | | polygonPath5: [], |
| | | polygonPath6: [], |
| | | polygonPath7: [], |
| | | polygonPath8: [], |
| | | polygonPath9: [] |
| | | }); |
| | | name: 'map', |
| | | components: {BaiduMap, BmOverlay, BmGround, BmMapType, BmNavigation, BmPolygon, BmLabel }, |
| | | setup() { |
| | | const state = reactive<TableDataState>({ |
| | | // polygonPath1: [], |
| | | // polygonPath2: [], |
| | | polygonPath3: [], |
| | | // polygonPath4: [], |
| | | polygonPath5: [], |
| | | polygonPath6: [], |
| | | polygonPath7: [], |
| | | polygonPath8: [], |
| | | polygonPath9: [] |
| | | }); |
| | | |
| | | // 页面加载时 |
| | | onMounted(() => { |
| | | const baseSize = 38; |
| | | /* 设置 rem 函数 */ |
| | | function setRem() { |
| | | const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例,可根据自己需要修改 */ |
| | | document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */ |
| | | console.log('切换尺寸>>',document.documentElement.style.fontSize) |
| | | } |
| | | setRem();/* 初始化 rem */ |
| | | |
| | | window.onresize = () => { |
| | | setRem();/* 改变窗口大小时重新设置 rem */ |
| | | console.log('执行切换') |
| | | } |
| | | }); |
| | | const map = reactive({}) |
| | | const initMap=()=>{ |
| | | // state.polygonPath1 = [{ lng: 85.126523, lat: 45.604790 }, { lng: 85.126364, lat: 45.604687 }, { lng: 85.126775, lat: 45.604416 }, { lng: 85.126933, lat: 45.604528 }], |
| | | // state.polygonPath2 = [{ lng: 85.127235, lat: 45.604406 }, { lng: 85.126908, lat: 45.604141 }, { lng: 85.127041, lat: 45.604046 }, { lng: 85.127396, lat: 45.604313 }], |
| | | state.polygonPath3 = [{ lng: 85.127634, lat: 45.604176 }, { lng: 85.127331, lat: 45.603931 }, { lng: 85.127885, lat: 45.603602 }, { lng: 85.128178, lat: 45.603853 }], |
| | | // state.polygonPath4 = [{ lng: 85.125247, lat: 45.604832 }, { lng: 85.124665, lat: 45.604483 }, { lng: 85.125910, lat: 45.603576 }, { lng: 85.126564, lat: 45.604053 }], |
| | | state.polygonPath5 = [{ lng: 85.126928, lat: 45.603873 }, { lng: 85.126253, lat: 45.603399 }, { lng: 85.126923, lat: 45.602951 }, { lng: 85.127580, lat: 45.603464 }], |
| | | state.polygonPath6 = [{ lng: 85.123940, lat: 45.604109 }, { lng: 85.123651, lat: 45.603782 }, { lng: 85.124211, lat: 45.603426 }, { lng: 85.124538, lat: 45.603693 }], |
| | | state.polygonPath7 = [{ lng: 85.125489, lat: 45.603525 }, { lng: 85.124729, lat: 45.603024 }, { lng: 85.125304, lat: 45.602703 }, { lng: 85.125988, lat: 45.603217 }], |
| | | state.polygonPath8 = [{ lng: 85.126150, lat: 45.603173 }, { lng: 85.125339, lat: 45.602580 }, { lng: 85.125847, lat: 45.602235 }, { lng: 85.126700, lat: 45.602838 }], |
| | | state.polygonPath9 = [{ lng: 85.126805, lat: 45.602739 }, { lng: 85.125929, lat: 45.602127 }, { lng: 85.126505, lat: 45.601715 }, { lng: 85.127309, lat: 45.602365 }] |
| | | console.log(map,'map') |
| | | // const poly = document.getElementsByClassName('polys') |
| | | // console.log(poly) |
| | | // poly.attributes.style.zIndex = 9999999 |
| | | // console.log(poly,'poly') |
| | | // 页面加载时 |
| | | onMounted(() => { |
| | | const baseSize = 38; |
| | | /* 设置 rem 函数 */ |
| | | function setRem() { |
| | | const scale = document.documentElement.clientWidth / 1920; /* 当前页面宽度缩放比例,可根据自己需要修改 */ |
| | | document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";/* 设置页面根节点字体大小 */ |
| | | console.log('切换尺寸>>',document.documentElement.style.fontSize) |
| | | } |
| | | setRem();/* 初始化 rem */ |
| | | |
| | | return { |
| | | initMap, |
| | | map, |
| | | ...toRefs(state) |
| | | }; |
| | | window.onresize = () => { |
| | | setRem();/* 改变窗口大小时重新设置 rem */ |
| | | console.log('执行切换') |
| | | } |
| | | }); |
| | | const map = reactive({}) |
| | | const initMap=()=>{ |
| | | // state.polygonPath1 = [{ lng: 85.126523, lat: 45.604790 }, { lng: 85.126364, lat: 45.604687 }, { lng: 85.126775, lat: 45.604416 }, { lng: 85.126933, lat: 45.604528 }], |
| | | // state.polygonPath2 = [{ lng: 85.127235, lat: 45.604406 }, { lng: 85.126908, lat: 45.604141 }, { lng: 85.127041, lat: 45.604046 }, { lng: 85.127396, lat: 45.604313 }], |
| | | state.polygonPath3 = [{ lng: 85.127634, lat: 45.604176 }, { lng: 85.127331, lat: 45.603931 }, { lng: 85.127885, lat: 45.603602 }, { lng: 85.128178, lat: 45.603853 }], |
| | | // state.polygonPath4 = [{ lng: 85.125247, lat: 45.604832 }, { lng: 85.124665, lat: 45.604483 }, { lng: 85.125910, lat: 45.603576 }, { lng: 85.126564, lat: 45.604053 }], |
| | | state.polygonPath5 = [{ lng: 85.126928, lat: 45.603873 }, { lng: 85.126253, lat: 45.603399 }, { lng: 85.126923, lat: 45.602951 }, { lng: 85.127580, lat: 45.603464 }], |
| | | state.polygonPath6 = [{ lng: 85.123940, lat: 45.604109 }, { lng: 85.123651, lat: 45.603782 }, { lng: 85.124211, lat: 45.603426 }, { lng: 85.124538, lat: 45.603693 }], |
| | | state.polygonPath7 = [{ lng: 85.125489, lat: 45.603525 }, { lng: 85.124729, lat: 45.603024 }, { lng: 85.125304, lat: 45.602703 }, { lng: 85.125988, lat: 45.603217 }], |
| | | state.polygonPath8 = [{ lng: 85.126150, lat: 45.603173 }, { lng: 85.125339, lat: 45.602580 }, { lng: 85.125847, lat: 45.602235 }, { lng: 85.126700, lat: 45.602838 }], |
| | | state.polygonPath9 = [{ lng: 85.126805, lat: 45.602739 }, { lng: 85.125929, lat: 45.602127 }, { lng: 85.126505, lat: 45.601715 }, { lng: 85.127309, lat: 45.602365 }] |
| | | console.log(map,'map') |
| | | // const poly = document.getElementsByClassName('polys') |
| | | // console.log(poly) |
| | | // poly.attributes.style.zIndex = 9999999 |
| | | // console.log(poly,'poly') |
| | | } |
| | | |
| | | return { |
| | | initMap, |
| | | map, |
| | | ...toRefs(state) |
| | | }; |
| | | } |
| | | }); |
| | | </script> |
| | | <style lang="scss" scoped> |