google maps api ломаная линия неадекватно

Question

У меня проблема с рисованием полилиний на карте google.

Карта повторяется, поэтому, когда я рисую полилинию, скажем, от (0, -175) до (перемещение на восток) (0, 175), она рисует полилинию между двумя точками, но на запад, поэтому полилиния не слева от нее, как ожидается, она на самом деле проходит через 180 градусов долготы и делает короткую полилинию. Таким образом, это заставляет меня думать, что полилиния рисует себя, используя кратчайший путь между двумя точками, но я думал, что это было только в случае, если геодезическая установлена ​​в true, и я даже не установил ее как истину, поэтому она должна по умолчанию быть ложным.

Так что мой вопрос: как я могу это исправить?

Answer 1

Добавить точку в середину полилинии.

example

фрагмент кода (синяя линия оригинальный путь, обновленная линия красный, синий маркер в дополнительной точке):

var map = null; 
 
var bounds = null; 
 
var infowindow = new google.maps.InfoWindow({ 
 
    size: new google.maps.Size(150, 50) 
 
}); 
 

 
function initialize() { 
 
    var myOptions = { 
 
    zoom: 10, 
 
    center: new google.maps.LatLng(-33.9, 151.2), 
 
    mapTypeControl: true, 
 
    mapTypeControlOptions: { 
 
     style: google.maps.MapTypeControlStyle.DROPDOWN_MENU 
 
    }, 
 
    navigationControl: true, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    map = new google.maps.Map(document.getElementById("map_canvas"), 
 
    myOptions); 
 

 
    bounds = new google.maps.LatLngBounds(); 
 

 
    google.maps.event.addListener(map, 'click', function() { 
 
    infowindow.close(); 
 
    }); 
 

 
    var startPoint = new google.maps.LatLng(40.0, 175.0); 
 
    bounds.extend(startPoint); 
 

 
    var endPoint = new google.maps.LatLng(42.00547, -122.61535); 
 
    bounds.extend(endPoint); 
 

 
    var normalPolyline = new google.maps.Polyline({ 
 
    path: [startPoint, endPoint], 
 
    strokeColor: "#0000FF", 
 
    strokeOpacity: 0.5, 
 
    strokeWeight: 2, 
 
    map: map 
 
    }); 
 

 

 
    createMarker(startPoint, "start: " + startPoint.toUrlValue(6) + "<br><a href='javascript:map.setCenter(new google.maps.LatLng(" + startPoint.toUrlValue(6) + "));map.setZoom(20);'>zoom in</a> - <a href='javascript:map.fitBounds(bounds);'>zoom out</a>", "start"); 
 

 
    createMarker(endPoint, "end: " + endPoint.toUrlValue(6) + "<br><a href='javascript:map.setCenter(new google.maps.LatLng(" + endPoint.toUrlValue(6) + "));map.setZoom(20);'>zoom in</a> - <a href='javascript:map.fitBounds(bounds);'>zoom out</a>", "end"); 
 

 
    var geodesicPoly = new google.maps.Polyline({ 
 
    path: [startPoint, endPoint], 
 
    strokeColor: "#00FF00", 
 
    strokeOpacity: 0.5, 
 
    strokeWeight: 2, 
 
    geodesic: true, 
 
    map: map 
 
    }); 
 

 

 

 
    google.maps.event.addListener(map, 'projection_changed', function() { 
 
    // second part of initialization, after projection has loaded 
 
    var normalCenterPoint = normalPolyline.GetPointAtDistance(google.maps.geometry.spherical.computeDistanceBetween(startPoint, endPoint)/2); 
 
    createMarker(normalCenterPoint, "center of normal polyline<br>" + normalCenterPoint.toUrlValue(6) + "<br><a href='javascript:map.setCenter(new google.maps.LatLng(" + normalCenterPoint.toUrlValue(6) + "));map.setZoom(20);'>zoom in</a> - <a href='javascript:map.fitBounds(bounds);'>zoom out</a>", "middle", "http://maps.google.com/mapfiles/ms/icons/blue.png"); 
 

 
    var normalPolylineCenter = new google.maps.Polyline({ 
 
     path: [startPoint, normalCenterPoint, endPoint], 
 
     strokeColor: "#FF0000", 
 
     strokeOpacity: 0.5, 
 
     strokeWeight: 2, 
 
     map: map 
 
    }); 
 
    map.fitBounds(bounds); 
 

 

 
    }); 
 

 
    map.fitBounds(bounds); 
 
} 
 

 
function createMarker(latlng, html, title, icon) { 
 
    var contentString = html; 
 
    var marker = new google.maps.Marker({ 
 
     position: latlng, 
 
     map: map, 
 
     icon: icon, 
 
     title: title, 
 
     zIndex: Math.round(latlng.lat() * -100000) << 5 
 
    }); 
 
    bounds.extend(latlng); 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
     infowindow.setContent(contentString); 
 
     infowindow.open(map, marker); 
 
    }); 
 
    } 
 

 
    // from the epoly library, originally written by Mike Williams 
 
    // http://econym.org.uk/gmap/epoly.htm 
 
    // updated to API v3 by Larry Ross (geocodezip) 
 
    // === A method which returns a GLatLng of a point a given distance along the path === 
 
    // === Returns null if the path is shorter than the specified distance === 
 
google.maps.Polyline.prototype.GetPointAtDistance = function(metres) { 
 
    // some awkwarpecial cases 
 
    if (metres == 0) return this.getPath().getAt(0); 
 
    if (metres < 0) return null; 
 
    if (this.getPath().getLength() < 2) return null; 
 
    var dist = 0; 
 
    var olddist = 0; 
 
    for (var i = 1; 
 
    (i < this.getPath().getLength() && dist < metres); i++) { 
 
    olddist = dist; 
 
    dist += google.maps.geometry.spherical.computeDistanceBetween(this.getPath().getAt(i), this.getPath().getAt(i - 1)); 
 
    } 
 
    if (dist < metres) { 
 
    return null; 
 
    } 
 
    var projection = this.getMap().getProjection(); 
 
    if (!projection) { 
 
    alert("no projection"); 
 
    return; 
 
    } 
 
    // Project 
 
    var p1 = projection.fromLatLngToPoint(this.getPath().getAt(i - 2)); 
 
    var p2 = projection.fromLatLngToPoint(this.getPath().getAt(i - 1)); 
 
    var m = (metres - olddist)/(dist - olddist); 
 
    // alert("p1="+p1+" p2="+p2+" m="+m); 
 
    // Unproject 
 
    return projection.fromPointToLatLng(new google.maps.Point(p1.x + (p2.x - p1.x) * m, p1.y + (p2.y - p1.y) * m)); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map_canvas { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0px; 
 
    margin: 0px; 
 
}

<script type="text/javascript" src="https://maps.google.com/maps/api/js?libraries=geometry"></script> 
 

 
<div id="map_canvas" style="width:100%; height:100%"></div>