我们在Polyline上绘制标记时遇到问题,该标记穿过垂直子午线(我选择了红线)。
当标记没有超过此行时,一切正常。
代码:
<div id="map" style="height:100%;"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initialize&libraries=geometry">
</script>
function initialize() {
var path = [
{"lat":8.35750896119,"lng":-83.91185135579997},
{"lat":49.93177613,"lng":155.39886474599996},
{"lat":35.93177613,"lng":130.39886474599996}
];
var offset = 1;
var mapOptions = {
zoom: 6,
mapTypeId: 'terrain'
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
var line = new google.maps.Polyline({
path: path,
map: map
});
var position = getLatLngForDistanceOnPolyline(line, offset);
var marker = new google.maps.Marker({
map: map
});
map.setCenter(position);
var interval = window.setInterval(function() {
var newPosition = getLatLngForDistanceOnPolyline(line, offset);
marker.setPosition(newPosition);
offset++;
if(offset > 100) offset = 1;
}, 50);}
function getLatLngForDistanceOnPolyline(polyline, offset){
var dist = 0;
var distance = google.maps.geometry.spherical.computeLength(polyline.getPath(), 0);
var offsetDistance = distance * offset / 100.00;
var points = polyline.getPath().getArray();
if(points.length > 0) {
for(var i = 0; i < points.length - 1; i++){
var pointStart = new google.maps.LatLng(points[i].lat(), points[i].lng());
var pointEnd = new google.maps.LatLng(points[i + 1].lat(), points[i + 1].lng());
var curDistance = google.maps.geometry.spherical.computeDistanceBetween(pointStart, pointEnd);
var prevDist = dist;
dist += curDistance;
if(offsetDistance <= dist) {
var diff = offsetDistance - prevDist;
diff = diff / curDistance;
var d = diff / (1.0 - diff);
return new google.maps.LatLng(
( points[i].lat() + ( d * points[i + 1].lat() ) ) / (1.0 + d),
( points[i].lng() + ( d * points[i + 1].lng() ) ) / (1.0 + d)
)
}
}
}
}
如果对此错误有任何意见或帮助,请回复我。