Question

第一次来这里！我很擅长编码所以提前道歉！我在谷歌地图上显示Instagram图片。我已经修改了标记以显示图片的小版本，我想添加一个信息窗口，其中包含更大版本的图像，但它仍然显示错误的图像！我还提供了一种运行分页并获得更多结果的方法（我认为有点黑客）。有什么想法吗？

谢谢！

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);

Answer 1

我认为就是这样（我现在做了一个小改动）

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

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

1 个答案: