如何删除google maps api 3的折线

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

$("#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); } }) 

我在谷歌地图api 3的文档中找到了我需要做的事：setMap（null）..但这不起作用。

谢谢！

Answer 1

您没有保留对折线的引用，它是“$（”＃chkRouteLines“）的本地。点击”function。 如果您有一条折线，请将其全局引用。

 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 } 

Answer 2

折线只是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 

Answer 3

在示例中删除折线谷歌示例 ，看到他们创建了全局变量flightPath并在函数初始化中使用Polyline对象初始化它。 这样我们就不会松开它对按钮click的引用。所以使用代码flightPath.setMap(null); 将Polyline隐藏在map 。

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