谷歌地圖 - 從SQL數據庫中放置標記（XML，PHP）

我正在通過谷歌https://developers.google.com/maps/articles/phpsqlajax_v3的這個教程來使用它來爲我自己的web應用程序，我遇到了一些問題。谷歌地圖 - 從SQL數據庫中放置標記（XML，PHP）

首先，我創建了一個訪問PHP文件以寫入我的SQL數據庫的表單，它表明一切都運行平穩。它正確連接並按預期填寫表格。

其次，使用上面的教程，我設法創建了一個生成正確XML的PHP文件。

第三，我創建了一個空白表單，其中包含一個按鈕，該按鈕在單擊時運行mapload（）函數..應該執行以下操作：初始化映射，運行xml文件並繪製點。

按鈕被點擊時，地圖初始化正確，但由於某種原因它沒有繪製點。所以，我收集，我的JavaScript在某處有一個錯誤。任何人都可以診斷並解決問題嗎？這裏的源：

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>My Application</title> 
<link href="styles.css" rel="stylesheet" type="text/css"> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="http://maps.googleapis.com/maps/api/js?key=my- key&sensor=false" 
      type="text/javascript"></script> 


<script> 

$(document).ready(function(){ 
    $("#map").click(function(){ 
    $("#mapcontainer").slideToggle("slow"); 
    }); 
}); 

//<![CDATA[ 

function mapload() { 

var mapstyle = [{featureType: "administrative",stylers: [{ visibility: "off" }]}, 
    {featureType: "poi",stylers: [{ visibility: "off" }]}, 
    {featureType: "transit",stylers: [{ visibility: "off" }]}, 
    {featureType: "water",elementType: "geometry",stylers: [{ visibility: "simplified" },{ hue: "#1c252f" },{ saturation: "-55" },{lightness: "0" }]}, 
    {featureType: "water",elementType: "labels",stylers: [{ visibility: "off" }]}, 
    {featureType: "poi.park",elementType: "geometry",stylers: [{ visibility: "simplified" },{ hue: "1c2f22" },{ saturation: "-55" },{ lightness: "15" }]}, 
    {featureType: "poi.park",elementType: "labels",stylers: [{ visibility: "off" }]}, 
    {featureType: "road",elementType: "geometry",stylers: [{ visibility: "simplified" },{ saturation: 42 },{ hue: "#ffa200" },{ lightness: 33 }]}, 
    {featureType: "road",elementType: "labels",stylers: [{ hue: "#0019ff" },{ lightness: 51 },{ saturation: -88 }]} 
] 

var map = new google.maps.Map(document.getElementById("mapcontainer"), { 
    center: new google.maps.LatLng(20,0), 
    zoom: 3, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControl: false, 
    navigationControl: false, 
    streetViewControl: false, 
    styles: mapstyle 
}); 

var InfoWindow = new google.maps.InfoWindow; 

downloadUrl ("mapexpand.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     var id = markers[i] .getAttribute("id"); 
     var name = markers[i] .getAttribute("marker"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i] .getAttribute("Lat")), 
      parseFloat(markers[i] .getAttribute("Lng"))); 
     var html = "<b>" + name + "</b> </br/>" + address; 
     var markericon ='images/markericon.png'; 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      icon: markericon 
     }); 
    bindInfoWindow(marker, map, InfoWindow, html); 
    } 
}); 
} 

function bindInfoWindow(marker, map, wishWindow, html){ 
    google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl (url, callback) { 
    var request = window.ActiveXObject ? 
    new ActiveXObject ('Microsoft.XMLHTTP') : 
    new XMLHttpRequest; 

    request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
     } 
    }; 

    request.open('GET', url, true); 
    request.sent(null); 

} 

function doNothing() {} 

//]]> 

</script> 

</head> 

<body onload='getLocation()'> 



<div id="graphic"></div> 
<div id="textbox"></div> 


    <form action="store.php" method="post"> 

      <textarea cols="37" rows="7" autofocus maxlength="255" name="text"></textarea> 
      <input type="hidden" id="lat" name="latitude"> 
      <input type="hidden" id="long" name="longitude"> 
      <input type="submit" id ="sub" name="submit"> 

    </form> 

<div id="mapcontainer"> 


</div> 

    <form> 

     <input type="button" id="map" class="mapexpand" onClick="mapload()"></input> 

    </form> 

    <script> 

    var lat=document.getElementById("lat"); 
    var long=document.getElementById("long"); 

    function getLocation() { 

     if (navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(showPosition); 
     } 
    } 

    function showPosition(position) { 
     lat.value=+position.coords.latitude; 
     long.value=+position.coords.longitude; 
    } 


</script> 

</body> 
</html>

XML：輸出 - lat和長去除的隱私，但輸出正確的數據。

<markers> 
<marker marker="sweettttt" latitude="(lat removed)" longitude="(lng removed)"/> 
</markers>

來源

2012-09-24 stokexx

鏈接如何？ –

該網站在localhost，我沒有任何投資的時間。 – stokexx

嘗試使用免費網站。調試一個活的網站要容易得多。特別是從mapexpand.php返回 –

確保到images/markericon.png的路徑是正確的。由於沒有標記會顯示路徑是否錯誤。

來源

2012-09-24 20:57:48

我的xml變量正在返回（null）做了一些調整，現在工作正常。 – stokexx

谷歌地圖 - 從SQL數據庫中放置標記（XML，PHP）

回答

相關問題