【问题标题】:Remove partial polyline移除部分折线
【发布时间】:2013-10-08 18:05:30
【问题描述】:

我正在开发一个 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 数组中。

我搜索了一种删除部分折线的方法,但找不到任何可行的方法。我知道如何删除所有标记或折线,但不是单个折线部分。这可能吗?

任何想法或建议如何解决这个问题,或者这是无法以我想要的方式解决的问题?

【问题讨论】:

    标签: google-maps google-maps-api-3


    【解决方案1】:

    在欧洲用LatLng 初始化bounds,而不是将这个LatLng 推入flightPlanCoordinates

    http://jsfiddle.net/doktormolle/HctvT/4/

    当您使用对数组的引用作为折线的路径时,对数组的任何更改都会影响折线。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2018-07-02
      • 2017-03-04
      • 2011-09-04
      • 1970-01-01
      • 1970-01-01
      • 2021-10-06
      • 2016-05-19
      • 2011-02-03
      相关资源
      最近更新 更多