2

データベースから取り出したJSON結果を以下に示します。結果である位置に基づいて表示されるマーカーを使用して、これをGoogleマップに表示したいです。

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

Google マップに配置されたユーザー名と位置を取得するにはどうすればよいですか? 以下の私のグーグルマップのコーディング;

<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 Result に基づいて 2 つのマーカーを追加することができました。ウィンドウ ポップアップを追加して、その人物の画像をウィンドウに表示する方法を見つけようとしました。私は google.maps.event.addListener が必要になることを知っています. 

$.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
                            });
4

2 に答える 2

1

上記のコアでは、コード例が 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);
            }
于 2011-10-20T09:47:15.150 に答える
0

this is my JSON result i want to be able to get this image in to info window on google maps when user clicks on marker

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

here is part of the coding for the google maps

<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>

at the moment its not opening a window, wont it even open if there is no content inside it? bit confused on trying to get the image inside the content window. I'll have to keep digging around and see if i can manage to get in the URL image in there.

does the adding window popup bit need to come after the refresh of the markers?

UPDATE; sorted the problem, was adding bits of coding in the wrong places, needed some tweaking. whats happening now is when you click the first marker it opens the info window on the second marker and displays the name, but the first marker that was initially clicked does not open an infoWindow. 

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);

FINAL UPDATE: right i can stop panicking, managed to get it working after slapping myself to wake up and read things more than 3 times :)

于 2011-10-21T09:29:33.893 に答える