我正在开发一个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 );
}
澳大利亚的标记之间的界限很好,但到欧洲的线不应该在那里(通常在欧洲会有一个不同的彩色标记)。
我真的不明白为什么有一条线路首先进入欧洲。 flightPath.setMap(map);在drawFlightPlan函数中运行。而且,除了fitBounds函数之外,我还将欧洲的latlng值添加到flightPlanCoordinates数组中。
我搜索了一种删除部分折线的方法,但我找不到任何有效的方法。我知道如何删除所有标记或折线,但不是单个折线部分。这甚至可能吗?
任何想法或建议如何解决这个问题,或者这是否是我想要的方式无法解决的问题?
答案 0 :(得分:1)
使用欧洲bounds
初始化LatLng
,而不是将此LatLng
推送到flightPlanCoordinates
http://jsfiddle.net/doktormolle/HctvT/4/
当您使用对数组的引用作为折线的路径时,对数组的任何更改都会影响折线。