PHP/Javascript -在while循环中从mysql数据库显示谷歌地图上的标记
PHP/Javascript - Displaying markers on google map from mysql database in a while loop
我有一个while循环显示数据从我的数据库,如名称地址等。我想谷歌地图循环通过从数据库的地址。目前,谷歌地图只显示一次,我不认为它循环相同的地址,是在地图旁边的列表。
<script src="https://maps.google.com/maps/api/js?key=[KEY-HERE]&signed_in=true&callback=initMap"async defer></script>
while ($row = mysql_fetch_assoc($query)) {
echo "<div class='result-container'>
<div class='result-wrap'>
<div class='leftbox'>
<div class='titlebox'>
<h2>" . $row['company_name'] . "</h2>
</div>
<div class='box'>
" . ((empty($row['address_1'])) ? '' : "<strong> Address: </strong>" . $row['address_1']) . ((empty($row['address_2'])) ? '' : ", " . $row['address_2']) . ((empty($row['town'])) ? '' : ", " . $row['town']) . ((empty($row['county'])) ? '' : ", " . $row['county']) . ((empty($row['postcode'])) ? '' : ", " . $row['postcode']) . "
</div>
<div class='box'>
" . ((empty($row['tel'])) ? '' : "<strong> Telephone: </strong>" . $row['tel']) . ((empty($row['mobile'])) ? '' : "<strong> Mobile: </strong>" . $row['mobile']) . "
</div>
</div>
<div class='rightbox'>
<div class='service-pic'>
<img src='img/buddy.png' class='hvr-bob'>
</div>
<div id='map' style='width: 250px; height: 250px;'></div>
</div>
</div><br/>";
}
<script>
var address = "$row['address_1'], $row['town'], $row['postcode'], UK";
var map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 6
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
map.setCenter(results[0].geometry.location);
}
});
</script>
如果我理解正确的话,您需要在页面上创建该地图的多个实例。
您必须为initMap()
JavaScript函数生成代码,该函数在脚本标记中指定为回调函数。这个函数将创建映射的多个实例,为此,我们可以引入$counter
变量,以确保我们确实有不同的实例。此外,我从脚本标签中删除了一个signed_in参数,因为它最近被弃用了。
代码片段如下:
<script src="https://maps.google.com/maps/api/js?key=[KEY-HERE]&callback=initMap" async defer></script>
<?php
$counter = 0;
$jsInitFunction = "function initMap() { var geocoder = new google.maps.Geocoder(); ";
while ($row = mysql_fetch_assoc($query)) {
echo "<div class='result-container'>
<div class='result-wrap'>
<div class='leftbox'>
<div class='titlebox'>
<h2>" . $row['company_name'] . "</h2>
</div>
<div class='box'>
" . ((empty($row['address_1'])) ? '' : "<strong> Address: </strong>" . $row['address_1']) . ((empty($row['address_2'])) ? '' : ", " . $row['address_2']) . ((empty($row['town'])) ? '' : ", " . $row['town']) . ((empty($row['county'])) ? '' : ", " . $row['county']) . ((empty($row['postcode'])) ? '' : ", " . $row['postcode']) . "
</div>
<div class='box'>
" . ((empty($row['tel'])) ? '' : "<strong> Telephone: </strong>" . $row['tel']) . ((empty($row['mobile'])) ? '' : "<strong> Mobile: </strong>" . $row['mobile']) . "
</div>
</div>
<div class='rightbox'>
<div class='service-pic'>
<img src='img/buddy.png' class='hvr-bob'>
</div>
<div id='map" . $counter . "' style='width: 250px; height: 250px;'></div>
</div>
</div><br/>";
$jsInitFunction .= "var address" . $counter . " = '" . $row['address_1'] . "," . $row['town'] . "," . $row['postcode'] .", UK';
var map" . $counter . " = new google.maps.Map(document.getElementById('map" . $counter . "'), {
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 6
});
geocoder.geocode({
'address': address" . $counter . "
}, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map" . $counter . "
});
map" . $counter . ".setCenter(results[0].geometry.location);
}
});";
$counter++;
}
$jsInitFunction .= "}";
?>
<script>
<?php print $jsInitFunction; ?>
</script>
相关文章:
- 谷歌地图显示灰色方框
- 无法让谷歌地图显示在我的网站上
- 双击谷歌地图显示提示框不起作用
- 谷歌地图显示钦奈(印度)使用javascript
- 当缩放级别为 1 时,谷歌地图显示 kml(内部是图像 URL)不正确
- 谷歌地图显示没有jQuery
- 谷歌地图显示问题
- 谷歌地图显示KML数据
- 谷歌地图显示新请求后的旧方向
- 谷歌地图显示什么,直到我最小化屏幕
- 谷歌地图显示多个地图而不是一个
- 为什么谷歌地图显示灰色,而没有初始化缩放&当使用jQuery按钮更改缩放时,居中,地图上的居中效果非常好
- 谷歌地图显示标题的信息框
- 当mysql提供十进制纬度和经度时,谷歌地图显示错误的地图
- 谷歌地图-显示基于缩放级别的融合表图层
- 如何包括谷歌地图显示的地方,如医院和餐馆在单独的地图在同一页
- 谷歌地图显示未捕获的错误:达到10次$digest()迭代.流产!角的应用
- 谷歌地图显示不同颜色的替代道路
- 不能让谷歌地图显示在wordpress页面上
- 谷歌地图显示最近的数据库标记到我的位置