Question

我已经实现了google maps 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");
        }

Answer 1

它可能只是一个复制粘贴错误，但这段代码似乎不正确（'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代码。

标记渲染不止一次

1 个答案: