谷歌地圖api多段線繪製不當

Question

我在Google地圖上繪製多段線時遇到問題。

地圖重複出現，所以當我在say（0，-175）到（東移動）（0,175）處畫一條折線時，它會在兩點之間畫一條折線，但是在西邊，所以折線並非如預期的那樣從左到右，它實際上穿過了180度的經度並形成了短折線。所以這導致我認爲多段線正在使用兩點之間的最短路徑繪製自己，但是我認爲這只是在geodesic設置爲true時，我甚至沒有將它設置爲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>