jquery - 如何删除谷歌地图 API 3 的折线

Question

有人可以告诉我为什么我无法使用此代码删除多段线:

    $("#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”).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

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

代码片段:

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