API di Google Maps {removeOverlay (marcatori);} e {clearOverlays ();}

StackOverflow https://stackoverflow.com/questions/1843817

Domanda

ho un problema nel rimuovere i vecchi marcatori senza rimuovere il punto centrale del cerchio "è anche un indicatore"

la fonte :::: 

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
    <script type="text/javascript">
    //<![CDATA[
    var map;
var container;
var opacity = 0.4;
var circle;
var centerMarker;
var circleUnits;
var circleRadius;
var zoom = 2;
var centerPoint = new GLatLng(40,-100);
var laat;
var lnng;

    function load() {
      if (GBrowserIsCompatible()) {

        map = new GMap2(document.getElementById('map'),{draggableCursor:"crosshair"});
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(40, -100), 4);
      }
    }

function drawCircle() {
    var oUnitsMI = document.getElementById('unitsMI');
    var oUnitsKM = document.getElementById('unitsKM');
    var oRadius = document.getElementById('radiusInput');
    oRadius.value = oRadius.value ? oRadius.value : 500;

    if (oRadius.value.match(/[^\d.]/)) {
        alert("Don't be silly. Enter a number for radius");
        return;
    }
    if (oRadius.value > 9999) {
    }

    circleRadius = oRadius.value;

    if (oUnitsKM.checked) {
        circleUnits = 'KM';
    }
    else {
        circleUnits = 'MI';
    }

    doDrawCircle();
}


function doDrawCircle(){

    if (circle) {
        map.removeOverlay(circle);

    }


    if (centerMarker) {
    //map.removeOverlay(marker);
        map.setCenter(centerMarker.getLatLng())
    }
    else {
        centerMarker = new GMarker(map.getCenter(),{draggable:true});
        GEvent.addListener(centerMarker,'dragend',drawCircle)
        map.addOverlay(centerMarker);
    }

    var center = map.getCenter();

    var bounds = new GLatLngBounds();


    var circlePoints = Array();

    with (Math) {
        if (circleUnits == 'KM') {
            var d = circleRadius/6378.8;    // radians
        }
        else { //miles
            var d = circleRadius/3963.189;  // radians
        }
laat=center.lat();
lnng=center.lng();
        var lat1 = (PI/180)* center.lat(); // radians
        var lng1 = (PI/180)* center.lng(); // radians

        for (var a = 0 ; a < 361 ; a++ ) {
            var tc = (PI/180)*a;
            var y = asin(sin(lat1)*cos(d)+cos(lat1)*sin(d)*cos(tc));
            var dlng = atan2(sin(tc)*sin(d)*cos(lat1),cos(d)-sin(lat1)*sin(y));
            var x = ((lng1-dlng+PI) % (2*PI)) - PI ; // MOD function
            var point = new GLatLng(parseFloat(y*(180/PI)),parseFloat(x*(180/PI)));
            circlePoints.push(point);
            bounds.extend(point);
        }

        if (d < 1.5678565720686044) {
            circle = new GPolygon(circlePoints, '#000000', 2, 1, '#000000', 0.25);  
        }
        else {
            circle = new GPolygon(circlePoints, '#000000', 2, 1);   
        }
        map.addOverlay(circle); 

        map.setZoom(map.getBoundsZoomLevel(bounds)-2);
        searchLocationsNear(center);
    }
}

   function searchLocationsNear(center) {

     var radius = document.getElementById('radiusInput').value;
     var searchUrl = 'phpsqlsearch_genxml.php?lat=' + laat + '&lng=' + lnng + '&radius=' + radius;
     GDownloadUrl(searchUrl, function(data) {
       var xml = GXml.parse(data);
       var markers = xml.documentElement.getElementsByTagName('marker');
     if (marker) {
        map.removeOverlay(marker);

    }

//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<


     //map.removeOverlay(marker);   /*how to remove the old markers without removing the central point mark. */
        //map.clearOverlays();


//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<

       var sidebar = document.getElementById('sidebar');
       sidebar.innerHTML = '';
       if (markers.length == 0) {
         sidebar.innerHTML = 'No results found.';
         map.setCenter(new GLatLng(40, -100), 4);
         return;
       }

       var bounds = new GLatLngBounds();
       for (var i = 0; i < markers.length; i++) {
         var name = markers[i].getAttribute('name');
         var address = markers[i].getAttribute('address');
         var distance = parseFloat(markers[i].getAttribute('distance'));
         var point = new GLatLng(parseFloat(markers[i].getAttribute('lat')),
                                 parseFloat(markers[i].getAttribute('lng')));

         var marker = createMarker(point, name, address);
         map.addOverlay(marker);
         var sidebarEntry = createSidebarEntry(marker, name, address, distance);
         sidebar.appendChild(sidebarEntry);
         bounds.extend(point);
       }
       map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds-2));
     });
   }

    function createMarker(point, name, address) {
      var marker = new GMarker(point);
      var html = '<b>' + name + '</b> <br/>' + address;
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }

    function createSidebarEntry(marker, name, address, distance) {
      var div = document.createElement('div');
      var html = '<b>' + name + '</b> (' + distance.toFixed(1) + ')<br/>' + address;
      div.innerHTML = html;
      div.style.cursor = 'pointer';
      div.style.marginBottom = '5px'; 
      GEvent.addDomListener(div, 'click', function() {
        GEvent.trigger(marker, 'click');
      });
      GEvent.addDomListener(div, 'mouseover', function() {
        div.style.backgroundColor = '#eee';
      });
      GEvent.addDomListener(div, 'mouseout', function() {
        div.style.backgroundColor = '#fff';
      });
      return div;
    }
    //]]>
  </script>
  </head>

  <body onload="load()" onunload="GUnload()">
  Radius: <input name="radiusInput" id="radiusInput" size="10" ><br>
                <input type="radio" name="units" id="unitsMI" checked value="MI">Miles<br>
                <input type="radio" name="units" id="unitsKM" value="KM">Kilometers<br><br>
                <input type="submit" value="Draw" onclick="drawCircle()"><br><br>

    <br/>
<div style="width:600px; font-family:Arial, 
sans-serif; font-size:11px; border:1px solid black">
  <table> 
    <tbody> 
      <tr>
        <td width="200" valign="top"> <div id="sidebar" style="overflow: auto; height: 400px; font-size: 11px; color: #000"></div>

        </td>
        <td> <div id="map" style="overflow: hidden; width:400px; height:400px"></div> </td>

      </tr> 
    </tbody>
  </table>
</div>    
  </body>
</html>
È stato utile?

Soluzione

L'API mappe non ha una funzione per cancellare tutti gli indicatori tranne uno.

Che cosa si può fare è di mantenere un allineamento globale di riferimenti marcatore per i marcatori che si sta andando a voler rimuovere. Quando si desidera rimuoverli, scorrere tale matrice rimuoverli uno ad uno.

Questo potrebbe forse sembrare un po 'inefficiente, ma map.clearOverlays () fa esattamente la stessa cosa ma scorre un array interno di sovrapposizioni che non si ha accesso. 

// global array of marker references
var gmarkers = [];

function createMarker(point, name, address) {
  var marker = new GMarker(point);
  gmarkers.push(marker); // store the reference
  ...
}

// remove those markers
for (var i=0; i<gmarkers.length; i++) {
  map.removeOverlay(gmarkers[i]);
}
// Wipe the array
gmarkers = [];
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top