在Google Maps API v3中,折线(Polyline)是由一系列坐标点连接而成的线段。当需要在现有折线的两个点之间添加新点时,需要处理以下几个关键方面:
以下是完整的实现代码示例:
// 初始化地图
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 39.9042, lng: 116.4074} // 北京坐标
});
// 创建折线
var polyline = new google.maps.Polyline({
path: [
{lat: 39.9042, lng: 116.4074}, // 点1
{lat: 39.9139, lng: 116.3917}, // 点2
{lat: 39.9177, lng: 116.3664} // 点3
],
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
map: map
});
// 添加折线点击事件监听
google.maps.event.addListener(polyline, 'click', function(event) {
// 获取折线当前所有点
var path = polyline.getPath();
var points = path.getArray();
// 找出距离点击位置最近的两个相邻点
var closestSegment = findClosestSegment(points, event.latLng);
if (closestSegment) {
// 在两点之间插入新点
var newPoint = event.latLng;
path.insertAt(closestSegment.index + 1, newPoint);
// 可选:添加标记显示新点
new google.maps.Marker({
position: newPoint,
map: map,
title: '新添加的点'
});
}
});
// 辅助函数:找到距离点击位置最近的线段
function findClosestSegment(points, clickPoint) {
var minDistance = Number.MAX_VALUE;
var closestSegment = null;
for (var i = 0; i < points.length - 1; i++) {
var segmentStart = points[i];
var segmentEnd = points[i + 1];
// 计算点到线段的距离
var distance = pointToSegmentDistance(clickPoint, segmentStart, segmentEnd);
if (distance < minDistance) {
minDistance = distance;
closestSegment = {
index: i,
start: segmentStart,
end: segmentEnd,
distance: distance
};
}
}
return closestSegment;
}
// 辅助函数:计算点到线段的距离
function pointToSegmentDistance(point, segmentStart, segmentEnd) {
var x = point.lng();
var y = point.lat();
var x1 = segmentStart.lng();
var y1 = segmentStart.lat();
var x2 = segmentEnd.lng();
var y2 = segmentEnd.lat();
// 计算线段长度平方
var l2 = (x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1);
if (l2 === 0) return Math.sqrt((x - x1) * (x - x1) + (y - y1) * (y - y1));
// 计算投影比例
var t = Math.max(0, Math.min(1, ((x - x1) * (x2 - x1) + (y - y1) * (y2 - y1)) / l2));
// 计算投影点坐标
var projectionX = x1 + t * (x2 - x1);
var projectionY = y1 + t * (y2 - y1);
// 返回点到投影点的距离
return Math.sqrt((x - projectionX) * (x - projectionX) + (y - projectionY) * (y - projectionY));
}
google.maps.event.addListener
监听折线的点击事件。Path.insertAt()
方法在最近线段的两点之间插入新点。这种技术适用于:
pointToSegmentDistance
函数实现,确保几何计算正确没有搜到相关的文章