Question

我正在尝试使用ajax填充的Google Map对象数组在google.maps.LatLng上放置大约120个标记

这是我的剧本

<script type ="text/javascript">
    $.ajaxSetup({
        cache: false
    });




    var gMapsLoaded = false;
    var latlng = [];
    var returnValue;
    var marker;
    var xmlDoc;


    $.ajax({
        type: "POST",
        url: "map.aspx/getLatLng",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            xmlDoc = $.parseXML(response.d);
            $(xmlDoc).find("Table").each(function () {
                latlng.push(new google.maps.LatLng($(this).find("lat").text(), $(this).find("lng").text()));
            });
            //alert(latlng.length.toString());
        },
        failure: function (response) {
            alert(response.d);
        },
        error: function (response) {
            alert(response.d);
        }
    });


    window.gMapsCallback = function () {
        gMapsLoaded = true;
        $(window).trigger('gMapsLoaded');
    }
    window.loadGoogleMaps = function () {
        if (gMapsLoaded) return window.gMapsCallback();
        var script_tag = document.createElement('script');
        script_tag.setAttribute("type", "text/javascript");
        script_tag.setAttribute("src", "http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
        (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
    }

    $(document).ready(function () {
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(24.678517, 46.702267),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map'), mapOptions);


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

                marker = new google.maps.Marker({
                    map: map,
                    position: latlng[i]
                });
                var infowindow = new google.maps.InfoWindow({
                    content: 'Location info:<br/>Country Name:<br/>LatLng:'
                });
                google.maps.event.addListener(marker, 'click', function () {
                    // Calling the open method of the infoWindow 
                    infowindow.open(map, marker);
                });
            }
        }

        $(window).bind('gMapsLoaded', initialize);
        window.loadGoogleMaps();
    });


</script>

HTML

<div id ="map"   style="width:850px; bottom:20px;  height: 500px;">
</div>

我想我在这里错过了一些东西我应该将latlng google.maps.LatLng个LatLng个对象解析为position，然后再将其分配给marker = new google.maps.Marker({ map: map, position: latlng[i] });吗？

{{1}}

我们将不胜感激，提前谢谢，

Answer 1

我认为问题在于你没有考虑到ajax请求的异步性质。

你需要在ajax请求完成后构建标记。

将你的每个循环放在一个函数中，并在你成功的ajax回调的最后9点内调用它。

你还需要在谷歌地图加载后加载ajax，否则你将无法创建谷歌latlng对象因为谷歌地图librbary可能尚未加载。

withjout重写一切可能有用的东西..

$.ajaxSetup({
    cache: false
});




var gMapsLoaded = false;
var latlng = [];
var returnValue;
var marker;
var xmlDoc;





window.gMapsCallback = function () {
    gMapsLoaded = true;
    $(window).trigger('gMapsLoaded');
}
window.loadGoogleMaps = function () {
    if (gMapsLoaded) return window.gMapsCallback();
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type", "text/javascript");
    script_tag.setAttribute("src", "http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
}

$(document).ready(function () {
    function initialize() {
        var mapOptions = {
            zoom: 8,
            center: new google.maps.LatLng(24.678517, 46.702267),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map'), mapOptions);


 $.ajax({
    type: "POST",
    url: "map.aspx/getLatLng",
    data: '{}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        xmlDoc = $.parseXML(response.d);
        $(xmlDoc).find("Table").each(function () {
            latlng.push(new google.maps.LatLng($(this).find("lat").text(), $(this).find("lng").text()));
        });

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

            marker = new google.maps.Marker({
                map: map,
                position: latlng[i]
            });
            var infowindow = new google.maps.InfoWindow({
                content: 'Location info:<br/>Country Name:<br/>LatLng:'
            });
            google.maps.event.addListener(marker, 'click', function () {
                // Calling the open method of the infoWindow 
                infowindow.open(map, marker);
            });
        }

    },
    failure: function (response) {
        alert(response.d);
    },
    error: function (response) {
        alert(response.d);
    }
});



    }

    $(window).bind('gMapsLoaded', initialize);
    window.loadGoogleMaps();
});

Answer 2

我在地图初始化后移动了xml处理

$(document).ready(function () {
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(24.678517, 46.702267),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById('map'), mapOptions);


            xmlDoc = $.parseXML(stringxml);
            $(xmlDoc).find("Table").each(function () {
                marker = new google.maps.Marker({
                    map: map,
                    position: new google.maps.LatLng($(this).find("lat").text(), $(this).find("lng").text())
                });
                var infowindow = new google.maps.InfoWindow({
                    content: 'Location info:<br/>Country Name:<br/>LatLng:'
                });
                google.maps.event.addListener(marker, 'click', function () {
                    // Calling the open method of the infoWindow 
                    infowindow.open(map, marker);
                });
            });





        }

        $(window).bind('gMapsLoaded', initialize);
        window.loadGoogleMaps();
    });

每个标记都在适当的位置。

谢谢你们

使用ajax填充谷歌地图标记

2 个答案: