Question

我使用Google Maps API v3在我的网站上制作了Google地图。地图在页面加载时加载，并从坐标数组中应用多个标记/位置。

现在，我想要做的是使用ajax调用的新坐标数组动态更新标记/位置。

以下是我的标记示例：

<div id="map-canvas"></div> 


<script type="text/javascript">  
var LocationData = <?php echo $coordsarray; ?>;


function initialize() {
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
      zoom: 10,
      draggable: true
    } );

    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();

    for (var i in LocationData)
    {
        var p = LocationData[i];
        var latlng = new google.maps.LatLng(p[0], p[1]);
        bounds.extend(latlng);

        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            title: p[2]
        });

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

    map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);


//Ajax call
var interval = 5000;  // 1000 = 1 second, 3000 = 3 seconds
function doAjax() {
    jQuery.ajax({
            type: 'POST',
            url: '/codes/LiveVisitsStats/postlivecounter.php',
            dataType : 'html',
            success: function (data) {
            var arr = data.split('|');
                    jQuery('#counterint').html(arr[0]);
                    jQuery('#extrainfoscounter').html(arr[1]);                           


            },
            complete: function (data) {
                    // Schedule the next
                    setTimeout(doAjax, interval);
            }
    });
}
setTimeout(doAjax, interval);
</script>

所以我现在需要做的是通过Ajax调用发送一个协调数组，并在成功时使用新坐标更新现有的Google Map。我试图找到这个文件，但没有运气.. 如果有人知道这样做的好方法，请帮助。

Answer 1

我最终选择了一种完全不同的方法。这是我使用的代码，它起作用

<script type="text/javascript">     

    var locations = {}; //A repository for markers (and the data from which they were contructed).

    //initial dataset for markers
    var locs = {
        1: {
            info: '11111. Some random info here',
            lat: -37.8139,
            lng: 144.9634
        },
        2: {
            info: '22222. Some random info here',
            lat: 46.0553,
            lng: 14.5144
        },
        3: {
            info: '33333. Some random info here',
            lat: -33.7333,
            lng: 151.0833
        },
        4: {
            info: '44444. Some random info here',
            lat: 27.9798,
            lng: -81.731
        }
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 1,
        maxZoom: 8,
        minZoom: 1,
        streetViewControl: false,
        center: new google.maps.LatLng(30, 30),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();

    function setMarkers(locObj) {
        jQuery.each(locObj, function (key, loc) {
            if (!locations[key] && loc.lat !== undefined && loc.lng !== undefined) {
                //Marker has not yet been made (and there's enough data to create one).

                //Create marker
                loc.marker = new google.maps.Marker({
                    position: new google.maps.LatLng(loc.lat, loc.lng),
                    map: map
                });

                //Attach click listener to marker
                google.maps.event.addListener(loc.marker, 'click', (function (key) {
                    return function () {
                        infowindow.setContent(locations[key].info);
                        infowindow.open(map, locations[key].marker);
                    }
                })(key));

                //Remember loc in the `locations` so its info can be displayed and so its marker can be deleted.
                locations[key] = loc;
            } else if (locations[key] && loc.remove) {
                //Remove marker from map
                if (locations[key].marker) {
                    locations[key].marker.setMap(null);
                }
                //Remove element from `locations`
                delete locations[key];
            } else if (locations[key]) {
                //Update the previous data object with the latest data.
                jQuery.extend(locations[key], loc);
                if (loc.lat !== undefined && loc.lng !== undefined) {
                    //Update marker position (maybe not necessary but doesn't hurt).
                    locations[key].marker.setPosition(
                    new google.maps.LatLng(loc.lat, loc.lng));
                }
                //locations[key].info looks after itself.
            }
        });
    }




    setMarkers(locs); //Create markers from the initial dataset served with the document.
    //ajaxObj.get(); //Start the get cycle.

    // *******************



//Ajax code
var interval = 5000;  // 1000 = 1 second, 3000 = 3 seconds
function doAjax() {
    jQuery.ajax({
            type: 'POST',
            url: '/codes/LiveVisitsStats/postlivecounter.php',
            dataType : 'html',
            success: function (data) {
            var arr = data.split('|');
                    jQuery('#counterint').html(arr[0]);
                    jQuery('#extrainfoscounter').html(arr[1]);   
                    jQuery('#testdiv').html(arr[2]);         



//test: simulated ajax
var testLocs = {
        1: {
            info: '1. New Random info and new position',
            lat: -37,
            lng: 124.9634
        },
        2: {
            lat: 70,
            lng: 14.5144
        },
        3: {
            info: '3. New Random info'
        },
        4: {
            remove: true
        },
        5: {
            info: '55555. Added',
            lat: -37,
            lng: 0
        }
    };
setMarkers(testLocs);                   



            },
            complete: function (data) {
                    // Schedule the next
                    setTimeout(doAjax, interval);
            }
    });
}
setTimeout(doAjax, interval);

</script>

谷歌地图 - 如何使用ajax / PHP更新现有地图的标记/位置？

1 个答案: