2013-04-24 4 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 배열 파일은 다음과 같습니다 : 내 코드는 내가 위도 및 경도에 연결하려고하지만 나는 또한의 DeviceID를 표시하기 위해 찾고

{ 
"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 
    } 
    ]} 

.

도움을 주시면 감사하겠습니다.

R

+0

그래서 JSON이 정확하게 'json' 변수로 파싱 되었습니까? – Bergi

+0

이 게시물을 보내 주셔서 감사 드리며, JSON과 Closures와 함께 아침 내내 싸웠습니다. 코드가 나와 함께합니다. 건배! –

답변

0

위도 및 경도는 JSON 파일 내에서 중첩 된 구성원입니다. 먼저 DeviceLocation 멤버를 파고 들지 않으면 액세스 할 수 없습니다. JSON의 작동 방식을 이해하려면이 기사 (http://www.w3schools.com/json/)를 읽는 것이 좋습니다.