在谷歌地圖中顯示來自db的座標

因此，在讓我自己知道如何從我的數據庫中檢索x和y座標並在Google Maps中顯示它們之後，我去工作了。因此，爲了使我的MySQL數據庫的連接是寫了這個：在谷歌地圖中顯示來自db的座標

<?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(); 
    }

我敢肯定，我到目前爲止編碼是正確的。但我不確定在Google地圖部分。

<!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調用。但我不確定如何在Google地圖中顯示結果。如果任何人都可以查看我的代碼，以便與我的數據庫建立連接，並提供一些建議或關於如何在Google地圖中顯示makerequest的結果，我們將不勝感激。

來源

2012-09-05 user1521000

你的數據庫有哪些類型的信息？ –

我的數據庫存儲雙倍的x和y座標。 – user1521000

除了缺少功能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 
    }); 
}

來源

2012-09-06 01:03:39 Rob

是的，我把柱子命名爲x和y，所以我必須改變它。謝謝。 – user1521000

請嘗試此操作。

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 
    }); 
}

來源

2017-12-06 09:47:05

在谷歌地圖中顯示來自db的座標

回答

相關問題