Javascript 使用地理标记的Flickr照片创建谷歌地图
我正试图按照教程制作一个可嵌入的谷歌地图，它可以将我所有带地理标签的Flickr照片显示为标记，显示它们的拍摄位置。我不确定自两年前编写本教程以来，gmap或flickrapi是否发生了变化，但当我尝试使用Flickr照片时，标记没有出现在nor中。我对编码不是很精通，所以我不明白为什么它们不会出现，而且我已经在网上搜索了好几个小时，一点运气也没有。似乎没有其他方法可以获得这种地图，所以如果有人能提供任何帮助，我将不胜感激Javascript 使用地理标记的Flickr照片创建谷歌地图,javascript,html,google-maps,google-maps-api-3,flickr,Javascript,Html,Google Maps,Google Maps Api 3,Flickr,我正试图按照教程制作一个可嵌入的谷歌地图，它可以将我所有带地理标签的Flickr照片显示为标记，显示它们的拍摄位置。我不确定自两年前编写本教程以来，gmap或flickrapi是否发生了变化，但当我尝试使用Flickr照片时，标记没有出现在nor中。我对编码不是很精通，所以我不明白为什么它们不会出现，而且我已经在网上搜索了好几个小时，一点运气也没有。似乎没有其他方法可以获得这种地图，所以如果有人能提供任何帮助，我将不胜感激 <!DOCTYPE html> <html> &
<!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>
我终于成功了！这是一个简单的解决方案。我注意到Flickr更新了它的API策略，只允许https而不允许http。我已经手动将API调用URL更改为https，但是我错过了photoURL。在photoURL中的“http”之后添加一个简单的字母“s”，生成了一个工作的可嵌入照片地图，显示了我的地理标记Flickr照片。希望这能对其他人有所帮助。在最初的答案和Flickr策略和jquery的一些更新发布两年后，下面是一个完整的工作示例
<!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="https://code.jquery.com/jquery-3.2.1.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">
</script>
<script type="text/javascript">
//See here: https://stackoverflow.com/questions/33591826/create-google-map-with-geotagged-flickr-photos
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=1", 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 = 'https://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);
var myTitle = "" +item.title;
//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: item.title
});
//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>
我希望这可以帮助其他人。看看这个：有一个javascript错误未捕获SyntaxError:uncontracted token@eugensunic我也阅读了该教程，非常有用且信息丰富。然而，他们的例子有着完全相同的问题；照片/标记没有显示在地图上。我看到的只是一张以圣莫尼卡为中心的空白地图。这对你有用吗？@geocodezip我很感谢你的回复，但因为我对编码几乎一无所知，这对我并没有什么帮助。任何导致错误的线索？请参阅我的答案，有一些更新。请参阅我的答案，目前需要进行更多更改。