如何将JSON结果放在谷歌地图上？

我有我的JSON结果，如下所示，我已经退出了我的数据库，我希望在谷歌地图上显示这个，使用一个标记，根据这里的位置显示结果;

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

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

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

我试过这样做，不知道它是否正确的方式，第一次使用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 }); 

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

Answer 2

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

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

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

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

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

更新; 排序问题，在错误的地方添加了一些编码，需要一些调整。 现在发生的是当您单击第一个标记时它打开第二个标记上的信息窗口并显示名称，但最初单击的第一个标记不会打开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); 

最后更新： 对，我可以停止恐慌，设法让自己醒来后读取东西超过3次:)