Question

我有我的网页在地图上我有一些从DB加载的标记，这些标记加载正确，我有一个addListener（'click'）为这些标记打开一个小窗口与infowindow.open（），问题是我希望这个窗口加载来自DB的元素的正确信息，该元素对应于我点击的标记，我试图以不同的方式传递值并使用不同的变量，但我唯一的事情是get是未定义的或DB的最后一个元素，我想要的是所选标记的信息。

代码在这里：

<script>
var markers = @json($info);
var lat = [];
var lng = [];
var titol = [];
var adreca = [];
for(var i = 0; i < markers.length; i++){
    lat[i] = markers[i].lat;
    lng[i] = markers[i].lng;
    titol[i] = markers[i].nom_rocodrom;
    adreca[i] = markers[i].adreca;
}
function initMap() {
    var centre = {lat: 41.731047, lng: 1.783573};
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: centre
    }); 
    for(var i = 0; i < markers.length; i++){  
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat[i],lng[i]),
            map: map,
            animation: google.maps.Animation.DROP,
            id: i
        });            
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() { 
                infowindow.open(map, marker);  
            }
       })(marker, i)); 
        var infowindow = new google.maps.InfoWindow({
            content: '<div id="content">'+
                '<div id="siteNotice">'+
                '</div>'+
                '<h3 id="firstHeading" class="firstHeading">'+titol[marker.id]+'</h3>'+    
                '<img src="">'+
                '<div id="bodyContent">'+
                '<p>'+adreca[marker.id]+'</p>'+
                '<button type="button" class="btn btn-primary">'+'<a class ="boto_roco" href="/rocodroms/{{ $rocodrom->id }}">Informacio</a>'+'</button>'+
                '</div>'+
                '</div>',
            maxWidth: 200
        });
    }   
}

奇怪的是，如果我在这里控制台.log（marker.id）：

return function() { 
            infowindow.open(map, marker);  
        }

我得到的id值是正确的，但如果我在内容部分中使用marker.id，我将得到未定义。

Answer 1

您需要对InfoWindow内容进行功能关闭（如类似/重复问题中所述：Google Maps JS API v3 - Simple Multiple Marker Example）

proof of concept fiddle

代码段

＆＃13;

var markers = [{lat: 41.731047,lng: 1.783573,nom_rocodrom: "1",adreca: "First"},
  {lat: 41.73,lng: 1.75,nom_rocodrom: "2",adreca: "Second"}];
var lat = [];
var lng = [];
var titol = [];
var adreca = [];
for (var i = 0; i < markers.length; i++) {
  lat[i] = markers[i].lat;
  lng[i] = markers[i].lng;
  titol[i] = markers[i].nom_rocodrom;
  adreca[i] = markers[i].adreca;
}

function initMap() {
  var centre = {
    lat: 41.731047,
    lng: 1.783573
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 8,
    center: centre
  });
  for (var i = 0; i < markers.length; i++) {
    var marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat[i], lng[i]),
      map: map,
      animation: google.maps.Animation.DROP,
      id: i
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        var content = '<div id="content">' +
          '<div id="siteNotice">' +
          '</div>' +
          '<h3 id="firstHeading" class="firstHeading">' + titol[marker.id] + '</h3>' +
          '<img src="">' +
          '<div id="bodyContent">' +
          '<p>' + adreca[marker.id] + '</p>' +
          '<button type="button" class="btn btn-primary">' + '<a class ="boto_roco" href="/rocodroms/{{ $rocodrom->id }}">Informacio</a>' + '</button>' +
          '</div>' +
          '</div>'
        infowindow.setContent(content);
        infowindow.open(map, marker);
      }
    })(marker, i));
    var infowindow = new google.maps.InfoWindow({
      maxWidth: 200
    });
  }
}
google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

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

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

Google Maps API信息不会收到价值

1 个答案: