Question

我正在开发一个应用程序，我使用2个API＆a; k.a Instagram API和Google Map API 。使用AJAX，我通过标记名称获得第一组图像过滤。在第1集中，我们收到20张图片。在收到的图像中，具有纬度和经度信息（地理标记图像）的图像将显示在地图上。

现在第一次加载页面时，我看不到地图。但是当我按下加载更多按钮来获取下一组图像时，地图也能正常显示我以前的图像。

以下是页面加载时发生的代码：

$( window ).load(function() {
    $.ajax({
      type: "GET",
      url: "https://api.instagram.com/v1/tags/nyc/media/recent?client_id=02e****",
      dataType:'JSONP',
      success: function(result) {
        onAction(result, 2, tag);
        instaMap(result, 2, from);
      }
    });
});

这些是被调用的函数：

 /**
  * [initialize description]
  * Initialize the map with markers showing all photos that are geotagged.
 */
 var initialize = function(markers) {
 var bounds = new google.maps.LatLngBounds(),
mapOptions = {
  scrollwheel: false,
  mapTypeId: 'roadmap',
  center: new google.maps.LatLng(22.50, 6.50),
  minZoom: 2
},
gmarkers = [],
map,
positions,
markCluster;

markers = remDuplicate(markers);

// Info Window Content
var infoWindowContent = [];
for (var j = 0; j < markers.length; j++ ) {
  var content = [
  '<div class="info_content">' +
  '<h3>' + markers[j][2] + '</h3>' +
  '<a href="' + markers[j][3] + '" target="_blank">' +
  '<img src="' + markers[j][4] + '" style="z-index:99999">' + '</a>' +
  '</div>'
  ];
  infoWindowContent.push(content);
}

// Display a map on the page
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
map.setTilt(45);

// Display multiple markers on a map
var oms = new OverlappingMarkerSpiderfier(map);
var infoWindow = new google.maps.InfoWindow(), marker, i;

// Loop through our array of markers & place each one on the map
for( i = 0; i < markers.length; i++ ) {
  positions = new google.maps.LatLng(markers[i][0], markers[i][1]);
  marker = new google.maps.Marker({
    position: positions,
    map: map,
    animation:google.maps.Animation.BOUNCE,
    title: markers[i][2]
  });

  oms.addMarker(marker);

  // Allow each marker to have an info window
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infoWindow.close();
      infoWindow.setContent(infoWindowContent[i][0]);
      infoWindow.open(map, marker);
      map.setCenter(marker.getPosition());
    };
  })(marker, i));

  gmarkers.push(marker);
}

google.maps.event.addListener(map, 'click', function() {
  infoWindow.setMap(null);
});

markCluster = new MarkerClusterer(map, gmarkers);

// Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
  map.setZoom(2);
  google.maps.event.removeListener(boundsListener);
});

};

 /**
  * [onAction]
  * OnAction() function helps in loading non-geotagged pics.
  *
  * @param  {[type]} result [Result retruned from the Instagram API in json format]
  * @param  {[type]} likey  [hearts the user has entered as per which the posts will be filtered]
  */
  var onAction = function (result, likey, tag) {
$('.load-pics').remove();

if (result.pagination.next_url) {
  paginate = removeURLParameter(result.pagination.next_url, 'count');
}

$.each(result, function(key, value) {
  if (key === 'data') {
    $.each(value, function(index, val) {
      liked = val.likes.count;
      link = val.link;
      imgUrl = val.images.low_resolution.url;
      locations = val.location;

      if (liked >= likey) {
        if (locations === null) {
          output = '<li class="img-wrap">' + '<div class="main-img">' +
          '<a href="' + link + '" target="_blank">' +
          '<img src="' + imgUrl + '" ><span class="hover-lay"></span></a>' +'<p>' +
          '<span class="heart"></span><span class="likes-no">' + liked + '</span>' +
          '<span class="comment-box"></span><span class="comment-no">' +
          val.comments.count + '</span> ' + '</p>' + '</div>' +
          '<div class="img-bottom-part">'+ '<a href="" class="profile-pic"></a>' + '<div class="headin-hastag">' +
          'by ' + '<h2>Sebastien Dekoninck</h2><a href="" class="has-trand">#hello  <span>#kanye</span>  #helloagain  #tagsgohere</a></div>'
          +'</div></li>';
          $('#instafeed').append(output);
        }
      }
    });
  }
});

if ($('#instafeed').children().length === 0) {
  alert('There are no pics with ' + likey + ' likes or #' + tag + ' was not found.');
} else {
  // $('.not-geo').remove();
  // $('#instafeed').before('<button class="not-geo">Click To See Images That Are Not Geotagged <img src="assets/imgs/down.png" ></button>');
}
$('#instafeed').append('<div class="load-pics"><button id="show-more">Show more <span></span></button> </div>');
};

/**
 * [instaMap]
 * instaMap() will be the function which will deal with all map based functionalities.
*/
var instaMap = function(result, likey, from) {
$('.load-mark').remove();

if (result.pagination.next_url) {
  pagiMap = removeURLParameter(result.pagination.next_url, 'count');
}
$.each(result, function(key, value) {
  if (key === 'data') {
    $.each(value, function(index, val) {
      liked = val.likes.count;
      link = val.link;
      imgUrl = val.images.low_resolution.url;
      locations = val.location;

      if (liked >= likey) {
        if (locations && locations.latitude !== null) {
          tempArr = [
          locations.latitude,
          locations.longitude,
          val.user.username,
          val.link,
          val.images.low_resolution.url
          ];
          mark.push(tempArr);
        }
      }
    });
  }
});
if (mark.length) {
    initialize(mark);
    $('.map-parent-wrapper').append('<div class="load-mark"><button id="show-mark">See More </button></div>');
} else {
    alert('No geotagged pics found in the retrieved set. Click see more');
    $('.map-parent-wrapper').append('<div class="load-mark"><button id="show-mark">See More </button></div>');
}
};

我创建了一个查看更多按钮来检索下一组图像并在地图上加载这些图像。点击查看更多，一切似乎都运行正常。不知道为什么会发生这样的事情。 Console.log不显示任何错误。此外，我提供的所有值都适当地流动。我甚至尝试清除缓存。不确定，为什么会发生这种情况。

Answer 1

如果instaMap是要处理所有基于地图的功能的函数，它必须是在$（window）.load函数（）中加载映射的函数。

否则，如果您希望在初始窗口加载时加载Google地图，则需要将其放在下面：

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

谷歌地图不会出现在加载中

1 个答案: