2011-05-11 22 views
1

我試圖使用Google Maps V3 API在Google地圖上創建標記。我在mySQL數據庫中有標記的座標,並且當前位於我的.php文件中的PHP數組中。現在我該如何使用foreach()循環(或其他合適的方法)遍歷我的PHP數組中的元素,並在循環的每次迭代中創建一個新的Google Map標記?JavaScript中使用PHP的foreach循環(Googlel Maps API)的MySQL數據

PS:我的PHP很體面,但不是我的javscript知識。現在我下面就創建標記的教程是http://www.svennerberg.com/2009/07/google-maps-api-3-markers/

代碼

我用笨的框架,因此控制器+模型文件已經獲取必要的數據(名稱,經度,緯度。 ..)到數組$ map中。我可以循環使用通常的方法在陣列:

foreach($map as $row) { 
    $lng = $row[lng] // this is not necessary, its just to show what is in the array 
    $lat = $row[lat] 
    // now how do I use this loop to create new marker code in javascript? 
} 

用於創建具有每foreach循環迭代中創建一次一個谷歌地圖標記的JS代碼是這樣的:

var map = new google.maps.Map(document.getElementById('map'), { 
zoom: 7, 
    center: new google.maps.LatLng($lng, $lat), // how do i pass the PHP variables into the JS code? 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

所以我的問題是我如何通過PHP數組中的PHP變量來創建上面的JS代碼,每個foreach()循環迭代一次?

+0

顯示一些代碼,你有這麼遠,所以我們可以幫你 – Ibu

+0

增加了一些代碼到原來的職位... – Nyxynyxx

回答

2

首先,您處於正確的軌道上,但您只需瞭解服務器端和客戶端語言的單獨概念以及它們如何進行交互。 PHP不會將變量「傳遞」給JavaScript,但它所做的就是生成所需的任何HTML文檔。

那個HTML文檔就可以包含JavaScript,它將通過瀏覽器執行,因爲頁面是呈現。所以,想你的PHP作爲使的JavaScript代碼:

的PHP在HTML頁面輸出的JavaScript代碼示例:

<script type="text/javascript"> 
    var testval = "<?php echo "Hello, " . (5 + 3) . "!" ?>"; // "Hello, 8! 
</script> 

現在,我擡頭一看教程,實際上在代碼您的問題不是正確的代碼—而是創建地圖的代碼,並且您示例中的緯度/長度參數是針對中心的,而不是標記。

所以,在你的PHP頁面,要做到以下幾點:

  1. 某處,你需要創建地圖:var map = new google.maps.Map...(如在教程中所示)
  2. 接下來,拿到$map陣列數組項包含'lng''lat'鍵。 (注:你應該總是用引號包裹數組的鍵名)
  3. 內打開腳本標籤使用<?php創建一個PHP代碼塊,並創建foreach循環。對於每個項目,創建創建標記所需的JavaScript代碼。 foreach循環的

例子:

<script type="text/javascript"> 
<?php 
foreach($map as $row) { 
    $lng = $row['lng']; 
    $lat = $row['lat']; 
    ?> 
    // Creating a marker and positioning it on the map 
    new google.maps.Marker({ 
     position: new google.maps.LatLng(<?php echo $lat ?>, <?php echo $lng; ?>), 
     map: map 
    }); 
    <?php 
} 
?> 
</script> 
0

這裏通常採取的辦法是編碼PHP數據作爲JSON,然後呼應它變成一個JavaScript變量:

<script type="text/javascript"> 
var myData = <?php echo json_encode($map); ?>; 
</script> 

將輸出一個Javascript的文字,你可以在你的客戶端腳本使用。

0

你會想這個循環:

var marker; 

<?php foreach($map as $row){ ?> 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(<?php echo $row['lat'].','.$row['long']; ?>), 
    map: map 
}); 
<?php } ?> 

只要你包括其它代碼(這是建立在地圖最初)之後。

-1

正如@nrabinowitz說,你可以在一個Ajax請求的代碼添加

如果在同一個頁面加載你的JavaScript,您可以將其添加到同一頁面中。

<?php $c = 0;// counter ?> 
<?php foreach ($map as $row):?> 
var marker<?php echo $c?> = new google.maps.Marker({ 
    position: new google.maps.LatLng(<?php echo $row['lat'].','.$row['long']; ?>),  map: map }); 
<?php $c++; ?> 
<?php endforeach;?> 

這樣你不會覆蓋變量

0
example to loop in JavaScript is as follows- 

<script type="text/javascript"> 
"<?php echo $arr=array('1'=>'1','2'=>'2','3'=>'3','4'=>'4','5'=>'5'); 
foreach($arr as $k => $v){ ?>" 
var x='<?php echo $v; ?>'; 
alert(x); 
"<?php } ?>" 
</script> 

Replace $arr with your array and apply google map code in the script.