API Google Maps {removeOverlay (__gVirt_NP_NN_NNPS<__ marqueur);} et {clearOverlays ();}

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

Question

J'ai un problème à éliminer les anciens marqueurs sans enlever le point central du cercle «il est aussi un marqueur »

la source :::: 

<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>
Était-ce utile?

La solution

L'API Maps ne dispose pas d'une fonction pour effacer tous les marqueurs, sauf un.

Ce que vous pouvez faire est de garder un tableau global de références de marqueurs pour les marqueurs que vous allez vouloir supprimer. Lorsque vous voulez les supprimer, boucle à travers ce tableau les supprimer un par un.

Cela pourrait peut-être regarder un peu inefficace, mais map.clearOverlays () fait exactement la même chose, mais les boucles à travers un réseau interne de superpositions que vous n'avez pas accès. 

// 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 = [];
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top