2013-04-24 95 views
1

我使用json文件中的標記創建了一個地圖,我的問題是我無法獲取地圖上顯示的標記。我可以鏈接一個基本的json文件,但是當我嘗試使用數組文件時,我沒有得到任何標記。我的代碼是:從我的JSON文件創建標記

<script src="js/mapping.js"></script> 
    <script type="text/javascript"> 
    (function() { 

window.onload = function() { 

    // Creating a new map 
    var map = new google.maps.Map(document.getElementById("map"), { 
      center : new google.maps.LatLng(51.50746, -0.127594), 
      zoom : 8, 
      mapTypeId : google.maps.MapTypeId.ROADMAP 
      }); 



      // Creating a global infoBox object that will be reused by all markers 
    infoBubble = new InfoBubble({ 
     minWidth: 300, 
     maxWidth: 400, 
     minHeight: 300, 
     maxHeight: 400, 
     arrowSize: 50, 
     arrowPosition: 50, 
     arrowStyle: 2, 
     borderRadius: 0, 
     shadowStyle: 1, 
    }); // end Creating a global infoBox object 

    // Creating a global infoBox object tabs 
    infoBubble.addTab('Details'); 
    infoBubble.addTab('Info'); 
    // end Creating a global infoBox object tabs   

    // Custom Markers 
    var markers = {}; 
     var categoryIcons = { 
     1 : "images/liver_marker1.png", 
     2 : "images/liver_marker2.png", 
     3 : "images/liver_marker3.png", 
     4 : "images/liver_marker4.png", 
     5 : "images/liver_marker.png", 
     6 : "images/liver_marker6.png", 
     7 : "images/liver_marker.png" 
     } // end Custom Markers 

    // Looping through the JSON data 
    for (var i = 0, length = json.length; i < length; i++) { 
     var data = json[i], 
     latLng = new google.maps.LatLng(data.Latitude, data.Longitude); 


     // Creating a marker and putting it on the map 
     var marker = new google.maps.Marker({ 
       position : latLng, 
       map : map, 
       title : data.title, 
       icon : categoryIcons[data.category] 
      }); 

     // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data) 
     (function (marker, data) { 

      // Attaching a click event to the current marker 
      google.maps.event.addListener(marker, 'click', function(e) { 
       //infoBubble.setContent('<b>'+data.description+'</b>'+'<br>'+data.name); 
       infoBubble.updateTab(0, 'Details', data.deviceOwnerName); 
       infoBubble.updateTab(1, 'Info', data.name); 
       infoBubble.open(map, marker); 
       map.panTo(loc); 
}); // end Attaching a click event to the current marker 

     })(marker, data); // end Creating a closure 

    } // end Looping through the JSON data 

} 

})(); 
google.maps.event.addDomListener(window, 'load', initialize); 
</script> 

我的JSON數組文件是:

{ 
"Device" : [{ 
     "DeviceId" : "e889", 
     "DeviceRef" : "Te889", 
     "DeviceName" : null, 
     "DeviceText" : "Operated by SE", 
     "DeviceLocation" : { 
      "Latitude" : "51.484804", 
      "Longitude" : "-0.103226", 
      "Address" : { 
       "SubBuildingName" : null, 
       "BuildingName" : null, 
       "BuildingNumber" : null, 
       "Thoroughfare" : null, 
       "Street" : "Volcan Road North", 
       "DoubleDependantLocality" : null, 
       "DependantLocality" : null, 
       "PostTown" : "Norwich", 
       "PostCode" : "NR6 6AQ", 
       "Country" : "gb" 
      }, 
      "LocationShortDescription" : null, 
      "LocationLongDescription" : null 
     }, 
     "Connector" : [{ 
       "ConnectorId" : "JEV01", 
       "ConnectorType" : "JEVS G 105 (CHAdeMO)", 
       "RatedOutputkW" : "50.00", 
       "RatedOutputVoltage" : null, 
       "RatedOutputCurrent" : null, 
       "ChargeMethod" : "DC", 
       "ChargeMode" : "1", 
       "ChargePointStatus" : "In service", 
       "TetheredCable" : "0", 
       "Information" : null 
      } 
     ], 
     "Controller" : { 
      "OrganisationName" : "SE", 
      "Website" : null, 
      "TelephoneNo" : null, 
      "ContactName" : null 
     }, 
     "DeviceOwner" : { 
      "OrganisationName" : "Unknown", 
      "Website" : null, 
      "TelephoneNo" : null, 
      "ContactName" : null 
     }, 
     "DeviceAccess" : { 
      "RegularOpenings" : [{ 
        "Days" : "Monday", 
        "Hours" : { 
         "From" : "08:00", 
         "To" : "18:00" 
        } 
       }, { 
        "Days" : "Tuesday", 
        "Hours" : { 
         "From" : "08:00", 
         "To" : "18:00" 
        } 
       }, { 
        "Days" : "Wednesday", 
        "Hours" : { 
         "From" : "08:00", 
         "To" : "18:00" 
        } 
       }, { 
        "Days" : "Thursday", 
        "Hours" : { 
         "From" : "08:00", 
         "To" : "18:00" 
        } 
       }, { 
        "Days" : "Friday", 
        "Hours" : { 
         "From" : "08:00", 
         "To" : "18:00" 
        } 
       }, { 
        "Days" : "Saturday", 
        "Hours" : { 
         "From" : "08:30", 
         "To" : "05:00" 
        } 
       } 
      ], 
      "Open24Hours" : true 
     }, 
     "PaymentRequiredFlag" : false, 
     "SubscriptionRequiredFlag" : true, 
     "Accessible24Hours" : false, 
     "PhysicalRestrictionFlag" : false, 
     "PhysicalRestrictionText" : null, 
     "OnStreetFlag" : false, 
     "Bearing" : null 
    } 
    ]} 

我想鏈接到的緯度和經度,但我也希望,以顯示設備ID。

任何幫助,將不勝感激。

R

+0

所以,你正確地得到了JSON解析到'json'變量? – Bergi 2013-04-24 14:45:01

+0

謝謝你這篇文章,我整個上午都在與JSON和閉包打交道,你的代碼讓我通過了。乾杯! – 2013-06-11 15:08:46

回答

0

緯度和經度嵌套在您的JSON文件中的成員。如果不深入DeviceLocation成員,則無法訪問它們。我建議你閱讀這篇文章(http://www.w3schools.com/json/)以瞭解JSON的工作原理。