Google Map Marker和嵌套的JSON以在Map Infowindow中顯示數據

Question

我正在使用Google Map通過信息窗口在其中顯示一些地點和用戶。

Google Map腳本：

<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>

我面臨的問題是在特定位置顯示特定用戶。 例如，當我在標記中單擊“紐約”時，它應顯示帶有兩個會話及其詳細信息的信息窗口（根據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函數應該以迭代方式（針對每個odd）遍歷json中的不同會話，並應查找具有匹配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個Session的情況下工作）