javascript - 我无法将数据从网络服务返回到谷歌地图并创建标记

Question

这个想法是在包含数据(纬度和经度)的谷歌地图中创建标记。当我从 ajax 调用 Web 服务时，谷歌地图会加载并只显示一张没有任何标记的空 map 。哪里有问题 ？

<script>
    function initialize() 
    {
        var latitude = 38.58;
        var longitude = 23.65;
        var radius = 8000;
        var center = new google.maps.LatLng(latitude, longitude);
        var bounds = new google.maps.Circle(
            { 
              center: center, radius: radius   
            }).getBounds();

        var mapOptions = 
            {
                center: center,
                zoom: 9,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                scrollwheel: false
            };

        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

        setMarkers(center, radius, map);
    }

    function setMarkers(center, radius, map) 
    {
        var jsonString = (function ()
        {
            var json = null;
            $.ajax({
                url : 'WebServiceTest.asmx/convertDataTabletoString',
                contentType: 'application/json; charset = utf-8',
                method: 'get',
                dataType: "json",
                success: function (data)
                {
                    json = data;
                },
                error : function(err)
                {
                    alert(err);
                }
            });
            return jsonString;
        })();

        var circle = new google.maps.Circle({
            strokeColor: '#000000',
            strokeOpacity: 0.25,
            strokeWeight: 1.0,
            fillColor: '#ffffff',
            fillOpacity: 0.1,
            clickable: false,
            map: map,
            center: center,
            radius: radius
        });
        var bounds = circle.getBounds();


        for (i in jsonString) {
            var data = jsonString[i],
            latLng = new google.maps.LatLng(data.lat, data.lng);


                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    title: data.title
                });
                infoBox(map, marker, data);
            }
        }


    function infoBox(map, marker, data) {
        var infoWindow = new google.maps.InfoWindow();
        // Attaching a click event to the current marker
        google.maps.event.addListener(marker, "click", function (e) {
            infoWindow.setContent(data.STREET);
            infoWindow.open(map, marker);
        });


        (function (marker, data) {
            google.maps.event.addListener(marker, "click", function (e) {
                infoWindow.setContent(data.STREET);
                infoWindow.open(map, marker);
            });
        })(marker, data);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

Answer 1

使用Jquery.parseJSON可以更快地实现这一点命令。该命令用于解析Json返回的数据。结合parseJson命令和google提供的一些知识Placing simple markers可以导致想要的结果。链接中提供了代码示例。