Question

我在Rails中使用Google Maps API。从ajax调用获取我的所有位置并将其显示在for循环中。我跟着这个link当我复制粘贴这个我的文件中的代码似乎完美无缺。但是当我试图为我的代码做同样的事情时。它会一直显示最后的标记信息。

jQuery(function($) {
var myCenter = new google.maps.LatLng(51.508742,-0.120850);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 5};
var map = new google.maps.Map(mapCanvas, mapOptions);

$.ajax({
 url: "/list_proposals",
  type: "GET",
  dataType: "json",
  success:function(data) {
    placeMarker(map, data);
  }
});

function placeMarker(map, data){

  for (var i = 0; i < data.length; i++) {
    var location_data = data[i];
    var lat = location_data["lat"];
    var long = location_data["long"];
    var planting_proposal = location_data["planting_proposal"];
    var proposal_id = planting_proposal["id"];
    var title = planting_proposal["title"];
    var photo_url = planting_proposal["main_photo"]["attachment_thumb_url"];

    latlngset = new google.maps.LatLng(lat, long);
    var image = {
      url: window.location.origin + "/" + photo_url,
      size: new google.maps.Size(50, 50),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(0, 32)
    };
     var marker = new google.maps.Marker({
         map: map, title: title , position: latlngset, icon: image
     });
     map.setCenter(marker.getPosition());
     var show_proposal_link = '<a href="/planting_proposals/' + proposal_id + '">' + title + '</a>';
     var contentString =  '<div class="card text-center" style="width: 20rem;">' +
       '<div class="card-block">' +
         '<h4 class="card-title">'+ show_proposal_link + '</h4>' +
         '<p class="card-text">' + '<img src="'+ window.location.origin + "/" + photo_url + '" width="100%;"/>' + '</p>' +
       '</div>' +
     '</div>';

     var infowindow = new google.maps.InfoWindow();

     google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
         return function() {
            infowindow.setContent(contentString);
            infowindow.open(map, marker);
         };
     })(marker,content,infowindow));
  }
}
});

我是Google Maps API的新手。请帮我解决一下我做错了什么？

Answer 1

您应该在代码中正确实现IIFE。请使用以下IIFE替换代码的google.maps.event.addListener(marker,...部分：

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

概念证明

＆＃13;

var map;
      
var locations = [
  {
    planting_proposal: {
      id: 1,
      title: "Proposal 1"
    },
    lat: 41.386043,
    long: 2.14561
  },
  {
    planting_proposal: {
      id: 2,
      title: "Proposal 2"
    },
    lat: 41.417371,
    long: 2.172115
  },
  {
    planting_proposal: {
      id: 3,
      title: "Proposal 3"
    }, 
    lat: 41.399475,
    long: 2.184048
  }
]

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.385064, lng: 2.173403},
    zoom: 12
  });

  placeMarker(map, locations);
}

function placeMarker(map, data){

    for (var i = 0; i < data.length; i++) {
      var location_data = data[i];
      var lat = location_data["lat"];
      var long = location_data["long"];
      var planting_proposal = location_data["planting_proposal"];
      var proposal_id = planting_proposal["id"];
      var title = planting_proposal["title"];

      latlngset = new google.maps.LatLng(lat, long);
      var marker = new google.maps.Marker({
          map: map, 
          title: title , 
          position: latlngset
      });

      var show_proposal_link = '<a href="/planting_proposals/' + proposal_id + '">' + title + '</a>';
       var contentString =  '<div class="card text-center" style="width: 20rem;">' +
         '<div class="card-block">' +
           '<h4 class="card-title">'+ show_proposal_link + '</h4>' +
         '</div>' +
       '</div>';

       var infowindow = new google.maps.InfoWindow();

       (function(marker,content,infowindow) {
           google.maps.event.addListener(marker,'click', function() {
              infowindow.setContent(content);
              infowindow.open(map, marker);
           });   
       })(marker,contentString,infowindow);
    }
}

＆＃13;

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

＆＃13;

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap"
    async defer></script>

＆＃13;

我希望这有帮助！

在Google Maps API中为多个标记添加侦听器事件

1 个答案: