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