2

Googleマップv3で、15を超えてズームインするとマップにマーカーの位置が表示されますが、ズームアウトするとマーカーを非表示にしたいです。これを行う関数が見つかりません。これまでのところ、何もうまくいきませんでした。

だから、これは私のスクリプトです：

<script type="text/javascript">
        function initialize() {
            var mapOptions = {
              zoom: 15,
              center: new google.maps.LatLng(52.429236, 6.281255),
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

            setMarkers(map, points);

            google.maps.event.addListener(map, 'zoom_changed', function()
{
                        if (map.getZoom() > 15) {
                                setMarkers(map, points);
                        } else {
                                hideMarkers(map, points);

                        }
                           }); 

        }


        var points = [
            ['Location 1', 52.420891, 6.280204],
            ['Location 2', 52.420125, 6.279131],
            ['Location 3', 52.420125, 6.240125]
        ];


        function setMarkers(map, locations) {
            var image = new google.maps.MarkerImage('../images/map/beachflag.png',
            new google.maps.Size(20, 32),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32));
            var shadow = new google.maps.MarkerImage('../images/map/beachflag_shadow.png',
            new google.maps.Size(37, 32),
            new google.maps.Point(0,0),
            new google.maps.Point(0, 32));
            var shape = {
                coord: [1, 1, 1, 20, 18, 20, 18 , 1],
                type: 'poly'
            };

            for (var i = 0; i < locations.length; i++) {
                var point = locations[i];
                var myLatLng = new google.maps.LatLng(point[1], point[2]);
                var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                shadow: shadow,
                icon: image,
                shape: shape,
                title: point[0]
                });
            }
        }

        function hideMarkers(map, locations) {
            /* Remove All Markers */


            console.log("Remove All Markers");
        }
            </script>

誰でもこれを手伝ってくれますか？

4

2 に答える 2

6

私はあなたのコードを修正しました。すべてのマーカーの参照を配列に保持しています。hideMarkers 内では、マップを null に設定してマップから削除しています。

 function initialize() {
        var mapOptions = {
            zoom : 15,
            center : new google.maps.LatLng(52.429236, 6.281255),
            mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        var markers = setMarkers(map, access_points);

        google.maps.event.addListener(map, 'zoom_changed', function() {
            if (map.getZoom() > 15) {
                setMarkers(map, access_points);
            }
            else {
                hideMarkers(map, access_points, markers);

            }
        });

    }

    var access_points = [ [ 'Location 1', 52.420891, 6.280204 ], [ 'Location 2', 52.420125, 6.279131 ], [ 'Location 3', 52.420125, 6.240125 ] ];

    function setMarkers(map, locations) {
        var markers= [];
        var image = new google.maps.MarkerImage('../images/map/beachflag.png', new google.maps.Size(20, 32), new google.maps.Point(0, 0), new google.maps.Point(0,
                32));
        var shadow = new google.maps.MarkerImage('../images/map/beachflag_shadow.png', new google.maps.Size(37, 32), new google.maps.Point(0, 0),
                new google.maps.Point(0, 32));
        var shape = {
            coord : [ 1, 1, 1, 20, 18, 20, 18, 1 ],
            type : 'poly'
        };

        for ( var i = 0; i < locations.length; i++) {
            var access_point = locations[i];
            var myLatLng = new google.maps.LatLng(access_point[1], access_point[2]);
            var marker = new google.maps.Marker({
                position : myLatLng,
                map : map,
                shadow : shadow,
                icon : image,
                shape : shape,
                title : access_point[0],
                zIndex : access_point[3]
            }); 
            markers.push(marker);
        }
        return markers;
    }

    function hideMarkers(map, locations, markers) {
        /* Remove All Markers */
        while(markers.length){
            markers.pop().setMap(null);
        }

        console.log("Remove All Markers");
    }
于 2012-09-21T08:25:01.923 に答える
0

最も簡単な方法は、setMarkersとhideMarkers関数の両方からアクセスできる配列にマーカーが含まれるように、コードを少し変更することです。次に、クラスsetMapのメソッドを使用して、マップからマーカーを追加/削除できます (マップからマーカーを削除するにはに渡します)。MarkernullsetMap

var markers = [];

function createMarkers(/* some args */) {
    // Create your markers, and add each one to the `markers` array
}

function setMarkers() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(yourMap); //Add the marker to the map
    }
}

function hideMarkers() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null); //Remove the marker from the map
    }
}

Markerこのアプローチは、インスタンスを表示するたびにすべてのインスタンスを再作成する必要がないことも意味します。

于 2012-09-21T08:24:22.627 に答える