Google отображает маркеры с помощью JavaScript и PHP

Question

Я создаю приложение, в котором есть база данных с именами людей, информацией о них и их текущим местоположением.Мне удалось создать карты с помощью API-интерфейса javascript для Google maps и отметить ваше текущее местоположение.Тем не менее, я не могу использовать цикл PHP, чтобы разместить маркер с информационным окном для каждого человека в моей базе данных.Вот мой код:

    lat = position.coords.latitude;
lon = position.coords.longitude;

//init map
myOptions = {
   center: new google.maps.LatLng(lat, lon),
   zoom: 15,
   mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var image = 'http://i43.tinypic.com/v48d1w.png';
var loca = new google.maps.LatLng(lat, lon);
var currnetLocationMarker = new google.maps.Marker({
position: loca,
map: map,
animation: google.maps.Animation.DROP,
icon: image
});
var contentString;
var marklatlng;
<?php
require("connect.php");
$query = mysql_query("SELECT * FROM gigs");
$i = 0;
while($data = mysql_fetch_array($query))
{
echo "
contentString = 'Name: <b>" . $data['name'] . "</b><br> Info: <b>" . $data['desc'] . "    </b>';
var infowindow" . $i . " = new google.maps.InfoWindow({
content: contentString
});
marklatlng = new google.maps.LatLng(" . $data['lat'] . ", " . $data['lng'] . ");
var marker" . $i . " = new google.maps.Marker({
position: markLatlng,
map: map,
});
google.maps.event.addListener(marker" . $i . ", 'click', function() {
infowindow" . $i . ".open(map,marker" . $i . ");
});

";
$i++;
}
?>

Answer 1

Было бы лучше json_encode ваших данных, передать их переменной в javascript, а затем зациклить их, используя javascript.Еще лучше было бы использовать AJAX-запросы для извлечения данных.

<?php
function fetchGigs() {
  $gigs = new Array();
  $query = mysql_query("SELECT * FROM gigs");
  while($gig = mysql_fetch_array($query)) {
    $gigs[] = $gig; 
  }
  return $gigs;
}

И в вашем javascript:

<script>
// your other code...
var gigs = <?php echo json_encode(fetchGigs()); ?>

var createMarkerAt = function(lat, lng) {
  var latLng, marker;
  latLng = new google.maps.LatLng(lat, lng);
  marker = new google.maps.Marker({
    position: latLng,
    map: map,
  });
  return marker;
}

var createMarkerForGig = function (gig) {
  var marker, info;
  marker = createMarkerAt(gig.lat, gig.lng);
  info = new google.maps.InfoWindow({
    content: 'Name: <b>"' + gig.name + '"</b><br>Info: <b>"' + gig.desc + '"</b>'
  });
  google.maps.event.addListener(marker, 'click', function() {
    info.open(map, marker);
  });
  return marker;
}

// Add markers for all the gigs.
var len = gigs.length;
for (var i = 0; i<len; i++) {
  createMarkerForGig(gigs[i]);
}
</script>

Документация для php_encode()

Answer 2

Когда я писал похожее приложение, я использовал php для написания строки массива javascript, представляющего мои данные, а затем использовал прямые js, как только мне удалось построить строки для API. Однако, поскольку я обнаружил, как легко написать API на основе PHP для возврата объектов JSON из моей базы данных, я просто использую jQuery, чтобы запросить у моего homebrew API данные json, а затем работаю с этим. Это действительно невероятно легко сделать с SLIM. Вот ссылка http://codingthis.com/programming/php/using-the-slim-php-framework-for-developing-rest-apis/