2012-03-10 137 views
0

我正在建立一个应用程序,有一个人名的数据库,有关他们的信息和他们的当前位置。 我设法使用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++; 
} 
?> 

回答

0

这将是更好的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()

+0

对不起,我不是很熟悉javascript。你能给我一个代码示例吗? – arielschon12 2012-03-10 14:16:54

+0

工作,但如果你要尝试这个与大表和没有Ajax,你会得到一个非常缓慢的网站.. – maartencls 2012-03-10 14:19:50

+0

这应该工作。但我认真推荐使用AJAX和PDO而不是'mysql_query'的东西。 – maartencls 2012-03-10 14:28:48

0

当我写我用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/

+0

对不起,我只是没有得到你在说什么。我只是想循环一些JavaScript代码,直到我做了我的数据库中的每一块数据。 – arielschon12 2012-03-10 14:12:48