如何将 JSON 结果放在 Google 地图上？答案

【问题标题】：how to get JSON Results placed on Google Maps?如何将 JSON 结果放在 Google 地图上？
【发布时间】：2011-12-11 15:35:01
【问题描述】：

我的 JSON 结果如下所示，我已从数据库中提取出来，我想使用基于此处位置显示的标记在谷歌地图上显示结果；

{
    "user": [{
        "name" : "xxxxxxxxx",
        "posn" : [53.491314, -2.249451]
    }, {
        "name" : "xxxxxxxxxx",
        "posn" : [54.949231, -1.620483]
    }]
}

如何在谷歌地图上获取用户名和位置？在下面为我的 googlemaps 编码；

<div id="map_canvas" style="width:800px; height:600px;"></div>

    <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script src="/Scripts/markermanager.js" type="text/javascript"></script>
    <script src="/Scripts/google_northamerica_offices.js" type="text/javascript"></script>  

    <script type="text/javascript">

        var map;
        var bounds = new google.maps.LatLngBounds();
        var mgr;

        function initialize() {
            var myOptions = {
                zoom: 4,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            mgr = new MarkerManager(map);
            google.maps.event.addListener(mgr, 'loaded', function () {
                for (var i = 0; i < 10; i++) {
                    var latlng = new google.maps.LatLng(Math.random() * 180 - 90, Math.random() * 360 - 180);
                    bounds.extend(latlng);
                    var marker = new google.maps.Marker({
                        position: latlng,
                        // animation: google.maps.Animation.DROP, // animation disabled because it slows down performance
                        title: "RedStar Creative Marker #" + i
                    });
                    mgr.addMarker(marker, 0);
                }
                mgr.refresh();

                map.fitBounds(bounds);
            });
        }
        $(document).ready(function () {
            initialize();
        });

    </script>

我试过这样做，不知道这样做是否正确，第一次使用JSON；

    function setupUserMarkers() {
        var markers = [];
        for (var j in layer["users"]) {
            var place = layer["users"][j];
            var title = place["name"];
            var posn = new GLatLng(place["posn"][0], place["posn"][1]);
            var marker = createMarker(posn,title); 
            markers.push(marker);
            allmarkers.push(marker);
        }
        mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
    }
    mgr.refresh();
}

更新：使用 AJAX 我能够根据 JSON 结果添加两个标记，试图弄清楚如何添加一个窗口弹出窗口，以便在窗口中显示该人的图像.我知道我需要一个 google.maps.event.addListener 并且下一点我现在要研究，希望下面的 AJAX 能帮助其他遇到类似问题的人。

$.ajax({
                    url: "/Home/GetUser",
                    context: document.body,
                    success: function (data) {
                        for (var i = 0; i < data.user.length; i++) {
                            var label = data.user[i].name;
                            var lat = data.user[i].posn[0];
                            var long = data.user[i].posn[1];

                            var latlng = new google.maps.LatLng(lat, long);
                            bounds.extend(latlng);
                            var marker = new google.maps.Marker({
                                position: latlng,
                                title: label
                            });

【问题讨论】：

是否有 JSON 的公共 URL？如果是这样，我可以在 jsFiddle 上设置一个演示。
@Salman 抱歉没有公共链接，因为我正在使用 Visual Web Dev 在本地主机上工作。虽然有一个 facebook 个人资料图片的 URL。

标签： c# javascript json google-maps jsonresult

【解决方案1】：

这是我的 JSON 结果，当用户单击标记时，我希望能够将此图像放入谷歌地图上的信息窗口

image":"http://graph.facebook.com/10000090226****/picture?type=large"

这里是谷歌地图编码的一部分

<script type="text/javascript">

    var map;
    var bounds = new google.maps.LatLngBounds();
    var mgr;

    function initialize() {
        var myOptions = {
            zoom: 2,
            center: new google.maps.LatLng(53.491314, -2.249451),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        mgr = new MarkerManager(map);
        google.maps.event.addListener(mgr, 'loaded', function () {
            $.ajax({
                url: "/Home/GetUser",
                context: document.body,
                success: function (data) {
                    for (var i = 0; i < data.user.length; i++) {
                        var label = data.user[i].name;
                        var lat = data.user[i].posn[0];
                        var long = data.user[i].posn[1];

                        var latlng = new google.maps.LatLng(lat, long);
                        bounds.extend(latlng);
                        var marker = new google.maps.Marker({
                            position: latlng,
                            title: label
                        });

                        mgr.addMarker(marker, 0);

                    }
                    //adding google maps window popup...
                    var infowindow = new google.maps.InfoWindow();
                    google.maps.event.addListener(marker, 'click', function () {
                        infowindow.open(map, marker);
                    });
                }

            });

            mgr.refresh();

            map.fitBounds(bounds);
        });
    }
    $(document).ready(function () {
        initialize();
    });

    </script>

目前它没有打开一个窗口，如果里面没有内容它甚至不会打开？尝试在内容窗口中获取图像时有点困惑。我将不得不继续挖掘，看看我是否可以设法进入那里的 URL 图像。

是否需要在刷新标记后添加窗口弹出位？

UPDATE; 解决了问题，在错误的地方添加了一些代码，需要一些调整。 现在发生的情况是，当您单击第一个标记时，它会在第二个标记上打开信息窗口并显示名称，但最初单击的第一个标记不会打开信息窗口。

function initialize() {
        var myOptions = {
            zoom: 10,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        mgr = new MarkerManager(map);
        google.maps.event.addListener(mgr, 'loaded', function () {

            $.ajax({
                url: "/Home/GetUser",
                context: document.body,
                success: function (data) {
                    for (var i = 0; i < data.user.length; i++) {
                        var label = data.user[i].name;
                        var lat = data.user[i].posn[0];
                        var long = data.user[i].posn[1];

                        var latlng = new google.maps.LatLng(lat, long);

                        bounds.extend(latlng);
                        map.fitBounds(bounds);

                        var marker = new google.maps.Marker({
                            position: latlng,
                            title: label
                        });

                        var infowindow = new google.maps.InfoWindow({ content: data.user[i].name });
                        google.maps.event.addListener(marker, 'click', function () {
                            infowindow.open(map, marker);
                        });

                        mgr.addMarker(marker, 1);

最终更新： 是的，我可以停止恐慌，在拍打自己醒来并阅读超过 3 次内容后设法让它工作:)

【讨论】：

请更新您的问题以添加详细信息，而不是作为答案发布。
没关系我让它工作了，我在错误的地方添加了 bounds.extend 和 info 标记。现在工作正常。问题已更新
@SalmanA 当我单击第一个标记时，它会在第二个标记上打开信息窗口并显示名称，但最初单击的第一个标记不会打开 infoWindow。

【解决方案2】：

在您上面的示例代码的核心是循环 10 次添加随机点 - 您需要用您的点上的循环替换它。

具体一点：

       // loop over your points
           for (var i = 0; i < 10; i++) {
                // use your points lat/lng
                var latlng = new google.maps.LatLng(Math.random() * 180 - 90, Math.random() * 360 - 180);
                bounds.extend(latlng);
                var marker = new google.maps.Marker({
                    position: latlng,
                    // animation: google.maps.Animation.DROP, // animation disabled because it slows down performance
                    // use your points name
                    title: "RedStar Creative Marker #" + i
                });
                mgr.addMarker(marker, 0);
            }

这是未经测试的第一次尝试，没有保证，等等等等 :)

       // loop over your points
       for (var j in layer["users"]) {
                var place = layer["users"][j];
                // use your points lat/lng
                var latlng = new google.maps.LatLng(place["posn"][0], place["posn"][1]);
                bounds.extend(latlng);
                var marker = new google.maps.Marker({
                    position: latlng,
                    // animation: google.maps.Animation.DROP, // animation disabled because it slows down performance
                    // use your points name
                    title: place["name"]
                });
                mgr.addMarker(marker, 0);
            }

【讨论】：

我使用了 AJAX，它为我完成了这项工作，根据创建的 JSON 显示 2 个用户的标记。但由于某种原因，地图正在加载到澳大利亚以外的地方。嗯，接下来需要解决这个问题，谢谢 Chris
你可以看看我所做的 AJAX，根据 JSON 的位置在地图上放置两个标记，我对自己印象深刻，但如果没有你和其他人的帮助，我不会能够足够快地学习:)