使用带地理标记的Flickr创建Google地图

问题描述：

我正在尝试使用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>&nbsp;</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

答

我只是FINALLY得到这个工作！这种简单的解决方案。我注意到Flickr更新了它的API策略，只允许https而不是http。我已经手动将API调用URL更改为https，但是我错过了photoURL。在photoURL中的'http'之后添加一个简单的字母''，导致可嵌入工作的照片地图显示带有地理标记的Flickr照片。希望这可以帮助别人。

看到我的答案，目前需要进行一些更改。 – robermann

答

经过两年后的原始答案和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>&nbsp;</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>

我不得不改变：

的jquery的版本，因为其他版本添加的HTTP标头X-请求-随着，这引起以下错误：

XMLHttpRequest cannot load https://api.flickr.com/services/rest/method=flickr.photos.search&xxx . Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.

URL参数nojsoncallback现在的值为，因为旧值（？）造成的错误：

Refused to execute script from ' https://api.flickr.com/services/rest/?method=flickr.photos.search&xxxx ' because its MIME type ('application/json') is not executable, and strict MIME type checking is enabled.

我希望这可以帮助其他人。

使用带地理标记的Flickr创建Google地图

相关推荐