如何删除谷歌地图api 3的折线答案

【问题标题】：How to remove polylines of google maps api 3如何删除谷歌地图api 3的折线
【发布时间】：2012-08-21 12:12:59
【问题描述】：

谁能告诉我为什么我不能用这段代码删除我的折线：

    $("#chkRouteLines").click(function () {

    var polyline = new google.maps.Polyline({
        path: positions,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        visible: true
    }); ;

    if ($(this).is(':checked')) {
        polyline.setMap(map);
    } else {
        polyline.setMap(null);
    }
})

我在 google maps api 3 的文档中找到了我需要做的：setMap(null).. 但这不起作用。

谢谢！

【问题讨论】：

stackoverflow.com/questions/9511474/…
也许读过这个问题。我说 setMap(null) 在这里不起作用。我之前也读过那个 SO 问题。
为什么相同的 api 有时会起作用，而其他的却不起作用？你有错误吗？另外，为什么设置折线变量后有 2 个分号？
没有错误，我可以看到这些线条，但我无法删除它们。
您需要发布页面的完整代码或指向它的链接。我怀疑这是你看到的不同的折线。您是如何首先绘制折线的？也许是使用 DirectionsRenderer？

标签： jquery google-maps-api-3

【解决方案1】：

您没有保留对折线的引用，它是 "$("#chkRouteLines").click" 函数的本地引用。如果您有一条折线，请对其进行全局引用。

var polyline = null; // in the global scope

$("#chkRouteLines").click(function () {
    if (!polyline || !polyline.setMap) {
      polyline = new google.maps.Polyline({
        path: positions,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        visible: true
      }); 
    }

if ($(this).is(':checked')) {
    polyline.setMap(map);
} else {
    polyline.setMap(null);
}

working fiddle

如果您需要添加和删除多条不同的折线，通常使用数组。

代码sn-p：

var geocoder;
var map;
var polyline;

positions = [new google.maps.LatLng(37.441883,-122.143019),
             new google.maps.LatLng(37.45296,-122.181725)];
function initialize() {
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    
    $("#chkRouteLines").click(function () {
        if (!polyline || !polyline.setMap) {
          polyline = new google.maps.Polyline({
            path: positions,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            visible: true
          }); 
        }

    if ($(this).is(':checked')) {
        polyline.setMap(map);
    } else {
        polyline.setMap(null);
    }
})


}
google.maps.event.addDomListener(window, "load", initialize);

html, body, #map_canvas {
    height: 90%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>
<input id="chkRouteLines" value="click" type="checkbox" />

【讨论】：

您需要发布页面的完整代码或指向它的链接。我怀疑这是你看到的不同的折线。您是如何首先绘制折线的？也许是使用 DirectionsRenderer？
在初始化地图对象后初始化折线对象，两者都在相同的功能范围内。然后，在您的 onclick 函数中，只需使用您的参数调用 setMap 函数。这样，您的地图将有一个折线对象，并且在从地图中清除它之前不会丢失它的引用。这个解决方案对我来说很好。

【解决方案2】：

polyline 只是一个 LatLng 对象的数组，而不是单独的 Polylines。我认为您可能需要一个单独的折线数组，然后您可以循环将它们全部删除。创建一个全局数组线。

 var line = [];
 polyline = new google.maps.Polyline({
        path: positions,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2,
        map: map
    });
 line.push(flightPath);

现在您将所有折线对象推入数组线。您可以通过像这样循环使其不可见或将其从地图中删除：

for (i=0; i<line.length; i++) 
{                           
  line[i].setMap(null); 
}

【讨论】：

【解决方案3】：

在示例Remove a Polyline Google Example 中，看到他们创建了全局变量flightPath 并在函数initialize 中使用Polyline 对象对其进行了初始化。这样我们就不会在按钮单击时丢失它的引用。因此，通过使用代码flightPath.setMap(null); 隐藏Polyline 中的map。

在你的例子中，你是在 click 事件上初始化 polyline，因此您会覆盖以前的 Polyline 对象引用，这就是为什么当您调用 polyline.setMap(null); 时它没有隐藏的原因请按照给定的示例进行操作。

【讨论】：