2014-07-17 31 views
-2

我想读取与此代码存储在同一目录中的JSON文件。我需要检索GPS信息并用它在地图上绘制标记。但是,运行代码后没有出现任何内容。这是我的JSON文件。

[{ 
    "SourceFile": "C:/Users/wolvix/Downloads/sample image/1024-2006_1011_093752.jpg", 
    "ExifToolVersion": 9.65, 
    "FileName": "1024-2006_1011_093752.jpg", 
    "Directory": "C:/Users/wolvix/Downloads/sample image", 
    "FileSize": "205 kB", 
    "FileModifyDate": "2014:06:29 18:42:21+08:00", 
    "FileAccessDate": "2014:06:29 18:42:20+08:00", 
    "FileCreateDate": "2014:06:29 18:42:21+08:00", 
    "FilePermissions": "rw-rw-rw-", 
    "FileType": "JPEG", 
    "MIMEType": "image/jpeg", 
    "JFIFVersion": 1.01, 
    "ExifByteOrder": "Little-endian (Intel, II)", 
    "ImageDescription": "KONICA MINOLTA DIGITAL CAMERA", 
    "Make": "Konica Minolta Camera, Inc.", 
    "Model": "DiMAGE A2", 
    "Orientation": "Horizontal (normal)", 
    "ModifyDate": "2006:10:11 09:37:52", 
    "ExifVersion": "0221", 
    "DateTimeOriginal": "2006:10:11 09:37:52", 
    "CreateDate": "2006:10:11 09:37:52", 
    "GPSVersionID": "0.0.2.2", 
    "GPSLatitudeRef": "South", 
    "GPSLongitudeRef": "East", 
    "GPSAltitudeRef": "Above Sea Level", 
    "Compression": "JPEG (old-style)", 
    "Keywords": "Australia", 
    "By-line": "John Harmon", 
    "Province-State": "New South Wales", 
    "Country-PrimaryLocationCode": "AUS", 
    "Country-PrimaryLocationName": "Australia", 
    "Caption-Abstract": "Sydney Harbor from the Manly-Sydney ferry", 
    "URL": "", 
    "ImageWidth": 1024, 
    "ImageHeight": 768, 
    "GPSAltitude": "0 m Above Sea Level", 
    "GPSLatitude": "33 deg 51' 21.91\" S", 
    "GPSLongitude": "151 deg 13' 11.73\" E", 
    "GPSPosition": "33 deg 51' 21.91\" S, 151 deg 13' 11.73\" E", 
    "ImageSize": "1024x768" 
}, 
{ 
    "SourceFile": "C:/Users/wolvix/Downloads/sample image/12382975864_09e6e069e7_o.jpg", 
    "ExifToolVersion": 9.65, 
    "FileName": "12382975864_09e6e069e7_o.jpg", 
    "Directory": "C:/Users/wolvix/Downloads/sample image", 
    "FileSize": "6.0 MB", 
    "FileModifyDate": "2014:07:17 18:37:24+08:00", 
    "FileAccessDate": "2014:07:17 18:37:19+08:00", 
    "FileCreateDate": "2014:07:17 18:37:19+08:00", 
    "FilePermissions": "rw-rw-rw-", 
    "FileType": "JPEG", 
    "MIMEType": "image/jpeg", 
    "ExifByteOrder": "Little-endian (Intel, II)", 
    "ImageDescription": "OLYMPUS DIGITAL CAMERA   ", 
    "Make": "OLYMPUS IMAGING CORP.", 
    "Model": "STYLUS1", 
    "Orientation": "Horizontal (normal)", 
    "ModifyDate": "2014:01:23 14:57:18", 
    "ExifVersion": "0230", 
    "DateTimeOriginal": "2014:01:23 14:57:18", 
    "CreateDate": "2014:01:23 14:57:18", 
    "GPSVersionID": "2.3.0.0", 
    "GPSLatitudeRef": "North", 
    "GPSLongitudeRef": "West", 
    "GPSAltitudeRef": "Above Sea Level", 
    "GPSStatus": "Measurement Active", 
    "PrintIMVersion": "0300", 
    "Compression": "JPEG (old-style)", 
    "GPSAltitude": "0 m Above Sea Level", 
    "GPSLatitude": "50 deg 49' 8.59\" N", 
    "GPSLongitude": "0 deg 8' 12.45\" W", 
    "GPSPosition": "50 deg 49' 8.59\" N, 0 deg 8' 12.45\" W", 
    "ImageSize": "3968x2976" 
}, 
{ 
    "SourceFile": "C:/Users/wolvix/Downloads/sample image/gg_gps.jpg", 
    "ExifToolVersion": 9.65, 
    "FileName": "gg_gps.jpg", 
    "Directory": "C:/Users/wolvix/Downloads/sample image", 
    "FileSize": "79 kB", 
    "FileModifyDate": "2014:07:17 18:36:00+08:00", 
    "FileAccessDate": "2014:07:17 18:35:58+08:00", 
    "FileCreateDate": "2014:07:17 18:36:00+08:00", 
    "FilePermissions": "rw-rw-rw-", 
    "FileType": "JPEG", 
    "MIMEType": "image/jpeg", 
    "JFIFVersion": 1.02, 
    "ExifByteOrder": "Little-endian (Intel, II)", 
    "Make": "NIKON CORPORATION", 
    "Model": "NIKON D2H", 
    "Orientation": "Horizontal (normal)", 
    "ModifyDate": "2005:07:02 10:38:28", 
    "ExifVersion": "0220", 
    "DateTimeOriginal": "2003:11:23 18:07:37", 
    "CreateDate": "2003:11:23 18:07:37", 
    "GPSVersionID": "2.2.0.0", 
    "GPSLatitudeRef": "North", 
    "GPSLongitudeRef": "East", 
    "GPSTimeStamp": "18:07:37", 
    "GPSDateStamp": "2003:11:23", 
    "Compression": "JPEG (old-style)", 
    "GPSDateTime": "2003:11:23 18:07:37Z", 
    "GPSLatitude": "39 deg 54' 56.00\" N", 
    "GPSLongitude": "116 deg 23' 27.00\" E", 
    "GPSPosition": "39 deg 54' 56.00\" N, 116 deg 23' 27.00\" E", 
    "ImageSize": "500x375" 
}, 
{ 
    "SourceFile": "C:/Users/wolvix/Downloads/sample image/s_gps.jpg", 
    "ExifToolVersion": 9.65, 
    "FileName": "s_gps.jpg", 
    "Directory": "C:/Users/wolvix/Downloads/sample image", 
    "FileSize": "44 kB", 
    "FileModifyDate": "2014:07:17 18:36:45+08:00", 
    "FileAccessDate": "2014:07:17 18:36:44+08:00", 
    "FileCreateDate": "2014:07:17 18:36:45+08:00", 
    "FilePermissions": "rw-rw-rw-", 
    "FileType": "JPEG", 
    "MIMEType": "image/jpeg", 
    "JFIFVersion": 1.02, 
    "ExifByteOrder": "Little-endian (Intel, II)", 
    "ImageDescription": "Communications", 
    "Make": "FUJIFILM", 
    "Model": "FinePixS1Pro", 
    "Orientation": "Horizontal (normal)", 
    "ModifyDate": "2002:07:19 13:28:10", 
    "ExifVersion": "0200", 
    "DateTimeOriginal": "2002:07:13 15:58:28", 
    "CreateDate": "2002:07:13 15:58:28", 
    "GPSVersionID": "2.0.0.0", 
    "GPSLatitudeRef": "North", 
    "GPSLongitudeRef": "West", 
    "GPSTimeStamp": "14:58:24", 
    "GPSMapDatum": "WGS84", 
    "Compression": "JPEG (old-style)", 
    "Province-State": " ", 
    "Country-PrimaryLocationName": "Ubited Kingdom", 
    "Keywords": "Communications", 
    "CopyrightNotice": "ian Britton - FreeFoto.com", 
    "IPTCDigest": "f58a446d60cbb1883f4201ed4420ac36", 
    "DisplayedUnitsX": "inches", 
    "DisplayedUnitsY": "inches", 
    "GlobalAngle": 30, 
    "GlobalAltitude": 30, 
    "City": " ", 
    "State": " ", 
    "Country": "Ubited Kingdom", 
    "Category": "BUS", 
    "DateCreated": "2002:06:20", 
    "GPSLatitude": "54 deg 59' 22.80\" N", 
    "GPSLongitude": "1 deg 54' 51.00\" W", 
    "GPSPosition": "54 deg 59' 22.80\" N, 1 deg 54' 51.00\" W", 
    "ImageSize": "600x400", 
}] 

这是我的html,我在做什么错在这里?

<!DOCTYPE html> 
<html> 
<head> 
<title>Test Map</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<style> 
    html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
    } 
</style> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp" type="text/javascript"> </script> 
<script language="javascript" type="text/javascript"> 

function initialize() { 
    var mapOptions = { 
    zoom: 15, 
    center: new google.maps.LatLng(1.3667, 103.8) 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    $.getJSON('out1.json', function(data) { 
     for (var i in data) { 
      var myLatlng = new google.maps.Latlng(data[i].GPSLatitude, data[i].GPSLongtitude); 

     var marker = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: data[i].FileName 
      }); 
     } 
    } 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

</script> 
</head> 
<body> 
<div id="map-canvas"></div> 
</body> 
</html> 
+0

变种地图; 函数初始化(){// 删除 “VAR地图=” 替换为 “地图= ...” } – HoangHieu

+0

@HoangHieu仍无法加载.. – Marilynchua

+0

http://jsfiddle.net/ 发布您的代码示例到这里:) – HoangHieu

回答

0

如果你的Json数据是真的,你的代码获取数据:)。

//with for(var i in data) // i.GPSLatitude; 
//with for(var i =0; i< data.length; i++) // data[i].GPSLatitude; 

变化

<!DOCTYPE html> 
<html> 
<head> 
<title>Test Map</title> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
<meta charset="utf-8"> 
<style> 
    html, body, #map-canvas { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
    } 
</style> 
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp" type="text/javascript"> </script> 
<script language="javascript" type="text/javascript"> 
var map; 
var markers = new array(); 
function initialize() { 
    var mapOptions = { 
    zoom: 15, 
    center: new google.maps.LatLng(1.3667, 103.8) 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    $.getJSON('out.json', function(data) { 

     for (var i =0; i< data.length; i++) { 
//with for(var i in data) // i.GPSLatitude; 
//with for(var i =0; i< data.length; i++) // data[i].GPSLatitude; 
      var myLatlng = new google.maps.Latlng(data[i].GPSLatitude, data[i].GPSLongtitude); 

     markers[i] = new google.maps.Marker({ 
      position: myLatlng, 
      map: map, 
      title: data[i].FileName 
      }); 
     } 
    } 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

</script> 
</head> 
<body> 
<div id="map-canvas"></div> 
</body> 
</html> 
+0

它仍然无法工作。是否因为在JSON文件中,GPSLatitude和GPSLongtitude是这种格式? “GPSLatitude”:“33 deg 51'21.91 \”S“, ”GPSLongitude“:”151 Deg 13'11.73 \“E”, – Marilynchua