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