0

.setMat(null) を使用してマップ内のマーカーを削除できない理由がわかりません。

コードは次のとおりです。

<!DOCTYPE html>
<HTML>  <HEAD>
        <script type="text/javascript">
            var geocoder;
            var map;
            var lat_;
            var lng_;
            var contentString="";
            var infowindow = null;
            var markerNodes = null;

            function initialize() {
                geocoder = new google.maps.Geocoder();
                var latlng = new google.maps.LatLng(41.92, 12.93);
                var mapOptions = {
                  zoom: 6,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                }
                map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            }

            function searchLocations() {
                var ind_r_g = document.getElementById("indirizzoR").value;
                var civ_r_g = document.getElementById("civicoR").value;
                var citta_r_g = document.getElementById("cittaR").value;
                var paese_r_g = document.getElementById("paeseR").value;
                if(civ_r_g != 0 || civ_r_g != ""){
                var address = ind_r_g + civ_r_g + ", " +  citta_r_g + ", " + paese_r_g;
                }
                else{
                var address = ind_r_g +  ", " +  citta_r_g + ", " + paese_r_g;
                }

                var geocoder = new google.maps.Geocoder();
                geocoder.geocode({address: address}, function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    searchLocationsNear(results[0].geometry.location);
                } else {
                    alert(address + ' not found');
                }
                });
            }

            function clearLocations() {
            if(markerNodes!=null){
                alert(markerNodes.length);
                for (var i = 0; i < markerNodes.length; i++) {
                    markers[i].setMap(null);
                }
                }
            }               


            function searchLocationsNear(center) {
                alert("beforeclearlocations");
                clearLocations();
                alert("afterclearlocations");
                var radius = document.getElementById('raggioR').value;
                var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
                infowindow = new google.maps.InfoWindow({content: contentString});

                downloadUrl(searchUrl, function(data) {
                    var xml = data.responseXML;
                    markerNodes = xml.documentElement.getElementsByTagName("marker");
                    for (var i = 0; i < markerNodes.length; i++) {

                        var name = markerNodes[i].getAttribute("name");
                        var address = markerNodes[i].getAttribute("address");
                        var point = new google.maps.LatLng(
                            parseFloat(markerNodes[i].getAttribute("lat")),
                            parseFloat(markerNodes[i].getAttribute("lng")));
                        var image = '/img/'+ name +'.png';

                    contentString = '<div id="content">'+
                '<h3 id="firstHeading" class="firstHeading">' + markerNodes[i].getAttribute("name")+ '</h3>'+
                '<div id="bodyContent"><u>Indirizzo</u>: ' + markerNodes[i].getAttribute("address_indirizzo")  +'<br><u>Citta</u>: '+ markerNodes[i].getAttribute("city")
                + '<br><u>Paese</u>: ' + markerNodes[i].getAttribute("country") + '<br><u>Prezzo Benzina</u>: ' + markerNodes[i].getAttribute("prezzoB") + ' (euro/litro)</div>' + 
                '<u>Prezzo Diesel</u>: ' + markerNodes[i].getAttribute("prezzoD") +
                ' (euro/litro)</div>'+
                '</div>';       

                        var marker = new google.maps.Marker({
                            id: i,
                            map: map,
                            icon: image,
                            position: point,
                            html: contentString
                        });
                        google.maps.event.addListener(marker, 'click', function() {
                            infowindow.setContent(this.html);
                            infowindow.open(map,this);
                        });
                    }
                });
            }   


            function downloadUrl(url, callback) {
                var request = window.ActiveXObject ?
                    new ActiveXObject('Microsoft.XMLHTTP') :
                    new XMLHttpRequest;

                request.onreadystatechange = function() {
                    if (request.readyState == 4) {
                        request.onreadystatechange = doNothing;
                        callback(request, request.status);
                    }
                };

                request.open('GET', url, true);
                request.send(null);
            }


            function doNothing() {}

            function check_form_r(){
                var check_i_r = document.getElementById("indirizzoR").value;
                var check_civ_r = document.getElementById("civicoR").value;
                var check_cit_r = document.getElementById("cittaR").value;
                var check_pa_r = document.getElementById("paeseR").value;           
                var check_ra_r = document.getElementById("raggioR").value;
                if( check_i_r == ""  || check_cit_r == ""  || check_pa_r == "" || check_ra_r== ""){
                    alert("Tutti i campi con asterisco sono obbligatori");
                }
                else{
                searchLocations();
                }
            }

    </script>
    </HEAD>
    <BODY onload="initialize();">
    <div  class="insertbox" style="center">
        <h5>CERCA I BENZINAI INTORNO A TE!</h5>
                    Indirizzo (*): <br/>
                    <input type="text" name="indirizzoR" id="indirizzoR"/> <br/>
                    Civico: <br/>
                    <input type="text" size="4" name="civicoR" id="civicoR"/> <br/>
                    Città (*): <br/>
                    <input type="text" name="cittaR" id="cittaR"/> <br/>
                    Paese (*): <br/>
                    <input type="text" name="paeseR" id="paeseR"/> <br/>
                    <label for="raggioR">Raggio di ricerca (*):</label><br/>
                    <select id="raggioR" name="raggioR">
                    <option value="" selected="selected">-- seleziona --</option>
                    <option value="2" id="raggio2">2 km</option>
                    <option value="5" id="raggio5">5 km</option>
                    <option value="10" id="raggio10">10 km</option>
                    </select><br/>
                    <input type="button" value="cerca"  onclick="check_form_r()"/>
                    <br/>
                    <br/>
                    (i campi con asterisco sono obbligatori)
    </div>
<div class="mapbox" id="map_canvas" style="width:700px; height:350px" ></div>   
</BODY>

コードの重要なポイントは、clearLocations()前に配置されたすべてのマーカーを削除するために内部に配置する必要がある関数を理解していないことです。

4

1 に答える 1

0

これをして：

for (var i = 0; i < markerNodes.length; i++) {
                    markers[i].setMap(null);

そうではありませんか：

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

あなたのコードには配列が呼び出さmarkersれていません (実際、これを実行しても JS エラーが発生しなかったとしたら驚きです)。

しかし、これでもうまくいかないと思います。markerNodes は、マップ上のアイテムの配列のように見えます。マップを初期化するときに空の配列を作成し、追加するときに各マーカーをその配列にプッシュすることをお勧めします。

これは、コードの関連部分の更新です。新しいグローバル変数markersと、各マーカーが作成されるときにそこにプッシュされる場所に注目してください。そして、それがclearLocations関数で使用する配列です。

var geocoder;
var map;
var lat_;
var lng_;
var contentString="";
var infowindow = null;
var markerNodes = null;
var markers = [];

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(41.92, 12.93);
    var mapOptions = {
      zoom: 6,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function clearLocations() {
    alert(markers.length);
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
}               

function searchLocationsNear(center) {
    alert("beforeclearlocations");
    clearLocations();
    alert("afterclearlocations");
    var radius = document.getElementById('raggioR').value;
    var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng() + '&radius=' + radius;
    infowindow = new google.maps.InfoWindow({content: contentString});

    downloadUrl(searchUrl, function(data) {
        var xml = data.responseXML;
        markerNodes = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markerNodes.length; i++) {

            var name = markerNodes[i].getAttribute("name");
            var address = markerNodes[i].getAttribute("address");
            var point = new google.maps.LatLng(
                parseFloat(markerNodes[i].getAttribute("lat")),
                parseFloat(markerNodes[i].getAttribute("lng")));
            var image = '/img/'+ name +'.png';

        contentString = '<div id="content">'+
    '<h3 id="firstHeading" class="firstHeading">' + markerNodes[i].getAttribute("name")+ '</h3>'+
    '<div id="bodyContent"><u>Indirizzo</u>: ' + markerNodes[i].getAttribute("address_indirizzo")  +'<br><u>Citta</u>: '+ markerNodes[i].getAttribute("city")
    + '<br><u>Paese</u>: ' + markerNodes[i].getAttribute("country") + '<br><u>Prezzo Benzina</u>: ' + markerNodes[i].getAttribute("prezzoB") + ' (euro/litro)</div>' + 
    '<u>Prezzo Diesel</u>: ' + markerNodes[i].getAttribute("prezzoD") +
    ' (euro/litro)</div>'+
    '</div>';       

            var marker = new google.maps.Marker({
                id: i,
                map: map,
                icon: image,
                position: point,
                html: contentString
            });
            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(this.html);
                infowindow.open(map,this);
            });

            // add this marker to our array
            markers.push(marker);
        }
    });
}
于 2013-02-12T16:22:56.073 に答える