在 php 中正确显示地图信息窗口

Question

如何循环查看关联数组的值？现在我一次只能参加一个联想！在这里，我将MySQL表中的所有值传递给json_encode，仅将纬度和长度作为数组和其他字符串的数组。谢谢

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));
}
}

Answer 1

setContent 方法需要一个字符串。您正在传递多个参数

infowindow.setContent(markers[i].lat, markers[i].long);

正确的方法应该是：infowindow.setContent('My content here');

Answer 2

这是我上一个问题的解决方案。也许可以帮助试图做同样事情的人。然后，我还添加了一个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));
}

}