feat(map): 添加GPS坐标转换功能以支持WGS84到GCJ02转换
- 在多个组件中导入GPS坐标转换工具 - 实现WGS84坐标到GCJ02坐标的转换逻辑 - 更新地图初始化坐标和标记点坐标处理方式 - 增加对无效坐标和转换异常的错误处理 - 修改车辆轨迹点坐标转换流程 - 调整地图显示逻辑以使用转换后坐标
This commit is contained in:
@@ -12,6 +12,8 @@ import {getSiteInfo, getUserInfo, getWxOpenId} from "@/api/layout";
|
||||
import Login from "./Login";
|
||||
import {pageByQQMap, pageHjmCar} from "@/api/hjm/hjmCar";
|
||||
import {HjmCar} from "@/api/hjm/hjmCar/model";
|
||||
// 导入GPS坐标转换工具
|
||||
import GPS from '@/utils/gpsUtil.js';
|
||||
|
||||
export interface Market {
|
||||
// 自增ID
|
||||
@@ -108,14 +110,36 @@ function Home() {
|
||||
const getLocation = async () => {
|
||||
try {
|
||||
const res = await Taro.getLocation({
|
||||
type: 'gcj02' //返回可以用于wx.openLocation的经纬度
|
||||
type: 'wgs84' // 使用WGS84坐标系,然后手动转换为GCJ02
|
||||
})
|
||||
|
||||
if (res.latitude) {
|
||||
setLatitude(res.latitude)
|
||||
}
|
||||
if (res.longitude) {
|
||||
setLongitude(res.longitude)
|
||||
// 转换WGS84坐标到GCJ02坐标
|
||||
if (res.latitude && res.longitude &&
|
||||
!isNaN(res.latitude) &&
|
||||
!isNaN(res.longitude) &&
|
||||
isFinite(res.latitude) &&
|
||||
isFinite(res.longitude)) {
|
||||
try {
|
||||
const lat = Number(res.latitude);
|
||||
const lng = Number(res.longitude);
|
||||
const transformed = GPS.gcj_encrypt(lat, lng);
|
||||
// 确保转换结果有效
|
||||
if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
|
||||
setLatitude(transformed.lat);
|
||||
setLongitude(transformed.lng);
|
||||
} else {
|
||||
// 如果转换结果无效,使用原始坐标
|
||||
setLatitude(res.latitude);
|
||||
setLongitude(res.longitude);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('坐标转换错误:', error);
|
||||
setLatitude(res.latitude);
|
||||
setLongitude(res.longitude);
|
||||
}
|
||||
} else {
|
||||
setLatitude(res.latitude);
|
||||
setLongitude(res.longitude);
|
||||
}
|
||||
|
||||
// 已认证用户
|
||||
@@ -185,11 +209,33 @@ function Home() {
|
||||
const data = res?.list;
|
||||
const arr = []
|
||||
data?.map((item: HjmCar) => {
|
||||
// 转换WGS84坐标到GCJ02坐标
|
||||
let markerLat = item.latitude;
|
||||
let markerLng = item.longitude;
|
||||
|
||||
if (item.latitude && item.longitude &&
|
||||
!isNaN(item.latitude) &&
|
||||
!isNaN(item.longitude) &&
|
||||
isFinite(item.latitude) &&
|
||||
isFinite(item.longitude)) {
|
||||
try {
|
||||
const lat = Number(item.latitude);
|
||||
const lng = Number(item.longitude);
|
||||
const transformed = GPS.gcj_encrypt(lat, lng);
|
||||
if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
|
||||
markerLat = transformed.lat;
|
||||
markerLng = transformed.lng;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('标记点坐标转换错误:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
arr.push({
|
||||
id: item.id,
|
||||
latitude: item.latitude,
|
||||
longitude: item.longitude,
|
||||
latitude: markerLat,
|
||||
longitude: markerLng,
|
||||
label: {
|
||||
content: `${item?.code}`,
|
||||
color: '#000000',
|
||||
@@ -232,13 +278,36 @@ function Home() {
|
||||
setList(res?.list || [])
|
||||
if (res?.list && res?.list.length > 0) {
|
||||
const data = res?.list[0];
|
||||
setLongitude(data?.longitude)
|
||||
setLatitude(data?.latitude)
|
||||
|
||||
// 转换WGS84坐标到GCJ02坐标
|
||||
let displayLat = data.latitude;
|
||||
let displayLng = data.longitude;
|
||||
|
||||
if (data.latitude && data.longitude &&
|
||||
!isNaN(data.latitude) &&
|
||||
!isNaN(data.longitude) &&
|
||||
isFinite(data.latitude) &&
|
||||
isFinite(data.longitude)) {
|
||||
try {
|
||||
const lat = Number(data.latitude);
|
||||
const lng = Number(data.longitude);
|
||||
const transformed = GPS.gcj_encrypt(lat, lng);
|
||||
if (transformed && !isNaN(transformed.lat) && !isNaN(transformed.lng)) {
|
||||
displayLat = transformed.lat;
|
||||
displayLng = transformed.lng;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('搜索结果坐标转换错误:', error);
|
||||
}
|
||||
}
|
||||
|
||||
setLongitude(displayLng)
|
||||
setLatitude(displayLat)
|
||||
if (isAdmin) {
|
||||
setMarkers([{
|
||||
id: data.id,
|
||||
latitude: data.latitude,
|
||||
longitude: data.longitude,
|
||||
latitude: displayLat,
|
||||
longitude: displayLng,
|
||||
// @ts-ignore
|
||||
label: {
|
||||
content: `${data?.code}`,
|
||||
|
||||
Reference in New Issue
Block a user