|
|
|
@ -4,6 +4,11 @@ |
|
|
|
@ 备注: 地图视图 |
|
|
|
--> |
|
|
|
<script lang='ts' setup> |
|
|
|
|
|
|
|
import { gainFormPageMapCont } from '@/api/DesignForm/requestapi' |
|
|
|
|
|
|
|
import FormPageCont from '@/components/DesignForm/tableListPage/formPageCont.vue' |
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
searchSend:{ |
|
|
|
type:Object, |
|
|
|
@ -27,6 +32,16 @@ const longitude= ref<number>(117.14272945140574) |
|
|
|
const latitude= ref<number>(35.91808471435389) |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-07-25 13:24:25 |
|
|
|
@ 功能: 查询参数 |
|
|
|
*/ |
|
|
|
const searchQuery = reactive({ |
|
|
|
// formId |
|
|
|
}) |
|
|
|
const totalNum = ref(0) |
|
|
|
const mapDataList = ref([]) // 表格行数据 |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-07-19 14:55:24 |
|
|
|
@ 功能: 引入外部js |
|
|
|
*/ |
|
|
|
@ -45,6 +60,7 @@ const mapInit = () => { |
|
|
|
var opts = {type: BMAP_NAVIGATION_CONTROL_LARGE} |
|
|
|
map.addControl(new BMap.NavigationControl(opts)); //添加控件 |
|
|
|
map.addControl(new BMap.ScaleControl()); |
|
|
|
// map.addControl(new BMap.LocationControl()); |
|
|
|
map.addControl(new BMap.MapTypeControl()); |
|
|
|
map.enableScrollWheelZoom(); // 启用滚轮放大缩小 |
|
|
|
|
|
|
|
@ -67,7 +83,19 @@ const mapInit = () => { |
|
|
|
// map.addOverlay(markerd); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-04-03 13:24:06 |
|
|
|
@ 功能: 查看详细内容 |
|
|
|
*/ |
|
|
|
const tablePageClass = ref(1) |
|
|
|
const lookPageInfoIsShow = ref(false) |
|
|
|
const pageInfoCont = ref<any>() |
|
|
|
const lookPageInfo = (val:any) => { |
|
|
|
tablePageClass.value = 4; |
|
|
|
pageInfoCont.value = val |
|
|
|
lookPageInfoIsShow.value = true; |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-07-19 15:31:05 |
|
|
|
@ -75,33 +103,82 @@ const mapInit = () => { |
|
|
|
*/ |
|
|
|
const mapHandle = (map:any) => { |
|
|
|
let blz = [] |
|
|
|
for(var i = 1; i < 5;){ |
|
|
|
const points = new BMap.Point(117.14372945240574,35.92808471455389+i); // 创建点坐标 |
|
|
|
|
|
|
|
// 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++ |
|
|
|
// } |
|
|
|
// console.log("设置标注的偏移量",mapDataList.value); |
|
|
|
mapDataList.value.forEach((item,index)=>{ |
|
|
|
// console.log("设置标注的偏移量---->",item); |
|
|
|
const points = new BMap.Point(item._latitude,item._longitude); // 创建点坐标 |
|
|
|
map.centerAndZoom(points, 16); |
|
|
|
// var markerd = new BMap.Marker(points); |
|
|
|
// map.addOverlay(markerd); |
|
|
|
// let blz = "label"+i |
|
|
|
blz[i] = new BMap.Label("山东恒信高科"+i, { // 创建文本标注 |
|
|
|
blz[index] = new BMap.Label(item.input1721369489569, { // 创建文本标注 |
|
|
|
position: points, // 设置标注的地理位置 |
|
|
|
offset: new BMap.Size(10, 20) // 设置标注的偏移量 |
|
|
|
}) |
|
|
|
blz[i].addEventListener("click", function(){ |
|
|
|
alert(i); |
|
|
|
blz[index] .addEventListener("click", function(){ |
|
|
|
// alert(item.input1721369489569); |
|
|
|
lookPageInfo(item) |
|
|
|
}); |
|
|
|
map.addOverlay(blz[i]); |
|
|
|
i++ |
|
|
|
} |
|
|
|
map.addOverlay(blz[index]); |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-07-25 13:23:33 |
|
|
|
@ 功能: 获取数据 |
|
|
|
*/ |
|
|
|
const gainMapLog = (val:any) => { |
|
|
|
val.viewClass = { |
|
|
|
class:"map" |
|
|
|
} |
|
|
|
// console.log(props.searchSend) |
|
|
|
gainFormPageMapCont(val) |
|
|
|
.then(({data})=>{ |
|
|
|
totalNum.value = data.total |
|
|
|
// console.log("卡片获取数据--》",data) |
|
|
|
mapDataList.value = data.list |
|
|
|
loadJScript() |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
onMounted(() =>{ |
|
|
|
loadJScript() |
|
|
|
// gainMapLog(props.searchSend) |
|
|
|
|
|
|
|
nextTick(() =>{ |
|
|
|
gainMapLog(props.searchSend) |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
//翻页 |
|
|
|
const currentChange = (current: number) => { |
|
|
|
props.searchSend.page = current |
|
|
|
gainMapLog(props.searchSend) |
|
|
|
} |
|
|
|
</script> |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div id="pickMapView" :ref="mapId" class="openMapView"></div> |
|
|
|
<div class="mapPage"> |
|
|
|
<el-pagination layout="prev, pager, next" :total="totalNum" @current-change="currentChange" /> |
|
|
|
</div> |
|
|
|
<FormPageCont v-model:is-show="lookPageInfoIsShow" :drawer-with="props.drawerWith" :page-info="pageInfoCont" :table-page-class="tablePageClass" :oper-state="operState" @getPageData="gainMapLog(props.searchSend)" /> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<style lang='scss' scoped> |
|
|
|
@ -110,4 +187,13 @@ onMounted(() =>{ |
|
|
|
margin: 10px 0 0 0; |
|
|
|
height: calc(100vh - 320px); |
|
|
|
} |
|
|
|
.mapPage{ |
|
|
|
position: fixed; |
|
|
|
bottom: 4.5rem; |
|
|
|
right: 5rem; |
|
|
|
border-radius: .25rem; |
|
|
|
background-color: #fff; |
|
|
|
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5); |
|
|
|
z-index:999 |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
