infowindow谷歌地图上显示错误图片

第一次来这里！在编码方面我很新，所以提前致歉！我在Google地图上显示Instagram图片。我修改了标记以显示小图片，我想添加一个带有更大版本图片的信息窗口，但它会一直显示错误的图片！我还包括一种方法来运行分页，并获得更多的结果（我认为有点破解）。有什么想法吗？infowindow谷歌地图上显示错误图片

谢谢！

var map; 
 

 
     function initialize() { 
 
     map = new google.maps.Map(document.getElementById('map_canvas'), { 
 
      zoom: 2, 
 
      center: new google.maps.LatLng(41.8919300,12.5113300), 
 
      mapTypeId: google.maps.MapTypeId.BASE 
 
     }); 
 

 
     
 

 

 

 

 
     
 
     var script = document.createElement('script'); 
 
     script.src = 'https://api.instagram.com/v1/tags/pewdiepiefanart/media/recent?client_id=0c97bcab30b34cee924151bea77b3cd1&callback=callbackFunction'; 
 
     document.getElementsByTagName('head')[0].appendChild(script); 
 
     } 
 

 
     // This counter keeps track on how many times callBackFunction has been run. 
 
     var counter = 0; 
 
     // Loop through the results array and place a marker for each 
 
     // set of coordinates. 
 
     function callbackFunction(photos){ 
 
     for (var i = 0; i < photos.data.length; i++) { 
 
      
 
      var object = photos.data[i]; 
 
     
 
      
 
      if (object.location !== null) { 
 
      
 
       var lat = object.location.latitude; 
 
       var lon = object.location.longitude; 
 
      
 
       var image = { 
 
        url: object.images.thumbnail.url, 
 
        origin: new google.maps.Point(0,0), 
 
        anchor: new google.maps.Point(0,32), 
 
        scaledSize: new google.maps.Size(45, 45) 
 
       }; 
 
     
 
      
 
       var latLng = new google.maps.LatLng(lat ,lon); 
 
      
 
       var marker = new google.maps.Marker({ 
 
        position: latLng, 
 
        map: map, 
 
        icon : image, 
 
        title: "click to view more"    
 
       });     
 
      
 
       console.log(object.link); 
 
       console.log (object.tags); 
 
       console.log(object); 
 
       console.log(latLng); 
 
      
 

 
       var infowindow = new google.maps.InfoWindow({ 
 
        maxWidth: 200, 
 
        content: '<div id="infobox">'+ '<img src= '+object.images.thumbnail.url + '>' +'</div>', 
 
       }); 
 

 
      
 
       google.maps.event.addListener(marker, 'click', function() {   
 
        infowindow.open(map,this); 
 
       }); 
 
      } 
 
     } 
 

 

 

 

 

 
     // If the counter is less than 5 and photos.pagination.next_url has a value then... 
 
     if(counter < 1 && photos.pagination.next_url && photos.pagination.next_url != ''){ 
 
      //... increase the counter 
 
      counter++; 
 
      console.log('COUNTER: ', counter) 
 

 
      //... run the "callbackFunction" for the next page url. 
 
      var script = document.createElement('script'); 
 
      script.src = photos.pagination.next_url; 
 
      document.getElementsByTagName('head')[0].appendChild(script); 
 
     } 
 
     
 
     
 
      
 

 

 

 
     } 
 
     google.maps.event.addDomListener(window, 'load', initialize);

来源

2014-10-28 Alessandro Icardi

看吧：http://stackoverflow.com/questions/ 26588426/google-map-api-with-street-view-in-infowindow-not-working/26590599＃26590599。你做什么：只做1 infowindow。当客户点击标记时，您将内容设置为infoWindow并将其与标记耦合。我会看看你的代码。 – 2014-10-28 15:46:37

谢谢Emmanuel花时间！我会研究这个选项！ – 2014-10-28 16:06:14

我觉得这是它（我把刚才的小变化），在我的意见

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <title></title> 
    <style> 
     html, body, #map_canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
    <script> 
    var map; 
    var contentArray = []; 
    var markerArray = []; 
    var infowindow ; 

    function initialize() { 
    map = new google.maps.Map(document.getElementById('map_canvas'), { 
     zoom: 2, 
     center: new google.maps.LatLng(41.8919300,12.5113300), 
     mapTypeId: google.maps.MapTypeId.BASE 
    }); 
    infowindow = new google.maps.InfoWindow({ 
     maxWidth: 200, 
     content: '' 
    }); 
    var script = document.createElement('script'); 
    script.src = 'https://api.instagram.com/v1/tags/pewdiepiefanart/media/recent?client_id=0c97bcab30b34cee924151bea77b3cd1&callback=callbackFunction'; 
    document.getElementsByTagName('head')[0].appendChild(script); 
    } 
    // This counter keeps track on how many times callBackFunction has been run. 
    var counter = 0; 
    // Loop through the results array and place a marker for each 
    // set of coordinates. 
    function callbackFunction(photos) { 
    for (var i = 0; i < photos.data.length; i++) { 
     var object = photos.data[i]; 
     if (object.location !== null) { 
      var lat = object.location.latitude; 
      var lon = object.location.longitude; 
      var image = { 
       url: object.images.thumbnail.url, 
       origin: new google.maps.Point(0,0), 
       anchor: new google.maps.Point(0,32), 
       scaledSize: new google.maps.Size(45, 45) 
      }; 
      var latLng = new google.maps.LatLng(lat ,lon); 
      var marker = new google.maps.Marker({ 
       position: latLng, 
       map: map, 
       icon : image, 
       title: "click to view more" 
      }); 
      console.log(object.link); 
      console.log (object.tags); 
      console.log(object); 
      console.log(latLng); 

      // push the data to an array. push the marker-object to an array. 
      // contentArray & markerArray will have the same index, that makes it easy 
      contentArray.push('<div id="infobox">'+ '<img src= '+object.images.thumbnail.url + '>' +'</div>'); 
      markerArray.push(marker); 

      google.maps.event.addListener(marker, 'click', function() {   
       // determin the index. 
       var index = markerArray.indexOf(this); 
       var content = contentArray[index]; 
       infowindow.setContent(content); 
       infowindow.setPosition(markerArray[index].getPosition()); 
       infowindow.open(map, this); 
      }); 
     } 
    } 
    // If the counter is less than 5 and photos.pagination.next_url has a value then... 
    if(counter < 1 && photos.pagination.next_url && photos.pagination.next_url != '') { 
     //... increase the counter 
     counter++; 
     console.log('COUNTER: ', counter) 
     //... run the "callbackFunction" for the next page url. 
     var script = document.createElement('script'); 
     script.src = photos.pagination.next_url; 
     document.getElementsByTagName('head')[0].appendChild(script); 
    } 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
    </head> 
    <body> 
    <div id="map_canvas"></div> 
    </body> 
</html>

来源

2014-10-28 17:59:31

哦，谢谢这么多的伴侣！真的很感激你花时间看这个！ – 2014-10-28 20:27:36

infowindow谷歌地图上显示错误图片

回答

相关问题