[英]how to get JSON Results placed on Google Maps?
我从数据库中取出了下面显示的JSON结果,我想使用基于结果的标记在Google地图上显示此结果;
{
"user": [{
"name" : "xxxxxxxxx",
"posn" : [53.491314, -2.249451]
}, {
"name" : "xxxxxxxxxx",
"posn" : [54.949231, -1.620483]
}]
}
如何获取用户名和在Google地图上的位置? 下面为我的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
});
在上述代码的核心中,示例代码循环了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);
}
这是我的JSON结果,我希望当用户单击标记时能够将此图像输入到Google地图的信息窗口中
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图像。
刷新标记后需要添加添加窗口弹出位吗?
更新; 解决问题的方法是在错误的地方添加一些编码,需要进行一些调整。 现在发生的是,当您单击第一个标记时,它会在第二个标记上打开信息窗口并显示名称,但是最初单击的第一个标记不会打开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次以上后,设法使其正常工作:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.