Question

如果有人能指出我的错误，我将非常感谢。在线教程之一将我链接到本教程Adding multiple markers with infowindows (Google Maps API)，该教程介绍如何显示每个弹出式窗口及其各自的内容。我访问过有关Stack Overflow的其他类似文章，但是已经整整一天了，我无法真正解决这个问题。

目标：

Google地图上的每个标记

将显示餐厅位置。每个地点都有一个或多个厨师推荐。

当用户单击标记时，它将弹出Google Maps弹出信息窗口

弹出的窗口信息内容仅显示已分配给该特定餐厅的厨师推荐（每个餐馆可以有多个厨师推荐）。

我已经实现的目标：

每个标记位置均已从数据库中检索并正确显示在Google地图上。

每个标记都有自己的弹出窗口。

每个弹出信息窗口都可以显示内容。

问题：

标记上的每个弹出窗口将具有与厨师推荐的内容相同的内容，这些内容当前是数据库的最后一行。

谢谢。

// ******** Begin Google Maps ********* //
function initMap() {

  var restMarker = "somePathToImage.png";

  var map = new google.maps.Map(
    document.getElementById('googleMaps'), {
      zoom: 17, 
      center: { lat: gon.locations[0].latitude, lng: gon.locations[0].longitude}
    });

    // ******** BEGIN WINDOW INFO CONTENT ******** //
    for (var x = 0; x < gon.restaurant.length; x++){
      var contentString = 
      '<div id="content1">'+
        '<div class="container">'+
          gon.restaurant[x].chefRecommend +
        '</div>'+
      '</div>'
      ;
    }
   // ******** END WINDOW INFO CONTENT ******** //

   for (var i = 0; i < gon.locations.length; i++){
    var gMapsMarker = new google.maps.Marker({
      position: { lat: gon.locations[i].latitude, lng: gon.locations[i].longitude},
      map: map,
      icon: restMarker
    });

    var gMapsInfo = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 250 
    });

    gMapsMarker.gMapsInfo = gMapsInfo;

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

Answer 1

嗨，我认为问题出在第一方面。完成后，您有相同的想法 contentString 用于cicle。您需要以相同的方式完成所有操作：

GIFPickerComponent

希望此帮助我无法尝试代码，我不确定。.

Google Maps弹出标记信息仅显示数据库中的最后内容

1 个答案: