API Карт Google {removeOverlay(marker);} И {clearOverlays();}

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

Вопрос

у меня проблема с удалением старых маркеров без удаления центральной точки круга "это тоже маркер"

источник ::::

<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>
Это было полезно?

Решение

API Карт не имеет функции очистки всех маркеров, кроме одного.

Что вы можете сделать, так это сохранить глобальный массив ссылок на маркеры, которые вы хотите удалить.Если вы хотите удалить их, пройдите по этому массиву, удаляя их один за другим.

Возможно, это выглядит немного неэффективно, но map.clearOverlays() делает то же самое, но проходит через внутренний массив наложений, к которым у вас нет доступа.

// 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 = [];
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top