0
我正在尝试使用this教程制作嵌入式Google地图，该地图将所有带地理标记的Flickr照片显示为标记，显示其拍摄地点。我不确定自从两年前编写教程后GMaps或Flickr API有什么变化，但是example given in the tutorial中没有显示标记，也没有用我的Flickr照片进行尝试。我不是很精通编码，所以我不知道为什么他们不会出现，我已经在网上搜索了好几个小时，没有任何运气。似乎没有其他方法可以获得这种地图，所以如果有人能提供任何帮助，我会非常感激！使用带地理标记的Flickr创建Google地图
<!DOCTYPE html>
<html>
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Google and Flickr API mashup</title>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<!--Linking to the jQuery library.-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<!--Linking to the Google Maps API-->
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASqSk7-yzQzHkrLVKhjQNBup2Wd-XQkQ0&sensor=true">
</script>
<script type="text/javascript">
var lat = 0;
var long = 0;
$(document).ready(function(){
//Connects to the Flickr API and reads the results of the query into a JSON array. This query uses the 'flickr.photos.search' method to access all the photos in a particular person's user
account. It also uses arguments to read in the latitude and longitude of each picture. It passes the resultant JSON array to the 'displayImages3' function below.
$.getJSON("https://api.flickr.com/services/rest/?
method=flickr.photos.search&api_key=14fca78b18f8e8f4d22216494ea29abf&user_id=136688117%40N05&has_geo=1&extras=geo&format=json&nojsoncallback=?", displayImages3);
function displayImages3(data){
//Loop through the results in the JSON array. The 'data.photos.photo' bit is what you are trying to 'get at'. i.e. this loop looks at each photo in turn.
$.each(data.photos.photo, function(i,item){
//Read in the lat and long of each photo and stores it in a variable.
lat = item.latitude;
long = item.longitude;
//Get the url for the image.
var photoURL = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
htmlString = '<img src="' + photoURL + '">';
var contentString = '<div id="content">' + htmlString + '</div>';
//Create a new info window using the Google Maps API
var infowindow = new google.maps.InfoWindow({
//Adds the content, which includes the html to display the image from Flickr, to the info window.
content: contentString
});
//Create a new marker position using the Google Maps API.
var myLatlngMarker = new google.maps.LatLng(lat,long);
//Create a new marker using the Google Maps API, and assigns the marker to the map created below.
var marker = new google.maps.Marker({
position: myLatlngMarker,
map: myMap,
title:"Photo"
});
//Uses the Google Maps API to add an event listener that triggers the info window to open if a marker is clicked.
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(myMap,marker);
});
});
}
});
</script>
</head>
<body>
<p>Google maps and Flickr API mashup</p>
<p> </p>
<div id="map_canvas">
<script>
//Using the Google Maps API to create the map.
var myLatlngCenter = new google.maps.LatLng(41.79179, -119.36646);
var mapOptions = {
center: myLatlngCenter,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
</script>
</div>
</body>
</html>
看看这个：http://gis.yohman.com/up206b/tutorials/api-access-flickr/ –
[那个例子]（http://tutsplus.github.io/Google-Maps-and -Flickr-API/part2/tutorial3_part2_google_maps_flickr_mashup.html）有一个JavaScript错误'未捕获的SyntaxError：意外的令牌<' – geocodezip
@eunnsunic我已阅读该教程，以及非常有用和信息丰富。然而他们的例子有完全相同的问题。照片/标记不会显示在地图上。我看到的只是一张以圣莫尼卡为中心的空白地图。对你起作用吗？ – merzperson