在Google地图标记中显示jSON数据 [英] show jSON data in google maps marker

问题描述

我想在我的谷歌地图中显示几个标记。每个标记都会弹出一些信息。我通过数据库获取信息。但是我没有得到弹出窗口中的信息：

 < div id =map-canvas> < / DIV> 
  

JavaScript / jQuery：

  var info =; 
 $（function（）{
 $ .getJSON（http：// server：8080 / getInfo，function（data）{
 $ .each（data，function（i，f ）{
 info =< tr>+< td> Info：+ f.address +/+ f.date +< / td>+< / tr> ; 
 $（info）.appendTo（＃info）; 
}）; 
}）; 
}）; 
 $ b $ var contentString2 = 
'< div id =content>'+ 
'< h2> Barcelona< / h2>'+ 
'< ; div>'+ info +'< / div>'+ 
'< p>< a href =＃contactdata-role =buttondata-mini =true> Contact< / A>< / A> '+ 
'< / p>'+ 
'< / div>'; 
 
 
 // marker 
 var parkingList = [
 ['Spain'，contentString1,41.469326,1.489334,1]，
 ['Barcelona'， contentString2,41.353812,2.157440,2] 
]，... 
  

现在，我有问题：
$ b $ ol <

如何将数据从我的json插入到contentString中？

我可以创建一个变量，其中包含json数据，并且可以在整个JavaScript中使用，而不仅仅在getJSON函数中使用？

解决方案

1）在调用函数来拉取json并在脚本中的任何位置使用它之前，您可以声明一个变量。请注意，只有在调用 getJson 后才会赋值。

2）将数据从json插入到contentString中。

  var alldata，contentString =; 
 $（function（）{
 $ .getJSON（http：// server：8080 / getInfo，function（data）{
 alldata = data; // stores json 
 $ .each（data，function（i，f）{
 contentString + =< tr>+< td> Info：+ f.address +/+ f.date + < / td>+< / tr>; 
 $（contentString）.appendTo（＃info）; 
}）; 
}）; 
 }）; 
  

I want to show several markers in my google maps. Each marker has a pop-up with some informations. I get the information by a database. But I don't get the info in the pop-up:

<div id="map-canvas"></div>

JavaScript/jQuery:

var info = "";
$(function() {
    $.getJSON("http://server:8080/getInfo", function(data) {
        $.each(data, function(i, f) {
            info = "<tr>" + "<td> Info: " + f.address + " / " + f.date + "</td>" + "</tr>";
            $(info).appendTo("#info");
        });
    });
});

var contentString2 = 
    '<div id="content">'+
        '<h2>Barcelona</h2>'+
        '<div>' +info+ '</div>'+
        '<p><a href="#contact" data-role="button" data-mini="true">Contact</a></a> '+
        '</p>'+
    '</div>';               


// marker
var parkingList = [
    ['Spain', contentString1, 41.469326, 1.489334, 1],
    ['Barcelona', contentString2, 41.353812, 2.157440, 2]
],...

Now, I have to questions:

1. How can I insert the data from my json into the contentString?
2. How can I create a variable, which includes the json data and can be used in the whole JavaScript and not only in the getJSON function?

解决方案

1) You can declare a variable before calling function to pull json and use it anywhere in your script. Please note, it will be assigned value only after getJson is called.

2) I have shown example how to insert data from json into the contentString.

var alldata,contentString = "";
$(function() {
    $.getJSON("http://server:8080/getInfo", function(data) {
        alldata = data; //stores json
        $.each(data, function(i, f) {
            contentString += "<tr>" + "<td> Info: " + f.address + " / " + f.date + "</td>" + "</tr>";
            $(contentString).appendTo("#info");
        });
    });
});

这篇关于在Google地图标记中显示jSON数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！