谷歌地圖標記與JavaScript和PHP

我正在建立一個應用程序，有一個人名的數據庫，有關他們的信息和他們的當前位置。我設法使用Google maps javascript API創建地圖，並標記您當前的位置。然而，我似乎無法使用PHP循環爲我的數據庫中的每個人放置一個帶有信息窗口的標記。這裏是我的代碼：谷歌地圖標記與JavaScript和PHP

lat = position.coords.latitude; 
lon = position.coords.longitude; 

//init map 
myOptions = { 
    center: new google.maps.LatLng(lat, lon), 
    zoom: 15, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

var image = 'http://i43.tinypic.com/v48d1w.png'; 
var loca = new google.maps.LatLng(lat, lon); 
var currnetLocationMarker = new google.maps.Marker({ 
position: loca, 
map: map, 
animation: google.maps.Animation.DROP, 
icon: image 
}); 
var contentString; 
var marklatlng; 
<?php 
require("connect.php"); 
$query = mysql_query("SELECT * FROM gigs"); 
$i = 0; 
while($data = mysql_fetch_array($query)) 
{ 
echo " 
contentString = 'Name: <b>" . $data['name'] . "</b><br> Info: <b>" . $data['desc'] . " </b>'; 
var infowindow" . $i . " = new google.maps.InfoWindow({ 
content: contentString 
}); 
marklatlng = new google.maps.LatLng(" . $data['lat'] . ", " . $data['lng'] . "); 
var marker" . $i . " = new google.maps.Marker({ 
position: markLatlng, 
map: map, 
}); 
google.maps.event.addListener(marker" . $i . ", 'click', function() { 
infowindow" . $i . ".open(map,marker" . $i . "); 
}); 

"; 
$i++; 
} 
?>

來源

2012-03-10 arielschon12

這將是更好的json_encode您的數據，使用JavaScript傳遞給一個變量在JavaScript，然後遍歷它。更好的辦法是使用AJAX請求來獲取數據。

<?php 
function fetchGigs() { 
    $gigs = new Array(); 
    $query = mysql_query("SELECT * FROM gigs"); 
    while($gig = mysql_fetch_array($query)) { 
    $gigs[] = $gig; 
    } 
    return $gigs; 
}

而在你的javascript：

<script> 
// your other code... 
var gigs = <?php echo json_encode(fetchGigs()); ?> 

var createMarkerAt = function(lat, lng) { 
    var latLng, marker; 
    latLng = new google.maps.LatLng(lat, lng); 
    marker = new google.maps.Marker({ 
    position: latLng, 
    map: map, 
    }); 
    return marker; 
} 

var createMarkerForGig = function (gig) { 
    var marker, info; 
    marker = createMarkerAt(gig.lat, gig.lng); 
    info = new google.maps.InfoWindow({ 
    content: 'Name: <b>"' + gig.name + '"</b><br>Info: <b>"' + gig.desc + '"</b>' 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    info.open(map, marker); 
    }); 
    return marker; 
} 

// Add markers for all the gigs. 
var len = gigs.length; 
for (var i = 0; i<len; i++) { 
    createMarkerForGig(gigs[i]); 
} 
</script>

Documentation for php_encode()

來源

2012-03-10 14:06:32 maartencls

對不起，我不是很熟悉javascript。你能給我一個代碼示例嗎？ – arielschon12 2012-03-10 14:16:54

工作，但如果你要嘗試這個與大表和沒有Ajax，你會得到一個非常緩慢的網站.. – maartencls 2012-03-10 14:19:50

這應該工作。但我認真推薦使用AJAX和PDO而不是'mysql_query'的東西。 – maartencls 2012-03-10 14:28:48

當我寫我用PHP寫代表我的數據JavaScript數組的字符串類似的應用程序，然後使用直JS一旦我建立字符串的API。但是，由於我發現編寫一個PHP支持的API來返回數據庫的JSON對象是多麼容易，我只是使用jQuery來查詢我的自制API以獲取json數據，然後使用它。使用SLIM確實非常容易。這裏是一個鏈接http://codingthis.com/programming/php/using-the-slim-php-framework-for-developing-rest-apis/

來源

2012-03-10 14:05:25 Jake

對不起，我只是沒有得到你在說什麼。我只是想循環一些JavaScript代碼，直到我做了我的數據庫中的每一塊數據。 – arielschon12 2012-03-10 14:12:48

谷歌地圖標記與JavaScript和PHP

回答

相關問題