How to remove polylines of google maps api 3

问题:

Can someone tell me why I can't remove my polylines with this code:

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

I found in the documentation of google maps api 3 that I need to do: setMap(null).. But this didn't work.

Thank you!

回答1:

You aren't retaining a reference to the polyline, it is local to the "$("#chkRouteLines").click" function. If you have one polyline, make the reference to it global.

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

If you need to add and remove multiple different polylines, an array usually works.

code snippet:

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

回答2:

polyline is just an array of LatLng objects, not individual Polylines. I think you probably need a separate array for the Polylines, which you can then loop over to remove them all. Create a global array line.

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

Now you are pushing all the polyline objects into an array line. You can make it invisible or remove it from the map by looping it like this:

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

回答3:

In example Remove a Polyline Google Example, See that they created global variable flightPath and initialized it in function initialize with Polyline object. This way we don't loose its reference on button click.So by using the code flightPath.setMap(null); the hide the Polyline from map.

In your example , you are initializing polyline on click event, so you overwrite previous Polyline object reference and this is why it is not hiding when you call polyline.setMap(null); Follow the given example to make it right.

文章来源: How to remove polylines of google maps api 3