Javascript 如何使用数据库中的坐标在一个页面上动态添加多个地图
我有谷歌地图Api，我想在一个页面上使用和显示多个地图，每个地图都有自己的Javascript 如何使用数据库中的坐标在一个页面上动态添加多个地图,javascript,php,google-maps,google-maps-api-3,Javascript,Php,Google Maps,Google Maps Api 3,我有谷歌地图Api，我想在一个页面上使用和显示多个地图，每个地图都有自己的坐标和标记，坐标来自使用PHP的数据库，但在我的页面上，我只得到一个带有一个生成器的地图，我需要的地图数量等于坐标（纬度和经度）我抓到了。 如果可能的话，请帮助我 PHP HTML代码： <?php while($lakeRow=mysql_fetch_array($res)) { ?> <div class="Coordinates"> <input type="h
坐标和标记PHP<?php while($lakeRow=mysql_fetch_array($res)) { ?>
<div class="Coordinates">
<input type="hidden" class="a" id="latitude" value="<?php echo $lakeRow['latitude'];?>">
<input type="hidden" class="b" id="longitude" value="<?php echo $lakeRow['longitude'];?>">
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="more">
<h4><?php echo $lakeRow['photo_caption_one'];?></h4>
</div>
<a href="" target="_blank">
<?php echo '<img src="data:photo/jpeg;base64,'.base64_encode($lakeRow['photo'] ).'" height="300"/><br/>' ; ?>
<div class="caption">
<p><?php echo $lakeRow['photo_caption_one'] ; ?> .</p>
</div>
<div class="more">
<div id ="map" style="height: 253px" >
</div>
</div>
</a>
</div>
</div>
<?php }?>
<script type="text/javascript">
function initMap() {
var Latitude = parseFloat(document.getElementById('latitude').value);
var Longitude = parseFloat(document.getElementById('longitude').value);
var latLng = {
lat: Latitude,
lng: Longitude
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: latLng
});
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGMLRwrop1EGkgdzQ9a7zzREq4uw8l63k&callback=initMap">
</script>
<?php while($lakeRow=mysql_fetch_array($res)) { ?>
<div class="Coordinates">
<input type="hidden" class="a" id="latitude" value="<?php echo $lakeRow['latitude'];?>">
<input type="hidden" class="b" id="longitude" value="<?php echo $lakeRow['longitude'];?>">
</div>
<div class="col-md-4">
<div class="thumbnail">
<div class="more">
<h4><?php echo $lakeRow['photo_caption_one'];?></h4>
</div>
<a href="" target="_blank">
<?php echo '<img src="data:photo/jpeg;base64,'.base64_encode($lakeRow['photo'] ).'" height="300"/><br/>' ; ?>
<div class="caption">
<p><?php echo $lakeRow['photo_caption_one'] ; ?> .</p>
</div>
<div class="more">
<div id ="map" style="height: 253px" >
</div>
</div>
</a>
</div>
</div>
<?php }?>
<script type="text/javascript">
function initMap() {
var Latitude = parseFloat(document.getElementById('latitude').value);
var Longitude = parseFloat(document.getElementById('longitude').value);
var latLng = {
lat: Latitude,
lng: Longitude
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: latLng
});
var marker = new google.maps.Marker({
position: latLng,
map: map
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGMLRwrop1EGkgdzQ9a7zzREq4uw8l63k&callback=initMap">
</script>
函数initMap（）{
var Latitude=parseFloat（document.getElementById（'Latitude'）.value）；
var Longitude=parseFloat（document.getElementById（'Longitude'）.value）；
var latLng={
纬度，
经度
};
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：拉丁
});
var marker=new google.maps.marker({
位置：latLng，
地图：地图
});
}
它未经测试，但您可以尝试以下方法
<?php
/*
before the html is begun select the recordset
and store lat/lng to an array
*/
$lakes=array();
while( $lakeRow=mysql_fetch_array( $res ) ) {
$lakes[]=array(
'lat' => $lakeRow['latitude'],
'lng' => $lakeRow['longitude'],
'caption' => $lakeRow['photo_caption_one'],
'photo' => $lakeRow['photo']
);
}
$json=json_encode( $lakes );
?>
<!doctype html>
<html>
<head>
<title>multiple maps</title>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGMLRwrop1EGkgdzQ9a7zzREq4uw8l63k&callback=initMap"></script>
<script>
var lakes=<?php echo $json;?>;
function initMap() {
for( var n in lakes ){
var obj=lakes[ n ];
var lat=obj.lat;
var lng=obj.lng;
var container=document.getElementById('map_'+n);
var latlng=new google.maps.LatLng(lat,lng);
var map=new google.maps.Map( container,{
zoom:10,
center:latlng
});
var marker = new google.maps.Marker({
position:latlng,
map: map
});
}
}
</script>
</head>
<body>
<?php
foreach( $lakes as $index => $lake ){
echo "
<div class='col-md-4'>
<div class='thumbnail'>
<div class='more'>
<h4>{$lake['caption']}</h4>
</div>
<a href='#' target='_blank'>
<img src='data:image/jpeg;base64," . base64_encode( $lake['photo'] ) . "' height='300'/>
<br/>
<div class='caption'>
<p>{$lake['caption']}</p>
</div>
<div class='more'>
<div id='map_{$index}' style='height:253px'></div>
</div>
</a>
</div>
</div>";
}
?>
</body>
</html>
多重地图
瓦尔湖=；
函数initMap（）{
for（湖泊中的var n）{
var obj=湖泊[n]；
var lat=对象lat；
var lng=obj.lng；
var container=document.getElementById（'map_uu'+n）；
var latlng=新的google.maps.latlng（lat，lng）；
var map=new google.maps.map（容器{
缩放：10，
中心：拉丁
});
var marker=new google.maps.marker({
位置：latlng，
地图：地图
});
}
}
多重地图
瓦尔湖=；
函数initMap（）{
for（湖泊中的var n）{
var obj=湖泊[n]；
var lat=对象lat；
var lng=obj.lng；
var container=document.getElementById（'map_uu'+n）；
var latlng=新的google.maps.latlng（lat，lng）；
var map=new google.maps.map（容器{
缩放：10，
中心：拉丁
});
var marker=new google.maps.marker({
位置：latlng，
标题：obj.caption，
地图：地图
});
}
}
您不能重复使用id='map'
~它应该有一个唯一的id，其他id也一样IDs@RamRaider，是的，如果坐标不止一个，我需要地图自身复制，使用相同的id。因为我可以在texfield上填充值，并且当值超过一个相关问题：相关问题：编辑：有一个错误！我在javascript中使用了json
，而不是lakes
。代码不起作用，屏幕上没有显示任何内容。你能显示你正在使用的所有代码吗？因为我在这里测试过，它工作正常。我面临以下javascript错误：uncaught异常：InvalidValueError:initMap不是函数