我指的是Adding icon in the middle of created SVG path in Google Maps在两点之间画一条曲线:一个点靠近西雅图,另一个点在东京。曲线将2点连接通过非洲/大西洋,而不是太平洋。我该如何解决?这是jsfiddle页面:https://jsfiddle.net/zwu_ca/nj325pcr/1/
var map;
var curvature = 0.175;
var invercurve = -0.175;
function initMap() {
var Map = google.maps.Map,
LatLng = google.maps.LatLng,
LatLngBounds = google.maps.LatLngBounds,
Marker = google.maps.Marker,
Point = google.maps.Point;
var pos1 = new LatLng(35.6730185, 139.4302008);
var pos2 = new LatLng(47, -122);
var bounds = new LatLngBounds();
bounds.extend(pos1);
bounds.extend(pos2);
map = new Map(document.getElementById('container'), {
center: bounds.getCenter(),
zoom: 2
});
google.maps.event.addListener(map, 'click', function(evt) {
document.getElementById('status').innerHTML = evt.latLng.toUrlValue(6);
});
map.fitBounds(bounds);
var markerP1 = new Marker({
position: pos1,
map: map
});
var markerP2 = new Marker({
position: pos2,
map: map
});
var curveMarker, curveMarkerInv;
function updateCurveMarker() {
var pos1 = markerP1.getPosition(), // latlng
pos2 = markerP2.getPosition(),
projection = map.getProjection(),
p1 = projection.fromLatLngToPoint(pos1), // xy
p2 = projection.fromLatLngToPoint(pos2);
var e = new Point(p2.x - p1.x, p2.y - p1.y), // endpoint (p2 relative to p1)
m = new Point(e.x / 2, e.y / 2), // midpoint
mPt = projection.fromPointToLatLng(m);
console.log(mPt.toUrlValue(6));
var mMkr = new google.maps.Marker({
position: mPt,
map: map,
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 2
}
});
o = new Point(e.y, -e.x), // orthogonal
c = new Point( // curve control point
m.x + curvature * o.x,
m.y + curvature * o.y);
var c2 = new Point(
c.x + p1.x - curvature * o.x * 0.5,
c.y + p1.y - curvature * o.y * 0.5
);
var aPt = projection.fromPointToLatLng(c2);
console.log(aPt.toUrlValue(6));
var aMkr = new google.maps.Marker({
position: aPt,
map: map,
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
rotation: lineHeading,
scale: 2
}
});
var f = new Point(p2.x - p1.x, p2.y - p1.y), // endpoint (p2 relative to p1)
n = new Point(f.x / 2, f.y / 2), // midpoint
p = new Point(f.y, -f.x), // orthogonal
d = new Point( // curve control point
n.x + invercurve * p.x,
n.y + invercurve * p.y);
var d2 = new Point(
d.x + p1.x - invercurve * p.x * 0.5,
d.y + p1.y - invercurve * p.y * 0.5
);
var bPt = projection.fromPointToLatLng(d2);
console.log(aPt.toUrlValue(6));
var bMkr = new google.maps.Marker({
position: bPt,
map: map,
icon: {
path: google.maps.SymbolPath.BACKWARD_CLOSED_ARROW,
rotation: lineHeading,
scale: 2
}
});
console.log('F:' + p1.x * curvature / 2 + ' ' + p1.y * curvature / 2);
var pathDef = 'M 0,0 ' +
'q ' + c.x + ',' + c.y + ' ' + e.x + ',' + e.y;
var pathDefInv = 'M 0,0 ' +
'q ' + d.x + ',' + d.y + ' ' + f.x + ',' + f.y;
var zoom = map.getZoom(),
scale = 1 / (Math.pow(2, -zoom));
var marker = new google.maps.Marker({
position: new google.maps.LatLng,
icon: {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 10
},
//draggable: true,
map: map
});
var symbol = {
path: pathDef,
scale: scale,
strokeWeight: 2,
strokeColor: '#f00',
fillColor: 'none'
};
var symbolInv = {
path: pathDefInv,
scale: scale,
strokeWeight: 2,
strokeColor: '#f00',
fillColor: 'none'
};
if (!curveMarker) {
curveMarker = new Marker({
position: pos1,
clickable: false,
icon: symbol,
zIndex: 0, // behind the other markers
map: map
});
curveMarkerInv = new Marker({
position: pos1,
clickable: false,
icon: symbolInv,
zIndex: 0, // behind the other markers
map: map
});
} else {
curveMarker.setOptions({
position: pos1,
icon: symbol,
});
curveMarkerInv.setOptions({
position: pos1,
icon: symbolInv,
});
}
}
google.maps.event.addListener(map, 'projection_changed', updateCurveMarker);
google.maps.event.addListener(map, 'zoom_changed', updateCurveMarker);
google.maps.event.addListener(markerP1, 'position_changed', updateCurveMarker);
google.maps.event.addListener(markerP2, 'position_changed', updateCurveMarker);
var lineLength = google.maps.geometry.spherical.computeDistanceBetween(markerP1.getPosition(), markerP2.getPosition());
var lineHeading = google.maps.geometry.spherical.computeHeading(markerP1.getPosition(), markerP2.getPosition());
}