Google 地图 - 从 SQL 数据库（XML、PHP）放置标记答案

【问题标题】：Google Maps - Placing markers from an SQL database (XML, PHP)Google 地图 - 从 SQL 数据库（XML、PHP）放置标记
【发布时间】：2012-09-16 03:37:50
【问题描述】：

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

首先，我创建了一个访问 PHP 文件以写入我的 SQL 数据库的表单，它表明一切运行顺利。它正确连接并按预期填写表格。

其次，使用上面的教程，我成功地创建了一个 PHP 文件，它可以生成正确的 XML。

第三，我创建了一个带有按钮的空白表单，该按钮在单击时运行 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>

【问题讨论】：

该站点位于本地主机上，我目前没有地方放置它。
尝试使用免费网站。调试实时站点要容易得多。尤其是从 mapexpand.php 中返回
mapexpand.php 创建正确的 xml，类似于我的问题中上面列出的谷歌教程中的内容。我会将 mapexpand.php 的 xml 输出添加到主要问题中
正在将代码加载到我的编辑器但没有函数 getLocation() 找到了！！！
出于某种原因，getLocation() 仅在我将其包含到我的 html 正文中时才有效。但是，位置似乎不是问题。在主问题中添加了一行xml输出

标签： javascript google-maps-api-3 xml-parsing

【解决方案1】：

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

【讨论】：

我的 xml 变量正在返回 (null) 进行了一些调整，现在可以正常工作了。