269 lines
6.7 KiB
Vue
269 lines
6.7 KiB
Vue
<!-- 地图组件：基于百度地图GL实现 -->
|
||
<!-- TODO @super：还存在两个没解决的小bug,一个是修改手动定位时一次加载 不知道为何定位点在地图左上角 调了半天没解决 第二个是检索地址确定定位的功能参照百度的文档没也搞好 回头再解决一下 -->
|
||
<template>
|
||
<div v-if="props.isWrite">
|
||
<el-form ref="form" label-width="120px">
|
||
<el-form-item label="定位位置:">
|
||
<el-select
|
||
class="w-full"
|
||
v-model="state.address"
|
||
clearable
|
||
filterable
|
||
remote
|
||
reserve-keyword
|
||
placeholder="可输入地址查询经纬度"
|
||
:remote-method="autoSearch"
|
||
@change="handleAddressSelect"
|
||
:loading="state.loading"
|
||
>
|
||
<el-option
|
||
v-for="item in state.mapAddrOptions"
|
||
:key="item.value"
|
||
:label="item.name"
|
||
:value="item.value"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="设备地图:">
|
||
<!-- TODO @super：这里看看 unocss 哈 -->
|
||
<div id="bdMap" class="mapContainer"></div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<div v-else>
|
||
<el-descriptions :column="2" border :labelStyle="{ 'font-weight': 'bold' }">
|
||
<el-descriptions-item label="设备位置:">{{ state.address }}</el-descriptions-item>
|
||
</el-descriptions>
|
||
<div id="bdMap" class="mapContainer"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { reactive, onMounted } from 'vue'
|
||
import { propTypes } from '@/utils/propTypes'
|
||
|
||
// 扩展 Window 接口以包含百度地图 GL API
|
||
declare global {
|
||
interface Window {
|
||
BMapGL: any
|
||
initBaiduMap: () => void
|
||
}
|
||
}
|
||
|
||
const emits = defineEmits(['locateChange', 'update:center'])
|
||
const state = reactive({
|
||
lonLat: '', // 经度,纬度
|
||
address: '',
|
||
loading: false,
|
||
latitude: '', // 纬度
|
||
longitude: '', // 经度
|
||
map: null as any, // 地图对象
|
||
mapAddrOptions: [] as any[],
|
||
mapMarker: null as any, // 标记对象
|
||
geocoder: null as any,
|
||
autoComplete: null as any,
|
||
tips: [] // 搜索提示
|
||
})
|
||
|
||
const props = defineProps({
|
||
clickMap: propTypes.bool.def(false),
|
||
isWrite: propTypes.bool.def(false),
|
||
center: propTypes.string.def('')
|
||
})
|
||
|
||
/** 加载百度地图 */
|
||
const loadMap = () => {
|
||
state.address = ''
|
||
state.latitude = ''
|
||
state.longitude = ''
|
||
|
||
// 创建百度地图 API 脚本，动态加载
|
||
const script = document.createElement('script')
|
||
script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${
|
||
import.meta.env.VITE_BAIDU_MAP_KEY
|
||
}&callback=initBaiduMap`
|
||
document.body.appendChild(script)
|
||
|
||
// 定义全局回调函数
|
||
window.initBaiduMap = () => {
|
||
initMap()
|
||
initGeocoder()
|
||
initAutoComplete()
|
||
|
||
// TODO @super：这里加一行注释
|
||
if (props.clickMap) {
|
||
state.map.addEventListener('click', (e: any) => {
|
||
console.log(e)
|
||
const point = e.latlng
|
||
console.log(point)
|
||
state.lonLat = point.lng + ',' + point.lat
|
||
console.log(state.lonLat)
|
||
regeoCode(state.lonLat)
|
||
})
|
||
}
|
||
|
||
// TODO @super：这里加一行注释
|
||
if (props.center) {
|
||
regeoCode(props.center)
|
||
}
|
||
}
|
||
}
|
||
|
||
/** 初始化地图 */
|
||
const initMap = () => {
|
||
const mapId = 'bdMap'
|
||
state.map = new window.BMapGL.Map(mapId)
|
||
// TODO @super：这个是默认的哇？
|
||
state.map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 11)
|
||
state.map.enableScrollWheelZoom()
|
||
state.map.disableDoubleClickZoom()
|
||
|
||
// 添加地图控件
|
||
state.map.addControl(new window.BMapGL.NavigationControl())
|
||
state.map.addControl(new window.BMapGL.ScaleControl())
|
||
state.map.addControl(new window.BMapGL.ZoomControl())
|
||
}
|
||
|
||
/** 初始化地理编码器 */
|
||
const initGeocoder = () => {
|
||
state.geocoder = new window.BMapGL.Geocoder()
|
||
}
|
||
|
||
/** 初始化自动完成 */
|
||
const initAutoComplete = () => {
|
||
state.autoComplete = new window.BMapGL.Autocomplete({
|
||
input: 'searchInput',
|
||
location: state.map
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 搜索地址
|
||
* @param queryValue 搜索关键词
|
||
*/
|
||
const autoSearch = (queryValue: string) => {
|
||
if (!queryValue) {
|
||
state.mapAddrOptions = []
|
||
return
|
||
}
|
||
|
||
state.loading = true
|
||
|
||
// 使用百度地图地点检索服务
|
||
const localSearch = new window.BMapGL.LocalSearch(state.map, {
|
||
onSearchComplete: (results: any) => {
|
||
state.loading = false
|
||
const temp: any[] = []
|
||
|
||
if (results && results.getPoi) {
|
||
const pois = results.getPoi()
|
||
pois.forEach((p: any) => {
|
||
const point = p.point
|
||
if (point && point.lng && point.lat) {
|
||
temp.push({
|
||
name: p.title,
|
||
value: point.lng + ',' + point.lat
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
state.mapAddrOptions = temp
|
||
}
|
||
})
|
||
|
||
localSearch.search(queryValue)
|
||
}
|
||
|
||
/**
|
||
* 处理地址选择
|
||
* @param value 选中的地址值
|
||
*/
|
||
const handleAddressSelect = (value: string) => {
|
||
if (value) {
|
||
regeoCode(value)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 添加标记点
|
||
* @param lnglat 经纬度数组
|
||
*/
|
||
// TODO @super：拼写；尽量不要有 idea 绿色提醒哈
|
||
const setMarker = (lnglat: any) => {
|
||
if (!lnglat) return
|
||
|
||
// 如果点标记已存在则先移除原点
|
||
if (state.mapMarker !== null) {
|
||
state.map.removeOverlay(state.mapMarker)
|
||
state.lonLat = ''
|
||
}
|
||
|
||
// 创建新的标记点
|
||
const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
|
||
state.mapMarker = new window.BMapGL.Marker(point)
|
||
|
||
// 添加点标记到地图
|
||
state.map.addOverlay(state.mapMarker)
|
||
state.map.centerAndZoom(point, 16)
|
||
}
|
||
|
||
/**
|
||
* 经纬度转化为地址、添加标记点
|
||
* @param lonLat 经度,纬度字符串
|
||
*/
|
||
// TODO @super：拼写；尽量不要有 idea 绿色提醒哈
|
||
const regeoCode = (lonLat: string) => {
|
||
if (!lonLat) return
|
||
|
||
// TODO @super：拼写；尽量不要有 idea 绿色提醒哈
|
||
const lnglat = lonLat.split(',')
|
||
if (lnglat.length !== 2) return
|
||
|
||
state.longitude = lnglat[0]
|
||
state.latitude = lnglat[1]
|
||
|
||
// 通知父组件位置变更
|
||
emits('locateChange', lnglat)
|
||
emits('update:center', lonLat)
|
||
|
||
// 先将地图中心点设置到目标位置
|
||
const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
|
||
state.map.centerAndZoom(point, 16)
|
||
|
||
// 再设置标记并获取地址
|
||
setMarker(lnglat)
|
||
getAddress(lnglat)
|
||
}
|
||
|
||
// TODO @super：lnglat 拼写
|
||
/**
|
||
* 根据经纬度获取地址信息
|
||
*
|
||
* @param lnglat 经纬度数组
|
||
*/
|
||
const getAddress = (lnglat: any) => {
|
||
const point = new window.BMapGL.Point(lnglat[0], lnglat[1])
|
||
|
||
state.geocoder.getLocation(point, (result: any) => {
|
||
if (result && result.address) {
|
||
state.address = result.address
|
||
}
|
||
})
|
||
}
|
||
|
||
/** 显式暴露方法，使其可以被父组件访问 */
|
||
defineExpose({ regeoCode })
|
||
|
||
onMounted(() => {
|
||
loadMap()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.mapContainer {
|
||
width: 100%;
|
||
height: 400px;
|
||
}
|
||
</style>
|