Question

我的Flickr地图中的地理标记照片无法在我的Google地图中显示。

我打算在我的谷歌地图中显示Flickr照片作为信息窗口，并使用URL向导，我构建了一个调用Flickr API的URL，创建并地图标记了7张我希望在Google地图中显示的照片。

对于每个都包含地图的地理标记位置，一旦加载地图，标记就会与显示Flickr a / c中的照片的信息窗口一起显示。下面是一个示例代码，仅用于显示地理标记照片的标记是我的Flickr地图。这些是我的APIkeys以及user_ID。我认为问题出在我在Flickr API资源管理器中构建的URL中。

<!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=AIzaSyDo4wMMR44B6xsfGKVsB1MqQM8XlbBNdPo&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 'displayImages' function below.

$.getJSON("http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=09dba1a04e20620b4b95e701b08f9142&user_id=117523264@N05&has_geo=1&extras=geo&format=nojsoncallback", displayImages);

function displayImages(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(-1.292066,36.821946);
var mapOptions = {
          center: myLatlngCenter,
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
};
var myMap = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
</script>
</div>

</body>        
</html>

我构建的原始网址是 http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=b6e73e16e28daf5d40f68947ce431d82&user_id=117523264%40N05&has_geo=1&extras=geo&format=json&nojsoncallback=1 ，我没有签署电话。由于我需要将结果推送到函数中，在我们的例子中，结尾应该是nojsoncallback=？

Flickr API-Flickr将未显示为地图标记的照片标记为地图标记

0 个答案: