Question

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

Google地图脚本：

<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。请帮忙。

Answer 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文件并将其写入全局变量。

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

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

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

嵌套JSON的使用非常简单。如果您想在第一个会话中获取纽约Mat的信息，您必须使用以下代码：

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个会话）

Google Map Marker和嵌套JSON在Map Infowindow中显示数据

1 个答案: