0

私は Javascript の初心者で、Google Maps API v3 の動作を理解しようとしています。このサイトで、最も支持された回答である質問に対する素晴らしい回答を見つけました。Google Maps JS API v3 - シンプルな複数マーカーの例

> <!DOCTYPE html> <html>  <head>    <meta http-equiv="content-type"
> content="text/html; charset=UTF-8" />    <title>Google Maps Multiple
> Markers</title>    <script
> src="http://maps.google.com/maps/api/js?sensor=false" 
>           type="text/javascript"></script> </head>  <body>   <div id="map" style="width: 500px; height: 400px;"></div>
> 
>   <script type="text/javascript">
>     var locations = [
>       ['Bondi Beach', -33.890542, 151.274856, 4],
>       ['Coogee Beach', -33.923036, 151.259052, 5],
>       ['Cronulla Beach', -34.028249, 151.157507, 3],
>       ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
>       ['Maroubra Beach', -33.950198, 151.259302, 1]
>     ];
> 
>     var map = new google.maps.Map(document.getElementById('map'), {
>       zoom: 10,
>       center: new google.maps.LatLng(-33.92, 151.25),
>       mapTypeId: google.maps.MapTypeId.ROADMAP
>     });
> 
>     var infowindow = new google.maps.InfoWindow();
> 
>     var marker, i;
> 
>     for (i = 0; i < locations.length; i++) {  
>       marker = new google.maps.Marker({
>         position: new google.maps.LatLng(locations[i][1], locations[i][2]),
>         map: map
>       });
> 
>       google.maps.event.addListener(marker, 'click', (function(marker, i) {
>         return function() {
>           infowindow.setContent(locations[i][0]);
>           infowindow.open(map, marker);
>         }
>       })(marker, i));
>     }   </script> </body> </html>

これは魅力のように機能しますが、特定のマーカーを削除する機能を実装しようとしています。私が何をしようとしても、コードがクラッシュします。私の最後の試みは、次のようなすべてのマーカーを削除する関数を呼び出すことでした:

    function deleteMarker(){
    for (i = 0; i < locations.length; i++) { 

        marker.setMap(null);
    }
}

これはまだ機能しません。

ここで私が見逃しているのは何ですか？これを理解しようと何時間も費やしたので、すべての助けに感謝します...

4

2 に答える 2

2

すべてのループでマーカーオブジェクトを上書きしているため、関数 deleteMarker は最後のマーカーのみを削除できます。

作成したマーカーをどこかに保存します (locations-array が適しています)。

for (i = 0; i < locations.length; i++) {  
       locations[i][4] 
         = marker 
           = new google.maps.Marker({
         position: new google.maps.LatLng(locations[i][1], locations[i][2]),
         map: map
       });

これで、後でマーカー オブジェクトにアクセスできるようになりました。

function deleteMarker(m){
    for (i = 0; i < locations.length; i++) { 
         if(m===locations[i][3]){
          locations[i][4].setMap(null);
         } 
    }
}
于 2012-10-26T13:41:41.577 に答える
0 
    function initmap(result) {
        if (result.length > 0) {
            var map_options = {
                center: new google.maps.LatLng(result[0].latitude, result[0].longitude),
                zoom: zoomcount,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

            var info_window = new google.maps.InfoWindow({
                content: 'loading'
            });

            var t = []; // --> Title
            var x = []; // --> latitude
            var y = []; // --> longitude
            var h = []; // --> HTML
            var f = "female.png";
            var m = "male.png";
            // alert(obj.value);
            // var result = getPingDetails();

            if (result.length > 0) {
                for (_count = 0; _count < result.length; _count++) {
                    t.push(result[_count].mobileuser);
                    x.push(result[_count].latitude);
                    y.push(result[_count].longitude);
                    var src = "http://www.eangelgps.com/image.ashx?id=" + result[_count].mobileuser;
                    //if (result[_count].gender == "Male") src += m;
                    //else src += f;
                    //h.push('<div style="height:120px;"><p><img src="' + src + '" /><strong>' + result[_count].firstname + " " + result[_count].lastname + '</strong><br/>' + result[_count].companyname + '(' + result[_count].designation + ')<br/>Gender:' + result[_count].gender + '<br />Mobile:' + result[_count].mobilenumber + '<br /><a href="#" onclick="moreinfo(\'' + result[_count].mobileuser + '\');">More details...</a><br /><br /><input type="button" value="Acknowledge" onclick="javascript:acknowledged(' + result[_count].pingId + ');" /></p></div>');
                    if (result[_count].acknowledge == "False" && result[_count].done == "False") {
                        h.push('<div style="width:290px;"><div style="width:290px; height:auto;"><div style="float:left;"><img src="' + src + '" width="100" height="auto" /></div><div>' +
                       '<b style="color:#004bb2; padding:7px 0 0 10px;">' + result[_count].firstname + " " + result[_count].lastname + '</b></div><div>' +
                       '<span style="font-size:15px; color:#292727;line-height:20px;">' + result[_count].companyname + '(' + result[_count].designation + ')</span><br />' +
                       '<span style="font-size:15px; color:#292727; line-height:20px;">Gender :' + result[_count].gender + '</span><br />' +
                       '<span style="font-size:15px; color:#292727;line-height:18px;">Mobile :' + result[_count].mobilenumber + '</span><br />' +
                       '<span style="font-size:11px; color:#004bb2; font-weight:bold;"><a href="#" onclick="moreinfo(\'' + result[_count].mobileuser + '\');">More details</a></span></div>' +
                       '<div style="margin-top:17px;">' +
                       '<input type="button" value="Acknowledge" class="button" onclick="javascript:acknowledged(' + result[_count].pingId + ',this);" /><input type="button" class="button" value="Done" style="display:none;" onclick="javascript:markdone(' + result[_count].pingId + ',this);" />' +
                       '</div></div></div>');
                    }
                    else if (result[_count].acknowledge == "True" && result[_count].done == "False") {
                        h.push('<div style="width:290px;"><div style="width:290px; height:auto;"><div style="float:left;"><img src="' + src + '" width="100" height="auto" /></div><div>' +
                       '<b style="color:#004bb2; padding:7px 0 0 10px;">' + result[_count].firstname + " " + result[_count].lastname + '</b></div><div>' +
                       '<span style="font-size:15px; color:#292727;line-height:20px;">' + result[_count].companyname + '(' + result[_count].designation + ')</span><br />' +
                       '<span style="font-size:15px; color:#292727; line-height:20px;">Gender :' + result[_count].gender + '</span><br />' +
                       '<span style="font-size:15px; color:#292727;line-height:18px;">Mobile :' + result[_count].mobilenumber + '</span><br />' +
                       '<span style="font-size:11px; color:#004bb2; font-weight:bold;"><a href="#" onclick="moreinfo(\'' + result[_count].mobileuser + '\');">More details</a></span></div>' +
                       '<div style="margin-top:17px;">' +
                       '<input type="button" value="Done" class="button" onclick="javascript:markdone(' + result[_count].pingId + ',this);" />' +
                       '</div></div></div>');
                    }
                }
                // t.push('Location Name 2');
                // x.push(33.84659);
                // y.push(-84.35686);
                // h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');

                var i = 0;
                for (item in t) {

                     m = new google.maps.Marker({
                        map: google_map,
                        animation: google.maps.Animation.DROP,
                        title: t[i],
                        position: new google.maps.LatLng(x[i], y[i]), html: h[i]
                        //position:
                    });

                    google.maps.event.addListener(m, 'click', function () {
                        info_window.setContent(this.html);
                        info_window.open(google_map, this);
                    });
                    i++;
                }
            }
            //result = null;
        }

        //else { window.document.getElementById('map_canvas').innerHTML = '<div style="vertical-align:middle;width:50%; height:50%;margin:0 auto; padding:20% 0 0 0;"> On click of iOS user name on left panel<br /> OR <br /> Check state(s) on right panel <br /> <br /> Google Map will update here accordingly.</div>'; }
    }


 var markers = [];
    function setAllMap(google_map) {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(google_map);
        }
    }
    function clearMarkers() {  
        //setMap(null); or
        setMap(clearMarkers);
    }
于 2013-12-10T07:03:41.803 に答える