我正在开发一个 WordPress 插件,用户可以在其中构建路线图并将其显示在他们的网站上。在管理面板中,它显示地图上现有路线的预览,以及他们可以拖动到他们想要添加到地图的新位置的标记。
地图的默认缩放位置设置在欧洲。但是,如果他们例如在澳大利亚添加几个站点,那么只有世界的那一部分是可见的,您将不再看到用于指定新位置的可拖动图标,这是一个问题。
所以我想用 fitbounds 来修复它,这样它总是可以使可拖动标记和已经创建的路线适合屏幕。我的代码确实显示了地图上的所有位置,但是因为我在访问的位置之间绘制了折线,所以它也以某种方式在欧洲的可拖动标记上画了一条线,它不应该这样做,因为它不是路线的一部分。
你可以在这里看到一个例子-> http://jsfiddle.net/tijmen/HctvT/1/
部分代码:
/* Draw lines between the markers */
function drawFlightPlan( flightPlanCoordinates ) {
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: "#ad1700",
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap( map );
fitBounds( flightPlanCoordinates );
}
/* Zoom the map so that all markers fit in the window */
function fitBounds( flightPlanCoordinates ) {
var bounds = new google.maps.LatLngBounds ();
/* Include this latlng value in europe, but I dont want a line going to that latng... */
var defaultLatlng = new google.maps.LatLng('52.378153', '4.899363');
flightPlanCoordinates.push( defaultLatlng );
for ( var i = 0, flightPlanLen = flightPlanCoordinates.length; i < flightPlanLen; i++ ) {
bounds.extend ( flightPlanCoordinates[i] );
}
map.fitBounds( bounds );
}
澳大利亚的标记之间的线很好,但到欧洲的线不应该在那里(通常在欧洲会有不同颜色的标记)。
I don't really understand why there is a line going to Europe in the first place. The flightPath.setMap( map ); is run inside the drawFlightPlan function. And it's not untill the fitBounds function is that I add the latlng value for Europe to the flightPlanCoordinates array.
I searched for a way to remove a partial polyline, but I can't find anything about it that works. I know how to remove all the markers or polylines, but not a single polyline part. Is that even possible?
Any ideas or suggestion how to fix this, or is this something that cannot be fixed the way I want to?