javascript - 在 php 中正确显示地图 infoWindow

Question

如何循环遍历关联数组的值？现在我一次只能参加一个协会！在这里，我将 MySQL 表中的所有值传递给 json_encode，仅将 lat & long 作为数组的数组和其他字符串。谢谢

function myMap() {

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

  var mapOptions = {
      zoom: 5,
      center: new google.maps.LatLng(44.849716, 10.052282),
      mapTypeId: 'roadmap',
      styles: []
  };

  var i = 0;
  var mapElement = document.getElementById('map');
  var map = new google.maps.Map(mapElement, mapOptions);
  var markers = <?= json_encode($this->getCoordinatesMaps[0]); ?>; //Passing the PHP values to JS


  var marker, i;
  //Add marker to map
  for(var i in markers) {
      var marker = markers[i];
      var marker = new google.maps.Marker({
          position: new google.maps.LatLng(marker.lat, marker.long),
          map: map,
          title: 'Niente',
          clickable: true
      });


      google.maps.event.addListener(marker, 'click', (function(marker, i) {
                    return function() {
                        infowindow.setContent(<?= json_encode($this->getCoordinatesMaps[0]->comune); ?> + ' - ' + <?= json_encode($this->getCoordinatesMaps[0]->mansione_tecnica); ?>);
                        infowindow.open(map, marker);
                    }
                })(marker, i));
      }
  }

标签： javascriptphpjsongoogle-mapsinfowindow

Answer 1

这是我上一个问题的解决方案。也许可以帮助尝试做同样事情的人。然后我还添加了一个 GET 表单来轻松更改您在全球范围内看到工人的日期。:)

function myMap() {

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

    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(44.849716, 10.052282),
        mapTypeId: 'roadmap',
        styles: []
    };

    var mapElement = document.getElementById('map');
    var map = new google.maps.Map(mapElement, mapOptions);

    var markersArray = '<?= json_encode($this->getCoordinatesMaps); ?>';//Passing the PHP values to JS
    markers = JSON.parse(markersArray); //Reading array values
    // console.log(markers[1].comune);

    var marker, i; //Defining this function for infoWindow

    for (var i = 0; i < markers.length; i++) {
    // console.log(markers[i].latlng.lat + ' is a ' + markers[i].latlng.long + '.');
    var marker = markers[i];
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(markers[i].latlng.lat, markers[i].latlng.long),
        map: map,
        title: markers[i].surname + ' ' + markers[i].name,
        animation: google.maps.Animation.DROP,
        clickable: true
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
              infowindow.setContent("<div><img width='120' height='30' src='/images/logo.png'</div><hr />" + '<strong>Address: </strong> ' + markers[i].address + ' <strong>Event Name: </strong> ' + markers[i].event_name  + ' <strong>Worker: </strong> ' + markers[i].name+ ' ' + markers[i].surname + ' <strong>Work: </strong> ' + markers[i].technical_work + ' <strong>Client: </strong>' + markers[i].client_name);
              infowindow.setOptions({maxWidth: 300});
              infowindow.open(map, marker);
          }
      })(marker, i));
    }

}