<template>
<view class="page-section">
<map
id="map1"
ref="map1"
style="width: 100%; height: 100%;"
:latitude="centerLat"
:longitude="centerLng"
:scale="scale"
:polyline="polyline"
:markers="markers"
@loaded="onMapLoaded"
@circleclick="onFenceClick"
@polygonclick="onFenceClick"
:circles="circles"
:polygons="polygons"
>
<view style="width: 100%;display: flex;align-items: center;justify-content:center;">
<button type="primary" style="position: fixed; bottom: 30rpx;width: 90%;" @click="navigateToAmap">高德导航</button>
</view>
</map>
</view>
</template>
<script>
var QQMapWX = require('@/components/qqmap-wx-jssdk.js');
export default {
data() {
return {
warrouteids: "",
polyline: [],
markers: [],
centerLat: 39.90469, // 默认北京中心（可动态计算）
centerLng: 116.40717,
scale: 14, // 默认缩放级别（建议 10~16）
circles:[],
polygons:[],
startpoint:{}, //起点
endpoint:{name:'北京'}, //终点
waypoints:[], //途径点
};
},
onLoad(options) {
this.qqmapsdk = new QQMapWX({ key: 'NCVBZ-PXCKW-O2KRT-3SN3X-JLFM3-NNB5G' });
this._mapContext = uni.createMapContext("map1", this);
this.warrouteids = options.warrouteids;
this.xlxq();
},
methods: {
//跳高德App
navigateToAmap() {
// 设置起点（可选）
const start = this.startpoint; // 北京站
// 设置终点
const end = this.endpoint;
// 设置途径点（最多 16 个）
// 构造 waypoints 字符串
const waypointsStr =this.waypoints
.map(p => `${p.lat},${p.lng}`)
.join('|');
// 构造 URL Scheme
let url = 'amapuri://route?sourceApplication=weixin';
url += `&slat=${start.lat}&slon=${start.lng}`; // 起点
url += `&dlat=${end.lat}&dlon=${end.lng}`; // 终点
url += `&dname=${encodeURIComponent(end.name)}`;
url += '&dev=0&m=0&t=0'; // 驾车导航
if (waypointsStr) {
url += `&waypoints=${waypointsStr}`; // 添加途径点
}
console.log('22',url)
// 跳转中间页（通过 web-view 尝试唤醒高德）
},
// 计算所有点的中心坐标
calculateCenter(points) {
let latSum = 0, lngSum = 0;
points.forEach(point => {
latSum += point.latitude;
lngSum += point.longitude;
});
return {
lat: latSum / points.length,
lng: lngSum / points.length
};
},
// 动态调整地图视野（包含所有标记点）
fitMapBounds(points) {
if (!points.length) return;
const lats = points.map(p => p.latitude);
const lngs = points.map(p => p.longitude);
const minLat = Math.min(...lats);
const maxLat = Math.max(...lats); // 补上 const
const minLng = Math.min(...lngs); // 补上 const
const maxLng = Math.max(...lngs); // 补上 const
// 计算中心点
this.centerLat = (minLat + maxLat) / 2;
this.centerLng = (minLng + maxLng) / 2;
// 动态计算缩放级别（避免 scale 超出合理范围）
const latDelta = maxLat - minLat;
const lngDelta = maxLng - minLng;
const delta = Math.max(latDelta, lngDelta);
this.scale = Math.max(10, Math.min(12, Math.floor(12 - delta * 10))); // 限制 scale 在 10~16 之间
},
xlxq() {
var my = this
this.$vsportal('XcxJkAction.trajectory', { warrouteids: this.warrouteids })
.then((res) => {
const array = res.data.yjgj;
this.startpoint.lat = array[0].yjxl[0][1]
this.startpoint.lng = array[0].yjxl[0][0]
this.endpoint.lat = array[0].yjxl[array[0].yjxl.length-1][1]
this.endpoint.lng = array[0].yjxl[array[0].yjxl.length-1][0]
var tjdlist = array[0].tjdPoint.split(';')
tjdlist.forEach(item =>{
this.waypoints.push({
lat:item.split(',')[1],
lng:item.split(',')[0]
})
})
const wlList = res.data.area
const allPoints = []; // 存储所有点用于计算中心
//添加围栏
wlList.forEach((item,index) =>{
let color =''
let backgroundcolor =''
if(item.zrlx == '准入'){
color = '#0DC7A0FF'
backgroundcolor = '#0DC7A033'
}else{
color = '#FF000055'
backgroundcolor = '#FF000022'
}
if (item.wllx == "3PMC3JFK") {
// 圆形围栏处理（格式：`经度,纬度;半径`）
const [pointStr, radius] = item.geopoint.split(';');
const [lng, lat] = pointStr.split(',').map(Number);
my.circles.push({
latitude: lat,
longitude: lng,
radius: Number(radius),
color: color, // 红色半透明
fillColor: backgroundcolor,
strokeWidth: 1,
id: item.id,
wllx: item.wllx // 保留类型字段
});
} else if (item.wllx == "3PMC3JFL") {
// 多边形围栏处理（格式：`经度,纬度;经度,纬度;...`）
const points = item.geopoint.split(';').map(coord => {
const [lng, lat] = coord.split(',').map(Number);
return { latitude: lat, longitude: lng };
});
my.polygons.push({
points,
strokeColor: color,
fillColor: backgroundcolor,
strokeWidth: 2,
id: item.id,
wllx: item.wllx
});
}
})
//添加线路
array.forEach((item, index) => {
const arrObjects = item.yjxl.map(arr => ({
latitude: parseFloat(arr[1]),
longitude: parseFloat(arr[0])
}));
// 存储所有点
allPoints.push(...arrObjects);
// 添加路径
my.polyline.push({
id: index,
points: arrObjects,
color: '#4371FF',
width: 6, // 加粗路径
arrowLine: true,
borderWidth: 2, // 增加描边
borderColor: '#FFFFFF'
});
// 添加起点/终点标记（优化图标大小）
this.markers.push(
{
id: `start_${index}`,
latitude: arrObjects[0].latitude,
longitude: arrObjects[0].longitude,
iconPath: '/static/qi.png',
width: 32, // 适当放大图标
height: 40,
anchor: { x: 0.5, y: 1 }, // 图标底部对准坐标
callout: { content: `起点${index+1}`, color: '#FFFFFF', bgColor: '#00CD9F' }
},
{
id: `end_${index}`,
latitude: arrObjects[arrObjects.length - 1].latitude,
longitude: arrObjects[arrObjects.length - 1].longitude,
iconPath: '/static/zhong.png',
width: 32,
height: 40,
anchor: { x: 0.5, y: 1 },
callout: { content: `终点${index+1}`, color: '#FFFFFF', bgColor: '#FF0000' }
}
);
});
// 动态计算中心点和缩放
if (allPoints.length > 0) {
const center = this.calculateCenter(allPoints);
this.centerLat = center.lat;
this.centerLng = center.lng;
this.fitMapBounds(allPoints);
}
// 3. 强制更新地图数据
this.$forceUpdate();
});
},
// 地图加载完成后强制刷新（解决初始定位偏移）
onMapLoaded() {
this.$nextTick(() => {
this._mapContext.moveToLocation();
});
},
onFenceClick(e) {
const fenceId = e.detail.circleId || e.detail.polygonId;
let fence;
if (e.detail.circleId) {
fence = this.circles.find(f => f.id === fenceId);
uni.showToast({
title: `圆形围栏 | 半径: ${fence.radius}米`,
icon: 'none'
});
} else {
fence = this.polygons.find(f => f.id === fenceId);
uni.showToast({
title: `多边形围栏 | 顶点数: ${fence.points.length}`,
icon: 'none'
});
}
}
}
};
</script>
<style>
.page-section{
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
</style>
这个页面如何唤醒手机上的高德地图，并将途径点带给高德地图
最新发布
扫一扫
2939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
