0

我正在通过 Google https://developers.google.com/maps/articles/phpsqlajax_v3完成本教程，以将其用于我自己的 Web 应用程序，但遇到了一些问题。

首先，我创建了一个访问 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：输出 - 为保护隐私，删除了经纬度，但输出了正确的数据。

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

1 回答 1

1

确保路径images/markericon.png正确。因为如果路径错误，则不会显示任何标记。

于 2012-09-24T20:57:48.420 回答