This commit is contained in:
parent
5d62557752
commit
21b3e160e4
|
|
@ -1 +1 @@
|
|||
VITE_API_BASE_URL = http://192.168.0.133:58080
|
||||
VITE_API_BASE_URL = http://192.168.1.175:58080
|
||||
|
|
@ -25,6 +25,10 @@
|
|||
</view>
|
||||
|
||||
<view class="debug-btn" @click="debug">调试模型</view> -->
|
||||
|
||||
<view style="padding: 30px; color: aquamarine;">
|
||||
返回的数据{{resultInfo}}
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -35,28 +39,35 @@ import { getModelDetailApi } from '@/services/model'
|
|||
import videoIcon from '@/static/image/video.png' // 录像图标
|
||||
import cameraIcon from '@/static/image/camera.png' // 拍照图标
|
||||
|
||||
const info = ref('')
|
||||
const resultInfo = ref('这是测试回显的东西')
|
||||
|
||||
onLoad(async (options) => {
|
||||
const modelId = options?.modelId
|
||||
|
||||
const res = await getModelDetailApi({ id: modelId })
|
||||
|
||||
if (res.code === 200) {
|
||||
const ctx = uni.requireNativePlugin('bonus-textodule')
|
||||
ctx.openNativePage(
|
||||
{
|
||||
modelInfoList: res.data,
|
||||
},
|
||||
(result) => {
|
||||
|
||||
resultInfo.value = JSON.stringify(result)
|
||||
// 监听模型那边返回的数据进行处理
|
||||
uni.showToast({
|
||||
title: JSON.stringify(result),
|
||||
icon: 'none',
|
||||
duration: 10000,
|
||||
})
|
||||
// uni.showToast({
|
||||
// title: JSON.stringify(result),
|
||||
// icon: 'none',
|
||||
// duration: 10000,
|
||||
// })
|
||||
|
||||
setTimeout(() => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/siteSurvey/addOrEditForm',
|
||||
})
|
||||
}, 500)
|
||||
// setTimeout(() => {
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/siteSurvey/addOrEditForm',
|
||||
// })
|
||||
// }, 500)
|
||||
},
|
||||
)
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -1,202 +1,66 @@
|
|||
<!-- 在你的 Vue 组件中 -->
|
||||
<template>
|
||||
<!-- 项目选择 -->
|
||||
<up-navbar
|
||||
title="项目选择"
|
||||
:leftIconSize="0"
|
||||
:titleStyle="{ color: '#333', fontWeight: 'bold' }"
|
||||
/>
|
||||
|
||||
<!-- 查询 -->
|
||||
<view class="project-select-container" :style="{ paddingTop: safeAreaInsets?.top + 44 + 'px' }">
|
||||
<up-row :gutter="10" class="project-select-row">
|
||||
<up-col span="3">
|
||||
<up-input placeholder="项目名称" border="surround" v-model="queryParams.proName" />
|
||||
</up-col>
|
||||
<!-- <up-col span="3">
|
||||
<up-input placeholder="项目类型" border="surround" v-model="queryParams.proType" />
|
||||
</up-col>
|
||||
<up-col span="3">
|
||||
<up-input
|
||||
border="surround"
|
||||
placeholder="项目经理"
|
||||
v-model="queryParams.proManager"
|
||||
/>
|
||||
</up-col> -->
|
||||
<up-col span="3">
|
||||
<view class="project-select-button-box">
|
||||
<up-button type="primary" text="查询" @click="onHandleSearch" />
|
||||
<up-button
|
||||
type="primary"
|
||||
:plain="true"
|
||||
:hairline="true"
|
||||
text="重置"
|
||||
@click="onHandleReset"
|
||||
/>
|
||||
</view>
|
||||
</up-col>
|
||||
</up-row>
|
||||
|
||||
<!-- 表格 -->
|
||||
<view class="project-select-table-box">
|
||||
<!-- 表头 -->
|
||||
<up-row class="table-th">
|
||||
<up-col class="table-td" span="1"> 序号 </up-col>
|
||||
<up-col class="table-td" span="2.5"> 项目名称 </up-col>
|
||||
<up-col class="table-td" span="2.5"> 项目层级 </up-col>
|
||||
<up-col class="table-td" span="2.5"> 项目经理 </up-col>
|
||||
<up-col class="table-td" span="4.5"> 项目所在地 </up-col>
|
||||
</up-row>
|
||||
|
||||
<!-- 表格内容 -->
|
||||
<up-row
|
||||
:key="index"
|
||||
class="table-tbody"
|
||||
v-for="(item, index) in projectList"
|
||||
@tap="onHandleSelectProject(item)"
|
||||
:style="{
|
||||
borderBottom: index !== projectList.length - 1 ? '1px solid #f7f8fa' : 'none',
|
||||
}"
|
||||
>
|
||||
<up-col class="table-td" span="1"> {{ index + 1 }} </up-col>
|
||||
<up-col class="table-td" span="2.5"> {{ item.proName }} </up-col>
|
||||
<up-col class="table-td" span="2.5"> {{ item.level }} </up-col>
|
||||
<up-col class="table-td" span="2.5"> {{ item.manager }} </up-col>
|
||||
<up-col class="table-td" span="4.5"> {{ item.location }} </up-col>
|
||||
</up-row>
|
||||
</view>
|
||||
|
||||
<!-- 分页 -->
|
||||
<view class="pagination-box">
|
||||
<u-pagination
|
||||
:total="total"
|
||||
:current-page="queryParams.pageNum"
|
||||
layout="prev, pager, next"
|
||||
:page-size="queryParams.pageSize"
|
||||
@current-change="onHandleCurrentChange"
|
||||
/>
|
||||
</view>
|
||||
<view class="container">
|
||||
<web-view ref="baiduMap" :src="webViewUrl" @message="handleWebViewMessage"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive } from 'vue'
|
||||
import { getProjectListApi } from '@/services/projectSelect'
|
||||
import js from '@eslint/js'
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useMemberStore } from '@/stores/modules/member'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { getAllProjectListApi, getProjectModelListApi } from '@/services/projectSelect'
|
||||
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync()
|
||||
const baiduMap = ref(null)
|
||||
const projectList = ref([])
|
||||
const webViewUrl = ref('')
|
||||
const memberStore = useMemberStore()
|
||||
|
||||
const projectList = ref([
|
||||
// { proId: 1, proName: '项目1', level: '一级', manager: '张三', location: '北京' },
|
||||
// { proId: 2, proName: '项目2', level: '二级', manager: '李四', location: '上海' },
|
||||
// { proId: 3, proName: '项目3', level: '三级', manager: '王五', location: '广州' },
|
||||
// { proId: 4, proName: '项目4', level: '四级', manager: '赵六', location: '深圳' },
|
||||
// { proId: 5, proName: '项目5', level: '五级', manager: '孙七', location: '成都' },
|
||||
// { proId: 6, proName: '项目6', level: '六级', manager: '周八', location: '重庆' },
|
||||
// { proId: 7, proName: '项目7', level: '七级', manager: '吴九', location: '西安' },
|
||||
])
|
||||
const total = ref(100)
|
||||
// 获取项目列表信息
|
||||
|
||||
// 定义查询条件
|
||||
const queryParams = ref({
|
||||
proName: '', // 项目名称
|
||||
// proType: '', // 项目类型
|
||||
// proManager: '', // 项目经理
|
||||
pageNum: 1, // 页码
|
||||
pageSize: 10, // 每页条数
|
||||
})
|
||||
|
||||
// 获取项目数据
|
||||
const getProjectList = async () => {
|
||||
const res = await getProjectListApi(queryParams.value)
|
||||
projectList.value = res?.rows
|
||||
total.value = res?.total
|
||||
const { data: res } = await getAllProjectListApi()
|
||||
projectList.value = res || []
|
||||
}
|
||||
|
||||
// 查询按钮
|
||||
const onHandleSearch = () => {
|
||||
getProjectList()
|
||||
}
|
||||
const handleWebViewMessage = (event) => {
|
||||
getProjectModelListApi({ projectId: event.detail.data[0].projectInfo.proId }).then((res) => {
|
||||
if (res?.data?.length > 0) {
|
||||
const modelInfoList = {
|
||||
modelInfoList: res.data,
|
||||
projectId: event.detail.data[0].projectInfo.proId,
|
||||
token: memberStore.token,
|
||||
}
|
||||
|
||||
// 重置按钮
|
||||
const onHandleReset = () => {
|
||||
queryParams.value = {
|
||||
proName: '',
|
||||
// proType: '',
|
||||
// proManager: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
getProjectList()
|
||||
}
|
||||
|
||||
// 分页
|
||||
const onHandleCurrentChange = (page) => {
|
||||
// console.log(page,'页码')
|
||||
queryParams.value.pageNum = page
|
||||
getProjectList()
|
||||
}
|
||||
|
||||
// 点击行跳转
|
||||
const onHandleSelectProject = (item) => {
|
||||
// console.log('点击行跳转', item)
|
||||
// const { id, projectName } = item
|
||||
// uni.navigateTo({
|
||||
// url: `/pages/projectSelect/projectSelectDetail?id=${id}&projectName=${projectName}`,
|
||||
// })
|
||||
|
||||
const projectInfo = JSON.stringify(item)
|
||||
uni.navigateTo({
|
||||
url: `/pages/workHome/index?proId=${item.proId}&projectName=${item.proName}&projectInfo=${projectInfo}`,
|
||||
const ctx = uni.requireNativePlugin('bonus-textodule')
|
||||
ctx.openNativePage(
|
||||
{
|
||||
modelInfoList: modelInfoList,
|
||||
},
|
||||
(result) => {},
|
||||
)
|
||||
} else {
|
||||
uni.$u.toast('该工程暂无模型数据')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getProjectList()
|
||||
onLoad(() => {
|
||||
getProjectList().then(() => {
|
||||
if (projectList.value.length > 0) {
|
||||
const projectInfo = projectList.value.map((item) => {
|
||||
return {
|
||||
lat: item.latitude,
|
||||
lng: item.longitude,
|
||||
proName: item.proName,
|
||||
chargePerson: item.chargePerson,
|
||||
location: item.location,
|
||||
proId: item.proId,
|
||||
}
|
||||
})
|
||||
const projectInfoJson = JSON.stringify(projectInfo)
|
||||
webViewUrl.value = `/static/map.html?projectInfo=${projectInfoJson}`
|
||||
}
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.project-select-container {
|
||||
height: 100%;
|
||||
background-color: #f7f8fa;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.project-select-row,
|
||||
.project-select-table-box {
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.project-select-button-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.table-td {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.table-th {
|
||||
padding: 20rpx 0;
|
||||
background-color: #f7f8fa;
|
||||
}
|
||||
|
||||
.table-tbody {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.table-tbody:hover {
|
||||
background-color: #f7f8fa;
|
||||
}
|
||||
|
||||
.pagination-box {
|
||||
margin-top: 20rpx;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,202 @@
|
|||
<template>
|
||||
<!-- 项目选择 -->
|
||||
<up-navbar
|
||||
title="项目选择"
|
||||
:leftIconSize="0"
|
||||
:titleStyle="{ color: '#333', fontWeight: 'bold' }"
|
||||
/>
|
||||
|
||||
<!-- 查询 -->
|
||||
<view class="project-select-container" :style="{ paddingTop: safeAreaInsets?.top + 44 + 'px' }">
|
||||
<up-row :gutter="10" class="project-select-row">
|
||||
<up-col span="3">
|
||||
<up-input placeholder="项目名称" border="surround" v-model="queryParams.proName" />
|
||||
</up-col>
|
||||
<!-- <up-col span="3">
|
||||
<up-input placeholder="项目类型" border="surround" v-model="queryParams.proType" />
|
||||
</up-col>
|
||||
<up-col span="3">
|
||||
<up-input
|
||||
border="surround"
|
||||
placeholder="项目经理"
|
||||
v-model="queryParams.proManager"
|
||||
/>
|
||||
</up-col> -->
|
||||
<up-col span="3">
|
||||
<view class="project-select-button-box">
|
||||
<up-button type="primary" text="查询" @click="onHandleSearch" />
|
||||
<up-button
|
||||
type="primary"
|
||||
:plain="true"
|
||||
:hairline="true"
|
||||
text="重置"
|
||||
@click="onHandleReset"
|
||||
/>
|
||||
</view>
|
||||
</up-col>
|
||||
</up-row>
|
||||
|
||||
<!-- 表格 -->
|
||||
<view class="project-select-table-box">
|
||||
<!-- 表头 -->
|
||||
<up-row class="table-th">
|
||||
<up-col class="table-td" span="1"> 序号 </up-col>
|
||||
<up-col class="table-td" span="2.5"> 项目名称 </up-col>
|
||||
<up-col class="table-td" span="2.5"> 项目层级 </up-col>
|
||||
<up-col class="table-td" span="2.5"> 项目经理 </up-col>
|
||||
<up-col class="table-td" span="4.5"> 项目所在地 </up-col>
|
||||
</up-row>
|
||||
|
||||
<!-- 表格内容 -->
|
||||
<up-row
|
||||
:key="index"
|
||||
class="table-tbody"
|
||||
v-for="(item, index) in projectList"
|
||||
@tap="onHandleSelectProject(item)"
|
||||
:style="{
|
||||
borderBottom: index !== projectList.length - 1 ? '1px solid #f7f8fa' : 'none',
|
||||
}"
|
||||
>
|
||||
<up-col class="table-td" span="1"> {{ index + 1 }} </up-col>
|
||||
<up-col class="table-td" span="2.5"> {{ item.proName }} </up-col>
|
||||
<up-col class="table-td" span="2.5"> {{ item.level }} </up-col>
|
||||
<up-col class="table-td" span="2.5"> {{ item.manager }} </up-col>
|
||||
<up-col class="table-td" span="4.5"> {{ item.location }} </up-col>
|
||||
</up-row>
|
||||
</view>
|
||||
|
||||
<!-- 分页 -->
|
||||
<view class="pagination-box">
|
||||
<u-pagination
|
||||
:total="total"
|
||||
:current-page="queryParams.pageNum"
|
||||
layout="prev, pager, next"
|
||||
:page-size="queryParams.pageSize"
|
||||
@current-change="onHandleCurrentChange"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, reactive } from 'vue'
|
||||
import { getProjectListApi } from '@/services/projectSelect'
|
||||
import js from '@eslint/js'
|
||||
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync()
|
||||
|
||||
const projectList = ref([
|
||||
// { proId: 1, proName: '项目1', level: '一级', manager: '张三', location: '北京' },
|
||||
// { proId: 2, proName: '项目2', level: '二级', manager: '李四', location: '上海' },
|
||||
// { proId: 3, proName: '项目3', level: '三级', manager: '王五', location: '广州' },
|
||||
// { proId: 4, proName: '项目4', level: '四级', manager: '赵六', location: '深圳' },
|
||||
// { proId: 5, proName: '项目5', level: '五级', manager: '孙七', location: '成都' },
|
||||
// { proId: 6, proName: '项目6', level: '六级', manager: '周八', location: '重庆' },
|
||||
// { proId: 7, proName: '项目7', level: '七级', manager: '吴九', location: '西安' },
|
||||
])
|
||||
const total = ref(100)
|
||||
|
||||
// 定义查询条件
|
||||
const queryParams = ref({
|
||||
proName: '', // 项目名称
|
||||
// proType: '', // 项目类型
|
||||
// proManager: '', // 项目经理
|
||||
pageNum: 1, // 页码
|
||||
pageSize: 10, // 每页条数
|
||||
})
|
||||
|
||||
// 获取项目数据
|
||||
const getProjectList = async () => {
|
||||
const res = await getProjectListApi(queryParams.value)
|
||||
projectList.value = res?.rows
|
||||
total.value = res?.total
|
||||
}
|
||||
|
||||
// 查询按钮
|
||||
const onHandleSearch = () => {
|
||||
getProjectList()
|
||||
}
|
||||
|
||||
// 重置按钮
|
||||
const onHandleReset = () => {
|
||||
queryParams.value = {
|
||||
proName: '',
|
||||
// proType: '',
|
||||
// proManager: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
getProjectList()
|
||||
}
|
||||
|
||||
// 分页
|
||||
const onHandleCurrentChange = (page) => {
|
||||
// console.log(page,'页码')
|
||||
queryParams.value.pageNum = page
|
||||
getProjectList()
|
||||
}
|
||||
|
||||
// 点击行跳转
|
||||
const onHandleSelectProject = (item) => {
|
||||
// console.log('点击行跳转', item)
|
||||
// const { id, projectName } = item
|
||||
// uni.navigateTo({
|
||||
// url: `/pages/projectSelect/projectSelectDetail?id=${id}&projectName=${projectName}`,
|
||||
// })
|
||||
|
||||
const projectInfo = JSON.stringify(item)
|
||||
uni.navigateTo({
|
||||
url: `/pages/workHome/index?proId=${item.proId}&projectName=${item.proName}&projectInfo=${projectInfo}`,
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getProjectList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.project-select-container {
|
||||
height: 100%;
|
||||
background-color: #f7f8fa;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.project-select-row,
|
||||
.project-select-table-box {
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.project-select-button-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10rpx;
|
||||
}
|
||||
|
||||
.table-td {
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.table-th {
|
||||
padding: 20rpx 0;
|
||||
background-color: #f7f8fa;
|
||||
}
|
||||
|
||||
.table-tbody {
|
||||
padding: 20rpx 0;
|
||||
}
|
||||
|
||||
.table-tbody:hover {
|
||||
background-color: #f7f8fa;
|
||||
}
|
||||
|
||||
.pagination-box {
|
||||
margin-top: 20rpx;
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -8,3 +8,20 @@ export const getProjectListApi = (data) => {
|
|||
data,
|
||||
})
|
||||
}
|
||||
|
||||
// 获取全量的项目列表
|
||||
export const getAllProjectListApi = () => {
|
||||
return http({
|
||||
method: 'GET',
|
||||
url: '/project/listApp',
|
||||
})
|
||||
}
|
||||
|
||||
// 根据项目ID获取所有的模型列表
|
||||
export const getProjectModelListApi = (data) => {
|
||||
return http({
|
||||
method: 'POST',
|
||||
url: `/model/openAllView`,
|
||||
data,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,48 +31,35 @@
|
|||
<script type="text/javascript">
|
||||
document.addEventListener('UniAppJSBridgeReady', function () {
|
||||
// // 1. 初始化地图
|
||||
// const map = new BMapGL.Map('map-container') // 创建地图实例
|
||||
// let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
|
||||
// map.centerAndZoom(point, 12) // 初始化地图,设置中心点坐标和地图级别
|
||||
// map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||
|
||||
function getUrlParams() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return {
|
||||
lat: parseFloat(params.get('lat')) || 31.8734, // 默认值
|
||||
lng: parseFloat(params.get('lng')) || 117.13805, // 默认值
|
||||
proName: decodeURIComponent(params.get('proName')) || '-', // 默认值
|
||||
chargePerson: decodeURIComponent(params.get('chargePerson')) || '-', // 默认值
|
||||
location: decodeURIComponent(params.get('location')) || '-' // 默认值
|
||||
};
|
||||
const projectInfo = JSON.parse(params.get('projectInfo'))
|
||||
return projectInfo
|
||||
|
||||
}
|
||||
|
||||
const { lat, lng, proName, chargePerson, location } = getUrlParams()
|
||||
const proInfo = {
|
||||
lat,
|
||||
lng,
|
||||
proName,
|
||||
chargePerson,
|
||||
location
|
||||
}
|
||||
const projectInfo = getUrlParams()
|
||||
|
||||
|
||||
|
||||
initMap(proInfo)
|
||||
initMap(projectInfo)
|
||||
|
||||
function initMap(proInfo) {
|
||||
const map = new BMapGL.Map('map-container') // 创建地图实例
|
||||
let point = new BMapGL.Point(proInfo.lng, proInfo.lat) // 创建点坐标
|
||||
let point = new BMapGL.Point(proInfo[0].lng, proInfo[0].lat) // 创建点坐标
|
||||
map.centerAndZoom(point, 12) // 初始化地图,设置中心点坐标和地图级别
|
||||
map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||
projectInfo.forEach(item => {
|
||||
handleProjectInfoOnMap(map, item)
|
||||
})
|
||||
|
||||
handleProjectInfoOnMap(map, proInfo)
|
||||
// handleProjectInfoOnMap(map, proInfo)
|
||||
}
|
||||
|
||||
function handleProjectInfoOnMap(map, projectInfo) {
|
||||
// 示例1: 如果项目信息包含经纬度,移动地图到该位置
|
||||
if (projectInfo.lng && projectInfo.lat) {
|
||||
|
||||
|
||||
const projectPoint = new BMapGL.Point(projectInfo.lng, projectInfo.lat);
|
||||
map.centerAndZoom(projectPoint, 15); // 移动并放大到项目位置
|
||||
const icon = new BMapGL.Icon('./image/location.png', new BMapGL.Size(36, 36), {
|
||||
|
|
@ -86,11 +73,11 @@
|
|||
map.addOverlay(marker)
|
||||
|
||||
|
||||
const infoWindow = new BMapGL.InfoWindow(`
|
||||
<h3 style="color: #002db6; margin: 0 0 10px 0; font-size: 18px;">${projectInfo.proName}</h3>
|
||||
<p>负责人: ${projectInfo.chargePerson}</p>
|
||||
<p>所在地: ${projectInfo.location}</p>
|
||||
`);
|
||||
// const infoWindow = new BMapGL.InfoWindow(`
|
||||
// <h3 style="color: #002db6; margin: 0 0 10px 0; font-size: 18px;">${projectInfo.proName}</h3>
|
||||
// <p>负责人: ${projectInfo.chargePerson}</p>
|
||||
// <p>所在地: ${projectInfo.location}</p>
|
||||
// `);
|
||||
|
||||
const label = new BMapGL.Label(projectInfo.proName, {
|
||||
position: projectPoint,
|
||||
|
|
@ -113,12 +100,20 @@
|
|||
|
||||
map.addOverlay(label)
|
||||
marker.addEventListener('click', function () {
|
||||
map.openInfoWindow(infoWindow, projectPoint);
|
||||
// map.openInfoWindow(infoWindow, projectPoint);
|
||||
|
||||
|
||||
// 向父组件传参然后跳转相关页面
|
||||
uni.postMessage({
|
||||
data: {
|
||||
action: 'navigateToProject',
|
||||
projectInfo: projectInfo
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -29,69 +29,98 @@
|
|||
</body>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
// document.addEventListener('UniAppJSBridgeReady', function () {
|
||||
// const map = new BMapGL.Map('map-container') // 创建地图实例
|
||||
// let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
|
||||
// map.centerAndZoom(point, 12) // 初始化地图,设置中心点坐标和地图级别
|
||||
// map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||
// })
|
||||
|
||||
// 存储从UniApp接收的数据
|
||||
let receivedProjectInfo = null;
|
||||
|
||||
document.addEventListener('UniAppJSBridgeReady', function () {
|
||||
// 1. 初始化地图
|
||||
const map = new BMapGL.Map('map-container') // 创建地图实例
|
||||
let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
|
||||
map.centerAndZoom(point, 12) // 初始化地图,设置中心点坐标和地图级别
|
||||
map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||
// // 1. 初始化地图
|
||||
// const map = new BMapGL.Map('map-container') // 创建地图实例
|
||||
// let point = new BMapGL.Point(117.13805, 31.8734) // 创建点坐标
|
||||
// map.centerAndZoom(point, 12) // 初始化地图,设置中心点坐标和地图级别
|
||||
// map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||
|
||||
// 2. 监听UniApp发送的消息
|
||||
uni.onMessage(function (message) {
|
||||
function getUrlParams() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return {
|
||||
lat: parseFloat(params.get('lat')) || 31.8734, // 默认值
|
||||
lng: parseFloat(params.get('lng')) || 117.13805, // 默认值
|
||||
proName: decodeURIComponent(params.get('proName')) || '-', // 默认值
|
||||
chargePerson: decodeURIComponent(params.get('chargePerson')) || '-', // 默认值
|
||||
location: decodeURIComponent(params.get('location')) || '-' // 默认值
|
||||
};
|
||||
|
||||
// 3. 处理接收到的projectInfo数据
|
||||
if (message.type === 'projectInfo' && message.data) {
|
||||
receivedProjectInfo = message.data;
|
||||
// 4. 根据接收的数据进行地图操作(示例)
|
||||
handleProjectInfoOnMap(map, receivedProjectInfo);
|
||||
}
|
||||
|
||||
const { lat, lng, proName, chargePerson, location } = getUrlParams()
|
||||
const proInfo = {
|
||||
lat,
|
||||
lng,
|
||||
proName,
|
||||
chargePerson,
|
||||
location
|
||||
}
|
||||
|
||||
|
||||
|
||||
initMap(proInfo)
|
||||
|
||||
function initMap(proInfo) {
|
||||
const map = new BMapGL.Map('map-container') // 创建地图实例
|
||||
let point = new BMapGL.Point(proInfo.lng, proInfo.lat) // 创建点坐标
|
||||
map.centerAndZoom(point, 12) // 初始化地图,设置中心点坐标和地图级别
|
||||
map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||
|
||||
handleProjectInfoOnMap(map, proInfo)
|
||||
}
|
||||
|
||||
function handleProjectInfoOnMap(map, projectInfo) {
|
||||
// 示例1: 如果项目信息包含经纬度,移动地图到该位置
|
||||
if (projectInfo.lng && projectInfo.lat) {
|
||||
const projectPoint = new BMapGL.Point(projectInfo.lng, projectInfo.lat);
|
||||
map.centerAndZoom(projectPoint, 15); // 移动并放大到项目位置
|
||||
const icon = new BMapGL.Icon('./image/location.png', new BMapGL.Size(36, 36), {
|
||||
anchor: new BMapGL.Size(12, 24), // 图标锚点,使图标底部中心点与坐标点重合
|
||||
})
|
||||
// 创建marker并应用自定义图标
|
||||
const marker = new BMapGL.Marker(projectPoint, {
|
||||
icon: icon,
|
||||
})
|
||||
|
||||
map.addOverlay(marker)
|
||||
|
||||
|
||||
const infoWindow = new BMapGL.InfoWindow(`
|
||||
<h3 style="color: #002db6; margin: 0 0 10px 0; font-size: 18px;">${projectInfo.proName}</h3>
|
||||
<p>负责人: ${projectInfo.chargePerson}</p>
|
||||
<p>所在地: ${projectInfo.location}</p>
|
||||
`);
|
||||
|
||||
const label = new BMapGL.Label(projectInfo.proName, {
|
||||
position: projectPoint,
|
||||
offset: new BMapGL.Size(0, 0), // 调整偏移量,使文字在marker正下方
|
||||
})
|
||||
|
||||
// 设置label样式
|
||||
label.setStyle({
|
||||
color: '#002db6',
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
textAlign: 'center',
|
||||
padding: '5px',
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: '18px',
|
||||
fontWeight: 'bold',
|
||||
transform: 'translateX(-45%)' // 关键:让Label向左移动自身宽度的一半
|
||||
});
|
||||
|
||||
|
||||
map.addOverlay(label)
|
||||
marker.addEventListener('click', function () {
|
||||
map.openInfoWindow(infoWindow, projectPoint);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
|
||||
// 根据项目信息操作地图的方法
|
||||
function handleProjectInfoOnMap(map, projectInfo) {
|
||||
// 示例1: 如果项目信息包含经纬度,移动地图到该位置
|
||||
if (projectInfo.longitude && projectInfo.latitude) {
|
||||
const projectPoint = new BMapGL.Point(projectInfo.longitude, projectInfo.latitude);
|
||||
map.centerAndZoom(projectPoint, 15); // 移动并放大到项目位置
|
||||
|
||||
// 示例2: 在项目位置添加标记
|
||||
// const marker = new BMapGL.Marker(projectPoint);
|
||||
// map.addOverlay(marker);
|
||||
|
||||
const icon = new BMapGL.Icon(require('@/static/image/location.png'), new BMapGL.Size(36, 36), {
|
||||
anchor: new BMapGL.Size(12, 24), // 图标锚点,使图标底部中心点与坐标点重合
|
||||
})
|
||||
// 创建marker并应用自定义图标
|
||||
const marker = new BMapGL.Marker(projectPoint, {
|
||||
icon: icon,
|
||||
})
|
||||
|
||||
map.addOverlay(marker)
|
||||
|
||||
// 示例3: 显示项目信息弹窗
|
||||
const infoWindow = new BMapGL.InfoWindow(`
|
||||
|
||||
<h3 style="color: #002db6; margin: 0 0 10px 0; font-size: 18px;">${projectInfo.proName}</h3>
|
||||
<p>负责人: ${projectInfo.chargePerson}</p>
|
||||
<p>所在地: ${projectInfo.location}</p>
|
||||
`);
|
||||
marker.addEventListener('click', function () {
|
||||
map.openInfoWindow(infoWindow, projectPoint);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue