0

我正在使用谷歌地图通过信息窗口显示其中的一些地方和用户。

谷歌地图脚本：

<script>
var markers = [
['<p>New York</p> <p><a href="#myModal" role="button" class="btn" data-toggle="modal">More information</a></p>', 40.769090, -74.002740],
['<p>Washington, Finland</p> <p><a href="#myModal" role="button" class="btn" data-toggle="modal">More information</a></p>', 38.908127, -77.034863],
];

function initializeMaps() {
var myOptions = {
    zoom: 3,
    center: new google.maps.LatLng(40.769090, -74.002740),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: false
};
var image = 'img/logos.png';
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {  
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i][1], markers[i][2]),
        map: map,
        icon: image
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(markers[i][0]);
            infowindow.open(map, marker);
        }
    })(marker, i));
}}</script>

地图信息脚本窗口

   <script> 
   var success = function(data) {
   $(".ID").append(data.sessions[0].ID); 
   $(".Users").append(data.sessions[0].Users); 
   $.each(data.sessions[0].Location, function(i, value){
   $(".Location").append('<li>' +  value.name + '</li>');
   })
   }
   $.getJSON("sample.json", success);
   </script>

JSON 文件：

   {"sessions":[
    {
        "ID":"123",
        "Users":"4",
        "Location": 
            { "New York": [
                      { "id": 1, "name": "Mat" },
                      { "id": 2, "name": "Cat" }
                 ],
              "Washington": [
                      { "id": 1, "name": "Rat" },
                      { "id": 2, "name": "Sat" }
                 ]
            }   
    },
     {
        "ID":"456",
        "Users":"1",
        "Location": 
            { "New York": [
                      { "id": 1, "name": "Bat" }
                 ]
            }   
    }]}

的HTML：

    <div id="map_canvas"></div>   
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">More Details</h3>
    </div>
    <div class="modal-body">
    <p class="ID">ID</p>
    <ul class="Location"></ul>
    </div>
    <div class="modal-footer">
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
    </div>
    </div>

我面临的问题是在其各自的位置显示特定用户。例如，当我在标记中单击 new york 时，它应该向我显示包含两个会话及其详细信息的信息窗口（根据 JSON 文件）。我不确定如何处理标记 ID 和嵌套 JSON。请帮忙。

4

1 回答 1

1

在你的 yode 中有一些问题你必须解决。

第一的：

 <script> 
   var success = function(data) {
   $(".ID").append(data.sessions[0].ID); 
   $(".Users").append(data.sessions[0].Users); 
   $.each(data.sessions[0].Location, function(i, value){
   $(".Location").append('<li>' +  value.name + '</li>');
   })
   }
   $.getJSON("sample.json", success);
   </script>

调用页面时正在加载该脚本。因此，它将模态的值放在开头。所以里面总是有相同的信息。

好的方法应该是在开始时加载 JSON 文件并将其写入全局变量。

在标记中按下“更多信息”按钮时，您应该调用一个 javascript 函数，并将推送城市的 id 作为参数（不是名称，它们不是唯一的）。

您必须在 json 中输入该 id 而不是城市名称。

现在，在按下“更多信息”按钮后调用的 javascript 函数应该以迭代方式（针对每个 oder）遍历 json 中的不同会话，并且应该查找具有匹配 id 的位置。当 id 匹配时，将数据附加到模型中。

嵌套 JSON 的使用非常简单。当你想在第一个会话中获取Mat in New york的信息时，你必须使用以下代码：

data.sessions[0].Location.NewYork[0]

看看，你最好写没有空格的标识符。

因此，您可以编写一个 for 构造，例如：

 for(var i = 0; i<data.sessions.length;i++){
       var locations = data.sessions[i].Location;
       if ('Washington' in locations) { 
          //Code to add it in your city information window
              console.log(locations.Washington);

       }
   }

变量 id 是单击标记的传递参数。

您还应该检查您的整个代码，有几个部分您应该更好地更改（该模型不会真正使用超过 1 个会话）

于 2013-06-13T14:06:13.660 回答