混合谷歌地图和照片由Flickr

我有一些问题，这个小脚本，它允许我与谷歌地图和照片flickr创建混搭。它创建了一幅从罗马到米兰的简单地图，然后从基于地理标签的flickr请求10张图像。所以最后，它将每张照片都放在谷歌的标记上。混合谷歌地图和照片由Flickr

但我不明白我做错了什么。有人有一些想法吗？

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Mappa+info</title> 
<style type="text/css"> 
html, body { margin:0; padding:0; width:100%; height:100%; } 
body { background:#FFFFFF; color:#000000; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:150%; text-align:center;} 
#map { width:100%; height:100%; } 
input { width:250px; } 
</style> 
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC0HAM8PI7RMqUiSm444JDehtJOsWBtE_E&sensor=true"></script> 
    <script type="text/javascript"> 

    var directionsDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 
    var latlongp1; 
    var latlongp2; 

    function initialize() { 

     calcRoute(); 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
      var myOptions = { 
      zoom:7, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 

     map = new google.maps.Map(document.getElementById("map"), myOptions); 

     directionsDisplay.setMap(map); 

     var latlonbounds=map.getBounds();    alert(latlonbounds.getNorthEast()); 
     latlongp1=latlonbounds.getNorthEast(); 
     latlongp2=latlonbounds.getSouthWest(); 


     posizionaFoto(); 


    } 

    function calcRoute() { 
      var partenza = "Roma"; 
      var arrivo = "Milano"; 
      var request = { 
       origin:partenza, 
       destination:arrivo, 
       travelMode: google.maps.DirectionsTravelMode.DRIVING 
      }; 
      directionsService.route(request, function(response, status) { 
       if (status == google.maps.DirectionsStatus.OK) { 
        directionsDisplay.setDirections(response); 
       } 
      }); 
    } 

    function posizionaFoto(){ 

    //richiesta flickr 
    var bbox=latlongp1.lat()+","+latlongp1.lng()+","+latlongp2.lat()+","+latlongp2.lon(); 
    var apikey="48770d8235b7055d803bd8d913304624"; 
    var url="http://api.flickr.com/services/rest/?"+ 
      "method=flickr.photos.search"+ 
      "&format=json"+ 
      "&per_page=10"+ 
      "&extras=geo"+ 
      "&bbox="+bbox+ 
      "&nojsoncallback=1"+ 
      "&api_key="+apikey; 

    var client =new XMLHttpRequest(); 
    client.open("GET",url,true); 
    client.send(); 
    client.onreadystatechange=function(){ 

        if((client.readyState==4)&&(client.status==200)){ 
         var data=JSON.parse(client.responseText); 
         var photos=data.photos; 
         //creazione marker per foto 
         var photo=photos.photo; 
         var aPhoto; 
         var url; 
         for(var k in photo){ 
          aPhoto=photo[k]; 
          var markerIcon=new google.maps.MarkerImage("http://farm"+aPhoto.farm+"static.flickr.com/"+aPhoto.server +"/"+aPhoto.id+"_"+aPhoto.secret+"_b.jpg"); 
          var latLonphoto=new google.maps.LatLng(aPhoto.latitude,aPhoto.longitude); 
          var markerOptions={ 
           map:map, 
           position:latLonphoto, 
           icon:markerIcon         
           }; 
          marker=new google.maps.Marker(markerOptions); 
          }       
         } 
        }; 
    } 

    window.onload = initialize; 
    </script> 
</head> 
<body> 
    <div id="map"></div> 
</body>

来源

2013-05-04 Francesco

在您设置markerIcon有行

“”缺少“静态”之前

来源

2014-02-15 20:57:31

混合谷歌地图和照片由Flickr

回答

相关问题