Google使用JavaScript和PHP映射标记 [英] Google maps markers with javascript and PHP
问题描述
我正在构建一个应用程序,其中包含人员姓名数据库,关于他们的信息以及他们当前的位置。
我设法使用Google maps javascript API创建地图,并标记您当前的位置。然而,我似乎无法使用PHP循环为我的数据库中的每个人放置一个带有信息窗口的标记。这是我的代码:
I am building an application that has a database of people's names, info about them and their current location. I managed to create a maps using Google maps javascript API, and mark your current location. however, i cant seem to be able to use a PHP loop to place a marker with an info window for every person in my database. Here is my code:
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++;
}
?>
推荐答案
对json_encode数据更好,在JavaScript中的变量,然后使用JavaScript循环它。更好的是使用AJAX请求来获取数据。
It would be better to json_encode your data, pass that to a variable in javascript, and then loop over it using javascript. Even better would be using AJAX requests to fetch the data.
<?php
function fetchGigs() {
$gigs = new Array();
$query = mysql_query("SELECT * FROM gigs");
while($gig = mysql_fetch_array($query)) {
$gigs[] = $gig;
}
return $gigs;
}
并在您的javascript中:
And in your 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>
这篇关于Google使用JavaScript和PHP映射标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!