1
我想通過在折線中使用SVG路徑在谷歌地圖繪製貝塞爾曲線。起初我使用了一個標記，而不是類似於Curved line between two near points in google maps，這給了我後面的結果。但是，由於無法在標記下拖動地圖，因此我無法使用此方法。使用谷歌地圖折線繪製貝塞爾曲線
所以我切換到了折線而不是標記。現在，當我縮小時，我獲得了同樣的好結果，但是當我放大麴線變成「裁剪」時。
下面是代碼：
function initialize() {
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var coord1 = new google.maps.LatLng(49.165876, -123.152446);
var coord2 = new google.maps.LatLng(25.786328, -80.193694);
var bounds = new google.maps.LatLngBounds();
bounds.extend(coord1);
bounds.extend(coord2);
map.fitBounds(bounds);
pLineOpt = {
path: [coord1, coord2],
strokeWeight: 4,
strokeOpacity: 0,
map: map,
}
pLine = new google.maps.Polyline(pLineOpt);
var markers = [
new google.maps.Marker({
position: coord1,
map: map
}),
new google.maps.Marker({
position: coord2,
map: map
})
];
google.maps.event.addListener(map, 'zoom_changed', function() {
//points
var p1 = map.getProjection().fromLatLngToPoint(coord1);
var p2 = map.getProjection().fromLatLngToPoint(coord2);
//distance between points
var d = new google.maps.Point(p2.x - p1.x, p2.y - p1.y);
var lengthSqr = d.x * d.x + d.y * d.y;
//middle point
var m = new google.maps.Point(d.x/2, d.y/2);
//slope of perpendicular line
var perpK = -d.x/d.y;
//distance to control point
var ratioDistanceControlLengthSqr = 9;
var controlDSqr = lengthSqr/ratioDistanceControlLengthSqr;
var p3dX = Math.sqrt(controlDSqr/(Math.pow(perpK, 2) + 1));
var p3dY = perpK * p3dX;
//control point
var p3 = new google.maps.Point(m.x - p3dX, m.y - p3dY);
//curve path
var path = "M 0 0 q " + p3.x + " " + p3.y + " " + d.x + " " + d.y;
//calc scale
var zoom = map.getZoom();
var scale = 1/(Math.pow(2, -zoom));
var icon = {
path: path,
scale: scale,
strokeWeight: 3,
strokeOpacity: 1,
};
pLineOpt.icons = [{
fixedRotation: true,
icon: icon,
offset: '0'
}];
pLine.setOptions(pLineOpt);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
我已與代碼的jsfiddle：http://jsfiddle.net/s7djLzyd/3/
有誰知道爲什麼折線縮放時裁剪，以及是否有辦法解決？
感謝
折線是在[瓦片邊界]被裁剪（http://jsfiddle.net/s7djLzyd/ 4 /）。看到這發生了很多次，不知道爲什麼它發生在你的特定情況下，但可能是API平鋪渲染折線的錯誤。首先，我總是提出奇怪的問題，嘗試API的發佈和凍結版本，[這在這種情況下不起作用]（http://jsfiddle.net/s7djLzyd/5/）。 – geocodezip