0

私はGoogleマップv3を実装しました.bounds_changedイベント中に更新されますが、イベントがトリガーされてマーカーが複数回レンダリングされると問題が発生します.

メーカーをマーカーマネージャーに追加しました。

        var map = null;
        var myLatLng = null;
        var sidebarHtml = "";
        var infowindow = infowindow = new google.maps.InfoWindow({});;
        var mgr = null;
        var currentBounds = null;
        var xml = null;
        var markers = null;
        var markersArray = [];

        var customIcons =  {
            restaurant: {
                icon: 'images/icon_01.png'
            },
            bar: {
                icon: 'images/icon_02.png'
            }
        }

        function load() {
            var myOptions = ({
                center: new google.maps.LatLng(47.6145, -122.3418),
                zoom: 13,
                mapTypeId: 'roadmap'
            });
            map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
            mgr = new MarkerManager(map, {fitBounds: true});

            google.maps.event.addListener(map, 'bounds_changed', downloadUrl);
        }

        function downloadUrl() {                
            var request = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest;
            var params = "";
            var url = "phpmysqlajax_genxml.php";

            request.onreadystatechange = function() {
                if(request.readyState == 4) {
                    //alert(request.responseXML);
                    useTheData(request);
                }
            };

            request.open("GET", url + params, true);
            request.send(null);
        }

        function useTheData(data) {
            currentBounds = map.getBounds();
            xml = data.responseXML;
            markers = xml.documentElement.getElementsByTagName("marker");
            mgr.clearMarkers();

            if (!currentBounds) currentBounds = new google.maps.LatLngBounds();

            sidebarHtml = '<ul class="sidebar">';

            for(var i = 0; i < markers.length; i++) {

                var name = markers[i].getAttribute("name");
                var address = markers[i].getAttribute("address");
                var lat = parseFloat(markers[i].getAttribute("lat"));
                var lng = parseFloat(markers[i].getAttribute("lng"));
                var type = markers[i].getAttribute("type");
                var latlng = new google.maps.LatLng(lat, lng);

                if (currentBounds.contains(latlng)) {
                    attachMarker( name, address, latlng, type );
                    markerSidebarEntry(i);
                }
            }

            sidebarHtml += "</ul>";

            document.getElementById("sidebar").innerHTML = sidebarHtml;
        };

        function attachMarker( name, address, latlng, type ) {

            var marker = new google.maps.Marker({
                position : latlng,
                map: map,
                icon     : customIcons[type].icon
            });
            mgr.addMarker(marker, 5);

            markersArray.push(marker);

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent( address );
                infowindow.open(map, this);
            });

            // add marker here.
        }

        function markerSidebarEntry(i) {
             var name = markers[i].getAttribute("name");

             sidebarHtml += '<li class="' + markers[i].getAttribute("type") + '"><a href="javascript:markerClick(' + i + ');">' + name + '</a></li>';
        }

        function markerClick(i) {
            google.maps.event.trigger(markersArray[i], "click");
        }
4

1 に答える 1

0

単なるコピー アンド ペースト エラーかもしれませんが、このコードは正しくないようです (「infowindow」の二重宣言と末尾の ; の重複):

var infowindow = infowindow = new google.maps.InfoWindow({});;

また、ここでは {} を囲む () は必要ありません

var myOptions = ({
                center: new google.maps.LatLng(47.6145, -122.3418),
                zoom: 13,
                mapTypeId: 'roadmap'
            });

JSLintなどで JS コードを実行することをお勧めします。

于 2011-12-11T13:50:29.923 に答える