我试图在谷歌地图上显示许多标记。
- 显示一个标记
- 我写了不同标记的GPS定位
我有一个包含经度,纬度值的数据库我想把这些值作为标记显示在地图上
这是一个尝试,但不工作,请帮助我,我已经花了一整天。/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>multi-marqueurs</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<? php
$connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("project",$connexion) or die(mysql_error());
$result = mysql_query("SELECT lattitude,longitude FROM intervenantconn ");
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
if($listeDesPoints!='') $listeDesPoints.=',';
$listeDesPoints.='['.$row['lattitude'].','.$row['longitude'].']';
}
mysql_close($connexion);
?>
<div id="map" style="width: 600px; height: 550px;"></div>
<script type="text/javascript">
var listedespoints=[
<? php echo $listeDesPoints; ?>
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(47.4,1.6),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < liste_des_points.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(liste_des_points[i][1], liste_des_points[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>
1)正如@mauno-v告诉你使用liste_des_points
而不是listedespoints
来循环。
2)在你的循环中,你使用第二个和第三个条目liste_des_points[i][1], liste_des_points[i][2]
,而你只创建两个条目。
3)在您的点击事件中,您使用locations[i][0]
,其中位置未定义。
因此,创建一个包含三个条目的列表['location name','latitude','longitude']
或更改您的索引和变量名称。
见下文:
<?
error_reporting(E_ALL);
ini_set('error_reporting','on');
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>multi-marqueurs</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<?php
/*$connexion=mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("project",$connexion) or die(mysql_error());
$result = mysql_query("SELECT lattitude,longitude FROM intervenantconn ");
$listeDesPoints='';
while($row = mysql_fetch_array($result)){
if($listeDesPoints!='') $listeDesPoints.=',';
$listeDesPoints.='['.$row['lattitude'].','.$row['longitude'].']';
}
mysql_close($connexion);*/
$listeDesPoints='[''Location 1'',47.45,2],[''Location 2'',47.46,1.6],[''Location 2'',47.47,1]';
?>
<div id="map" style="width: 600px; height: 550px;"></div>
<script type="text/javascript">
var liste_des_points=[
<?php echo $listeDesPoints; ?>
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: new google.maps.LatLng(47.4,1.6),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < liste_des_points.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(liste_des_points[i][1], liste_des_points[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(liste_des_points[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</body>
</html>