You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.9 KiB
113 lines
2.9 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-17 15:37:59
|
|
@ 备注: 地图视图
|
|
-->
|
|
<script lang='ts' setup>
|
|
const props = defineProps({
|
|
searchSend:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
viewSetup:{
|
|
type:Object,
|
|
default(){
|
|
return {}
|
|
}
|
|
},
|
|
drawerWith:{
|
|
type:Number,
|
|
default:0
|
|
}
|
|
});
|
|
let mapId = "pickMapView"+ Math.ceil(Math.random());
|
|
const longitude= ref<number>(117.14272945140574)
|
|
const latitude= ref<number>(35.91808471435389)
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-19 14:55:24
|
|
@ 功能: 引入外部js
|
|
*/
|
|
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()
|
|
}
|
|
document.body.appendChild(script);
|
|
}
|
|
//初始化地图
|
|
const mapInit = () => {
|
|
const map = new window.BMap.Map("pickMapView"); // 创建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(); // 启用滚轮放大缩小
|
|
|
|
mapHandle(map)
|
|
|
|
// const point = new BMap.Point(longitude.value,latitude.value); // 创建点坐标
|
|
// map.centerAndZoom(point, 16);
|
|
// var label = new BMap.Label("山东恒信高科", { // 创建文本标注
|
|
// position: point, // 设置标注的地理位置
|
|
// offset: new BMap.Size(10, 20) // 设置标注的偏移量
|
|
// }).addEventListener("click", function(){
|
|
// alert("您点击了标注");
|
|
// });
|
|
|
|
// // var marker = new BMap.Marker(point);
|
|
// map.addOverlay(label);
|
|
// const points = new BMap.Point(117.14372945240574,35.92808471455389); // 创建点坐标
|
|
// map.centerAndZoom(points, 16);
|
|
// var markerd = new BMap.Marker(points);
|
|
// map.addOverlay(markerd);
|
|
|
|
}
|
|
|
|
/**
|
|
@ 作者: 秦东
|
|
@ 时间: 2024-07-19 15:31:05
|
|
@ 功能: 处理地图时间
|
|
*/
|
|
const mapHandle = (map:any) => {
|
|
let blz = []
|
|
for(var i = 1; i < 5;){
|
|
const points = new BMap.Point(117.14372945240574,35.92808471455389+i); // 创建点坐标
|
|
map.centerAndZoom(points, 16);
|
|
// var markerd = new BMap.Marker(points);
|
|
// map.addOverlay(markerd);
|
|
// let blz = "label"+i
|
|
blz[i] = new BMap.Label("山东恒信高科"+i, { // 创建文本标注
|
|
position: points, // 设置标注的地理位置
|
|
offset: new BMap.Size(10, 20) // 设置标注的偏移量
|
|
})
|
|
blz[i].addEventListener("click", function(){
|
|
alert(i);
|
|
});
|
|
map.addOverlay(blz[i]);
|
|
i++
|
|
}
|
|
|
|
}
|
|
|
|
|
|
onMounted(() =>{
|
|
loadJScript()
|
|
})
|
|
</script>
|
|
<template>
|
|
<div>
|
|
<div id="pickMapView" :ref="mapId" class="openMapView"></div>
|
|
</div>
|
|
</template>
|
|
<style lang='scss' scoped>
|
|
.openMapView{
|
|
width:100%;
|
|
margin: 10px 0 0 0;
|
|
height: calc(100vh - 320px);
|
|
}
|
|
</style>
|
|
|