Question

我试图让infowindows填充Zomato API数据，但我不断获取对象中的最后一项。我尝试了一个带闭包的for循环和带有＆＃34; for＆＃34;的for循环。而不是＆＃34; var＆＃34;，但这没有帮助。任何可以推动我前进的建议都将不胜感激。

＆＃13;

var map;
var markers = [];
var cuisines, name, establishment, locality, menu, photos, rating, infoContent;

var locations = [
  {name: 'The Pub at Ghirardelli Square', latlng: {lat: 37.8063722222, lng: -122.4228888889}},
  {name: 'The Irish Bank', latlng: {lat: 37.7902750000, lng: -122.4048472222}}, 
  {name: 'Rogue San Francisco Public House', latlng: {lat: 37.8001440000, lng: -122.4104550000}}, 
  {name: 'Chieftain Irish Restaurant & Pub', latlng: {lat: 37.7814900000, lng: -122.4051510000}}, 
  {name: 'Kennedy\'s Irish Pub and Curry House', latlng: {lat: 37.8042510000, lng: -122.4156040000}},
  {name: 'Murphy\'s Pub', latlng: {lat: 37.7901916667, lng: -122.4038472222}}
];

//create instance of a map from the Google Maps API
//Grab the reference to the "map" id to display the map
//Set the map options object properties
function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7884162, 
      lng: -122.4127457
    },
    zoom: 14
  });

  var infowindow = new google.maps.InfoWindow();

  var marker;

  for(var i = 0; i < locations.length; i++) {
    (function() {
      // get the position fronm the locations array
      var position = locations[i].latlng;
      var title = locations[i].name;

      //create a marker per location and put into markers array
      var marker = new google.maps.Marker({
        map: map,
        position: position,
        title: title,
        animation: google.maps.Animation.DROP
        //id: i
      });

      //push the marker to our array of markers
      markers.push(marker);

      //extend the boundaries of the map for each marker
      marker.addListener('click', function() {
        populateInfoWindow(this, infowindow);
        infowindow.setContent(infoContent);
      });
    })(i);//end of closure
  }//end of for loop
}; //end initMap()

function populateInfoWindow(marker, infowindow) {
  //check to make sure the infowindow is not already opened in this marker
  if (infowindow.marker != marker) {
    infowindow.marker = marker;
    infowindow.setContent('<div>' + marker.title + '</div>' + marker.infoContent);
    infowindow.open(map, marker);
    //Make sure the marker property is cleared if the infowindow is closed
    infowindow.addListener('closeclick', function() {
      infowindow.setMarker = null;
    });
  }
}// end of populateInfoWindow

$.ajax({
  method: "GET",
  crossDomain: true,
  url: "https://developers.zomato.com/api/v2.1/search?count=6&lat=37.79161&lon=-122.42143&establishment_type=6",
  dataType: "json",
  async: true,
  headers: {
    "user-key": "0a661374a6b58eb2fa84142d27fe81ca"
  }, 
  success: function(data) {
    var pubs = [];
    pubs = data.restaurants;
    for(var j = 0; j < pubs.length; j++) {
      (function(val) {
         infoContent = "<div class='name'>" + "Pub: " + pubs[j].restaurant.name + "</div>" + "\n" + "<div class='cuisines'>" + pubs[j].restaurant.cuisines + "</div>";
      })(j);
    }
  }, 
  error: function() {
    infoContent = "<div>Sorry, data is not coming through. Refresh and try again.</div>";
  }
});//end of $.ajax call

＆＃13;

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Map</title>
    <link rel="stylesheet" href="css/foundation.css">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <div class="grid-container">
      <div class="grid-x grid-padding-x">
        <div class="large-12 cell">
        </div>
      </div>

      <div class="grid-x grid-padding-x">
        <div class="large-12 cell">
          <div class="callout">
            <div id="map" class="flex-video">
              <iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.js"></script>
    <script src="js/map.js"></script>
    <script async deter src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBS6v85DRLDI_VKGgNdgQ6EVzDxJfZZOF8&ve&3&libraries=places,drawing&callback=initMap">
   </script>
  </body>
</html>

＆＃13;

Answer 1

下面显示的行是错误的，删除它并且您的代码有效：

marker.addListener('click', function() {
  populateInfoWindow(this, infowindow);
  // infowindow.setContent(infoContent); <<<<<<<<<<<<  REMOVE
});

proof of concept fiddle

代码段

var map;
var markers = [];
var cuisines, name, establishment, locality, menu, photos, rating, infoContent;

var locations = [
  {name: 'The Pub at Ghirardelli Square', latlng: {lat: 37.8063722222, lng: -122.4228888889}},
  {name: 'The Irish Bank', latlng: {lat: 37.7902750000, lng: -122.4048472222}}, 
  {name: 'Rogue San Francisco Public House', latlng: {lat: 37.8001440000, lng: -122.4104550000}}, 
  {name: 'Chieftain Irish Restaurant & Pub', latlng: {lat: 37.7814900000, lng: -122.4051510000}}, 
  {name: 'Kennedy\'s Irish Pub and Curry House', latlng: {lat: 37.8042510000, lng: -122.4156040000}},
  {name: 'Murphy\'s Pub', latlng: {lat: 37.7901916667, lng: -122.4038472222}}
];

//create instance of a map from the Google Maps API
//Grab the reference to the "map" id to display the map
//Set the map options object properties
function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: 37.7884162,
      lng: -122.4127457
    },
    zoom: 14
  });

  var infowindow = new google.maps.InfoWindow();

  var marker;

  for (var i = 0; i < locations.length; i++) {
    (function() {
      // get the position fronm the locations array
      var position = locations[i].latlng;
      var title = locations[i].name;

      //create a marker per location and put into markers array
      var marker = new google.maps.Marker({
        map: map,
        position: position,
        title: title,
        animation: google.maps.Animation.DROP,
        infoContent: "there is no infoContent!"
        //id: i
      });

      //push the marker to our array of markers
      markers.push(marker);

      //extend the boundaries of the map for each marker
      marker.addListener('click', function() {
        populateInfoWindow(this, infowindow);
      });
    })(i); //end of closure
  } //end of for loop
}; //end initMap()

function populateInfoWindow(marker, infowindow) {
  //check to make sure the infowindow is not already opened in this marker
  if (infowindow.marker != marker) {
    infowindow.marker = marker;
    infowindow.setContent('<div>' + marker.title + '</div>' + marker.infoContent);
    infowindow.open(map, marker);
    //Make sure the marker property is cleared if the infowindow is closed
    infowindow.addListener('closeclick', function() {
      infowindow.setMarker = null;
    });
  }
} // end of populateInfoWindow

$.ajax({
  method: "GET",
  crossDomain: true,
  url: "https://developers.zomato.com/api/v2.1/search?count=6&lat=37.79161&lon=-122.42143&establishment_type=6",
  dataType: "json",
  async: true,
  headers: {
    "user-key": "0a661374a6b58eb2fa84142d27fe81ca"
  },
  success: function(data) {
    var pubs = [];
    pubs = data.restaurants;
    for (var j = 0; j < pubs.length; j++) {
      (function(val) {
        infoContent = "<div class='name'>" + "Pub: " + pubs[j].restaurant.name + "</div>" + "\n" + "<div class='cuisines'>" + pubs[j].restaurant.cuisines + "</div>";
      })(j);
    }
  },
  error: function() {
    infoContent = "<div>Sorry, data is not coming through. Refresh and try again.</div>";
  }
}); //end of $.ajax call
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

Answer 2

对这个答案的发现是欣赏范围的一个很好的练习。我还发现我的数据对象可以从for循环中为标记运行相同的迭代器。

//create instance of a map from the Google Maps API
//Grab the reference to the "map" id to display the map
//Set the map options object properties
function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
   center: {
   lat: 37.7884162, 
   lng: -122.4127457
 },
 zoom: 14
});

var marker;

//$.ajax call 
$.ajax({
method: "GET",
crossDomain: true,
url: "https://developers.zomato.com/api/v2.1/search?count=6&lat=37.79161&lon=-122.42143&establishment_type=6",
dataType: "json",
async: true,
headers: {
  "user-key": "0a661374a6b58eb2fa84142d27fe81ca"
}, 
success: function(data) {
  passZomatoData(data);
}, 
error: function() {
  infoContent = "<div>Sorry, data is not coming through. Refresh and try again.</div>";
}
});//end of $.ajax call

//function passZomatoData()
function passZomatoData(data) {
var infowindow = new google.maps.InfoWindow();
pubs = data.restaurants;
console.log(data);

for(var i = 0; i < locations.length; i++) {
  (function() {
    // get the position fronm the locations array
    var position = locations[i].latlng;
    var title = locations[i].name;
    var cuisine = pubs[i].restaurant.cuisines;
    var address = pubs[i].restaurant.location.address;
    console.log(address);
    //create a marker per location and put into markers array
    var marker = new google.maps.Marker({
      map: map,
      position: position,
      title: title,
      cuisine: cuisine, 
      address: address,
      animation: google.maps.Animation.DROP
    });

    //push the marker to our array of markers
    markers.push(marker);

    //extend the boundaries of the map for each marker
    marker.addListener('click', function() {
      populateInfoWindow(this, infowindow);
      infowindow.setContent('<div><b>Pub name:<b> ' + marker.title + '</div><div><b>Address:<b> ' + marker.address + '</div><div><b>Cuisine:<b> ' + marker.cuisine + '</div>');
     });
   })(i);//end of closure
  }//end of for loop
 }

}; //end initMap()

function populateInfoWindow(marker, infowindow) {
  //check to make sure the infowindow is not already opened in this marker
  if (infowindow.marker != marker) {
  infowindow.marker = marker;
  //infowindow.setContent('<div>' + marker.title + '</div>' + marker.infoContent);
  infowindow.open(map, marker);
  //Make sure the marker property is cleared if the infowindow is closed
  infowindow.addListener('closeclick', function() {
  infowindow.setMarker = null;
  });
 }
}// end of populateInfoWindow

无法通过$ .ajax使用Zomato API数据填充infowindows

2 个答案: