因此，在得知如何从数据库中检索x和y坐标并将其显示在谷歌地图中后，我开始工作。因此，要与我的mySQL数据库建立连接，请这样写：
<?php
$server = '132.3.2.1.';
$username = 'you';
$password = 'notyou';
$database = 'youapp';
$dsn = "mysql:host=$server;dbname=$database";
(This is all made up)
为了从我的数据库中检索坐标并将其放入JSON字符串中，我写了这样的代码：
<?php
include 'config.php';
try {
$db = new PDO($dsn, $username, $password);
$db->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$sth = $db->query("SELECT * FROM youapp");
$youapp = $sth->fetchAll();
echo json_encode( $youapp );
} catch (Exception $e) {
echo $e->getMessage();
}
我确信我到目前为止编码的内容是正确的。但我不确定谷歌地图的部分。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width; height=device-height; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Beer Me</title>
<link rel="stylesheet" href="/master.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
var map;
function init() {
var mapOptions = {
zoom: 13,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
makeRequest('get_locations.php', function(data) {
var data = JSON.parse(data.responseText);
for (var i = 0; i < data.length; i++) {
displayLocation(data[i]);
}
});
}
function makeRequest(url, callback) {
var request;
if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
// IE7+, Firefox, Chrome, Opera, Safari
} else {
request = new ActiveXObject("Microsoft.XMLHTTP");
// IE6, IE5
}
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback(request);
}
}
request.open("GET", url, true);
request.send();
}
</script>
</head>
<body onload="init();">
<div id="map_canvas" style="width:400px; height: 400px;"></div>
</body>
</html>
因此函数makerequest是一个标准的Ajax调用。但我不知道如何在谷歌地图中显示结果。如果有人能查看我的代码，与我的数据库建立连接，并就如何在谷歌地图中显示makerequest的结果提供一些建议或其他内容，我们将不胜感激。
除了缺少函数displayLocation之外，一切看起来都很好。只需在那里添加这个：
function displayLocation(item) {
var marker = new google.maps.Marker({
// might need to change item.lat/item.lng
// to match the column name in your DB
position: new google.maps.LatLng(item.lat, item.lng),
map: map
});
}
试试这个。
function displayLocation(item) {
var marker = new google.maps.Marker({
// might need to change item.lat/item.lng
// to match the column name in your DB
position: new google.maps.LatLng(item.lat, item.lng),
map: map
});
}