我在谷歌地图上绘制折线有问题。
地图重复,所以当我在说(0,-175)到(向东移动)(0,175)绘制折线时,它在两点之间绘制折线,但在西边,所以折线并不像预期的那样从左到右,它实际上经过180度经度并且形成一条短折线。因此,这让我认为折线是使用两点之间的最短路径绘制自己的,但我认为只有将测地线设置为true,我甚至没有将其设置为true,所以它应该默认是假的。
所以我的问题是如何解决这个问题?
答案 0 :(得分:3)
在折线的中间添加一个点。
代码段(蓝线是原始路径,更新的线是红色,附加点是蓝色标记):
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>