不显示地图和多个标记
Not Displaying The map and the multiple markers
我试图在谷歌地图上显示许多标记。
- 显示一个标记
- 我写了不同标记的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>
相关文章:
- 地图API没有't显示地图
- 单击按钮以突出显示地图标记 (Gmaps) - 如何
- 谷歌地图API没有;t显示地图,如果中心由javascript函数填充
- 将PHP集成到Javascript中,使用Google API显示地图标记
- IE中的谷歌地图API v3不显示地图或标记
- 数据映射不是't显示地图
- 谷歌地图隐藏并显示地图
- 在谷歌地图中显示地图标记内容的事件
- 映射:单击标记,显示地图旁边的内容
- 谷歌地图没有显示地图上的所有目的地标记,只有第一个和最后一个
- 如何在另一页上显示地图并全屏查看
- 谷歌地图 - 通过使用php检索纬度和纵向来显示地图和标记
- 单击时显示地图,然后滚动到地图
- 在 JavaScript 循环中显示地图标记的 JSON 解析数据
- 如何更新和显示地图对象
- 必应地图显示地图的左上角的北美
- 谷歌地图功能,但不显示地图
- 如何在选择html元素时高亮显示地图标记
- 获取用户's附近没有显示地图与谷歌地图api v3
- 显示地图的“切换街景地图的问题”