2

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

    $("#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).. 但这不起作用。

谢谢！

4

3 回答 3

4

您没有保留对折线的引用，它是 "$("#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);
}

工作小提琴

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

代码片段：

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" />

于 2012-08-27T00:00:13.963 回答
0

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); 
}
于 2013-05-09T07:03:09.743 回答
0

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

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

于 2015-04-21T15:52:29.630 回答