8 changed files with 235 additions and 22 deletions
@ -0,0 +1,102 @@ |
|||||
|
<!-- |
||||
|
@ 作者: 秦东 |
||||
|
@ 时间: 2024-08-05 16:11:35 |
||||
|
@ 备注: |
||||
|
--> |
||||
|
<template> |
||||
|
<div> |
||||
|
<el-input v-model="address" disabled /> |
||||
|
<div :id="mapId" ref="myBaiduMapView" class="smallMapView"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang='ts' setup> |
||||
|
const props = withDefaults( |
||||
|
defineProps<{ |
||||
|
address: any |
||||
|
}>(), |
||||
|
{} |
||||
|
) |
||||
|
let mapId = "baiduMapView"+ Math.ceil(Math.random()); |
||||
|
const mapObject = ref<any>() |
||||
|
const mapShow = ref(false) |
||||
|
const address = ref<string>(); //行政组织树数据 |
||||
|
const lngLat = ref<string>(); //行政组织树数据 |
||||
|
const longitude= ref<number>(117.14272945140574) |
||||
|
const latitude= ref<number>(35.91808471435389) |
||||
|
const loadJScript = () => { |
||||
|
const script = document.createElement('script'); |
||||
|
script.type = 'text/javascript'; |
||||
|
script.src = 'https://api.map.baidu.com/getscript?v=3.0&ak=ljiKlTAsS7SNVqDM16IUwRVFFhrvbxiF'; |
||||
|
script.onload = () => { |
||||
|
mapInit(mapObject) |
||||
|
} |
||||
|
document.body.appendChild(script); |
||||
|
} |
||||
|
// 初始化地图 |
||||
|
const mapInit = (maps:any) => { |
||||
|
const map = new window.BMap.Map(mapId); // 创建Map实例 |
||||
|
var opts = {type: BMAP_NAVIGATION_CONTROL_LARGE} |
||||
|
map.addControl(new BMap.NavigationControl(opts)); //添加控件 |
||||
|
map.addControl(new BMap.ScaleControl()); |
||||
|
map.addControl(new BMap.MapTypeControl()); |
||||
|
map.enableScrollWheelZoom(); // 启用滚轮放大缩小 |
||||
|
const point = new BMap.Point(longitude.value,latitude.value); // 创建点坐标 |
||||
|
map.centerAndZoom(point, 16); |
||||
|
var marker = new BMap.Marker(point); |
||||
|
map.addOverlay(marker); |
||||
|
} |
||||
|
//监听地图地址变话 |
||||
|
watch(()=>props.address,(val:any)=>{ |
||||
|
console.log("监听地图地址变话",val); |
||||
|
if(val != null && val != "") { |
||||
|
let adresAry = val.split('|*@*|') |
||||
|
if(adresAry.length >0){ |
||||
|
address.value = adresAry[0] |
||||
|
if(adresAry.length >=1){ |
||||
|
lngLat.value = adresAry[adresAry.length-1] |
||||
|
} |
||||
|
} |
||||
|
// console.log("加载地址--2-->",value.value,adresAry,address.value,lngLat.value) |
||||
|
if(lngLat.value != null && lngLat.value != ""){ |
||||
|
let lnogLate = lngLat.value.split(","); |
||||
|
if(lnogLate.length >= 2){ |
||||
|
longitude.value = lnogLate[0] |
||||
|
latitude.value = lnogLate[lnogLate.length - 1] |
||||
|
} |
||||
|
} |
||||
|
// console.log("加载地址--31-->",val,adresAry,address.value,lngLat.value,longitude.value,latitude.value) |
||||
|
mapInit(mapObject) |
||||
|
} |
||||
|
},{deep:true}) |
||||
|
onMounted(()=>{ |
||||
|
if(props.address != null && props.address != "") { |
||||
|
let adresAry = props.address.split('|*@*|') |
||||
|
if(adresAry.length >0){ |
||||
|
address.value = adresAry[0] |
||||
|
if(adresAry.length >=1){ |
||||
|
lngLat.value = adresAry[adresAry.length-1] |
||||
|
} |
||||
|
} |
||||
|
// console.log("加载地址--2-->",value.value,adresAry,address.value,lngLat.value) |
||||
|
if(lngLat.value != null && lngLat.value != ""){ |
||||
|
let lnogLate = lngLat.value.split(","); |
||||
|
if(lnogLate.length >= 2){ |
||||
|
longitude.value = lnogLate[0] |
||||
|
latitude.value = lnogLate[lnogLate.length - 1] |
||||
|
} |
||||
|
} |
||||
|
// console.log("加载地址--31-->",val,adresAry,address.value,lngLat.value,longitude.value,latitude.value) |
||||
|
mapInit(mapObject) |
||||
|
} |
||||
|
nextTick(()=>{ |
||||
|
loadJScript() |
||||
|
}) |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<style lang='scss' scoped> |
||||
|
.smallMapView{ |
||||
|
width:100%; |
||||
|
height:400px; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue