![](/img/trans.png)
[英]Displaying markers on google map from mysql database using php/javascript
[英]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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.