Question

我正在尝试按照this教程制作一个可嵌入的Google地图，该地图会将我所有带地理标记的Flickr照片显示为显示拍摄地点的标记。我不确定自从两年前编写的教程以来，GMaps或Flickr API是否发生了变化，但标记没有出现在example given in the tutorial中，也没有出现在我的Flickr照片中。我不是很精通编码，所以我无法弄清楚为什么他们不会出现，我已经在网上搜了好几个小时而没有任何运气。似乎没有任何其他方法可以获得这种地图，所以如果有人能提供任何帮助，我将非常感激！

<!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>

Answer 1

我只是最终让这个工作！这么简单的解决方案。我注意到Flickr将其API策略更新为仅允许https而不是http。我手动将API调用URL更改为https，但我错过了photoURL。添加一封简单的字母＆＃39;在＆＃39; http＆＃39;之后在photoURL中产生了一个可嵌入的可嵌入照片地图，显示了我的地理标记Flickr照片。希望这可以帮助其他人。

Answer 2

自从原始回答以及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-Requested-With ，导致以下错误：

XMLHttpRequest无法加载https://api.flickr.com/services/rest/method=flickr.photos.search&xxx。在预检响应中，Access-Control-Allow-Header不允许使用请求标题字段X-Requested-With。

网址参数 nojsoncallback 现在的值为 1 ，因为旧值（？）导致错误：

拒绝执行来自“https://api.flickr.com/services/rest/?method=flickr.photos.search&xxxx”的脚本，因为其MIME类型（'application / json'）不可执行，并且启用了严格的MIME类型检查。

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

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

2 个答案: