Javascript 保存的标记未显示在我的地图上

我无法将保存的标记显示在地图上。在浏览器中打开时，我的XML文件显示正确（尽管我在顶部收到一条消息，说“此XML文件似乎没有任何与之关联的样式信息。文档树如下所示。”）

以下是我的xml进程文件的代码：

<?php 
require_once'db_connect.php';

function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&#39;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr); 
return $xmlStr; 
} 

// Opens a connection to a MySQL server
$connection=mysql_connect ($db_host, $db_username, $db_pass);
if (!$connection) {
  die('Not connected : ' . mysql_error());
}

// Set the active MySQL database
$db_selected = mysql_select_db($db_name, $connection);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysql_error());
}

// Select all the rows in the markers table
$query = "SELECT * FROM divesites_tbl WHERE 1";
$result = mysql_query($query);
if (!$result) {
  die('Invalid query: ' . mysql_error());
}

header("Content-type: text/xml");

// Start XML file, echo parent node
echo '<markers>';

// Iterate through the rows, printing XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'site_name="' . parseToXML($row['site_name']) . '" ';
  echo 'site_country="' . parseToXML($row['site_country']) . '" ';
  echo 'site_lat="' . $row['site_lat'] . '" ';
  echo 'site_lng="' . $row['site_lng'] . '" ';
  echo 'site_dive_type="' . $row['site_dive_type'] . '" ';
  echo '/>';
}

// End XML file
echo '</markers>';
?>

以及我的地图页面的javascript和相关HTML：

<script>
   //<![CDATA[
  var styles = [{
      stylers: [{
          hue: "#00ffe6"
      }, {
          saturation: -20
      }]
  }, {
      featureType: 'water',
      elementType: 'geometry.fill',
      stylers: [{
          color: '#010159'
      }]
  }, {
      featureType: "water",
      elementType: 'labels',
      stylers: [{
          color: '#ffffff'
      }, {
          strokeColor: '#000000'
      }]
  }, {
      featureType: "water",
      elementType: 'labels.text.stroke',
      stylers: [{
          visibility: 'off'
      }]
  }, {
      featureType: 'landscape',
      elementType: 'all',
      stylers: [{
          color: '#0061a3'
      }]
  }, {
      featureType: "road",
      stylers: [{
          visibility: "off"
      }]
  }, {
      featureType: "poi",
      stylers: [{
          visibility: "off"
      }]
  }, {
      featureType: "transit",
      stylers: [{
          visibility: "off"
      }]
  }, {
      featureType: "administrative",
      stylers: [{
          visibility: "off"
      }]
  }, {
      featureType: "administrative",
      elementType: 'labels',
      stylers: [{
          visibility: "on"
      }, {
          color: "#c9c9c9"
      }]
  }, {
      featureType: "administrative",
      elementType: 'labels.text.stroke',
      stylers: [{
          visibility: 'off'
      }]
  }];

  var map;
  var marker;
   //var infowindow;


  function initialize() {
      var latlng = new google.maps.LatLng(31.267694, 17.341919);

      var mapOptions = {
          zoom: 3,
          center: latlng,
          minZoom: 3,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      };

      var map = new google.maps.Map(document.getElementById('google_map_div'), mapOptions);
      map.setOptions({
          styles: styles
      });

  } //

  var infoWindow = new google.maps.InfoWindow;

   //var customIcons = {
   //Wreck Dive: {
   //icon: 'images/marker.png'
   //}
   //};

  function load() {

      // Change this depending on the name of your PHP file
      downloadUrl("xml_output.php", function (data) {
          var xml = data.responseXML;
          var markers = xml.documentElement.getElementsByTagName("marker");

          for (var i = 0; i < markers.length; i++) {

              var site_name = markers[i].getAttribute("site_name");
              var site_country = markers[i].getAttribute("site_country");
              var site_dive_type = markers[i].getAttribute("site_dive_type");

              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("site_lat")),
                  parseFloat(markers[i].getAttribute("site_lng")));

              var html = "<b>" + site_name + "</b><br/>" + site_country;

              //var icon = customIcons[site_dive_type] || {};

              var marker = new google.maps.Marker({
                  map: map,
                  position: point
              });

              bindInfoWindow(marker, map, infoWindow, html);
          }

      });

  }


  function bindInfoWindow(marker, map, infoWindow, 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.send(null);
  }

  function doNothing() {}

  google.maps.event.addDomListener(window, 'load', initialize);
   //]]>
  </script>
  <body onload="load()">

//

所以我设法解决了JavaScript范围/结构中的问题。通过将所有内容放在initialize函数中，并重新编写获取标记图像路径的代码，我解决了这个问题

下面是我从数据库中获取标记并用PHP显示XML输出的工作代码结构。注意onload=“initialize（）”位于HTML的body标记上

创建新标记的代码也在这里

var map;
          var marker;
          var infowindow;

          function initialize() {
            var latlng = new google.maps.LatLng(31.267694, 17.341919);

            var mapOptions = {
              zoom: 3,
              center: latlng,
              minZoom:3,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('google_map_div'), mapOptions);
            map.setOptions({styles: styles});


            google.maps.event.addListener(map, "click", function(event) {

            marker = new google.maps.Marker({
            position: event.latLng,
            map: map,
            });

            // click to create a new marker
            marker_position = marker.getPosition();
            marker_position_lat = marker.getPosition().lat();
            marker_position_lng = marker.getPosition().lng();

            var html = "this is the html to be placed in the infowindow";

            infowindow = new google.maps.InfoWindow({
             content: html
            });

            google.maps.event.addListener(marker, "click", function() {
                    infowindow.open(map, marker);
                  });
            }); //click to add site


            // display markers

            var InfoWindow = new google.maps.InfoWindow;

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


            function bindInfoWindow(marker, map, infoWindow, 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.send(null);

            }

            function doNothing() {}

}
</script>
<body onload='initialize()'>

var映射；
var标记；
var信息窗口；
函数初始化（）{
var latlng=新的google.maps.latlng（31.267694,17.341919）；
变量映射选项={
缩放：3，
中心：拉特林，
minZoom:3，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（'google\u map\u div'），mapOptions）；
setOptions（{styles:styles}）；
google.maps.event.addListener（映射，“单击”，函数（事件）{
marker=新的google.maps.marker({
位置：event.latLng，
地图：地图，
});
//单击以创建新标记
marker_position=marker.getPosition（）；
marker_position_lat=marker.getPosition（）.lat（）；
marker_position_lng=marker.getPosition（）.lng（）；
var html=“这是要放置在信息窗口中的html”；
infowindow=新建google.maps.infowindow({
内容：html
});
google.maps.event.addListener（标记“单击”，函数（）{
信息窗口。打开（地图、标记）；
});
})；//单击以添加站点
//显示标记
var InfoWindow=new google.maps.InfoWindow；
下载URL（“xml_output.php”，函数（数据）{
var xml=data.responseXML；
var markers=xml.documentElement.getElementsByTagName（“标记”）；
对于（var i=0；i“+站点所在国家；
var markericon='images/icon.png'；
var marker=new google.maps.marker({
地图：地图，
位置:点,，
图标：markericon
});
bindInfoWindow（标记、地图、InfoWindow、html）；
}
});
函数bindInfoWindow（标记、地图、infoWindow、html）{
google.maps.event.addListener（标记'click'，函数（）{
setContent（html）；
信息窗口。打开（地图、标记）；
});
}
函数下载url（url，回调）{
var请求=window.ActiveXObject？
新的ActiveXObject（'Microsoft.XMLHTTP'）：
新的XMLHttpRequest；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
request.onreadystatechange=doNothing；
回调（请求、请求、状态）；
}
};
打开（'GET'，url，true）；
请求发送（空）；
}
函数doNothing（）{}
}

有javascript错误吗？markers.length的值是多少？纬度和经度值是否是您期望的值？map变量不是全局变量，在此代码中的某个位置不会调用load（）-函数。很抱歉，我在HTML中调用了load函数，并且markers.length是动态的，将是数组中的项目数。map变量不是全局变量？我需要把它放在哪里让它成为全局？考虑一下DrMolle对你的代码> MAP<代码>变量的评论。确保它与代码的其余部分位于同一脚本中。我在你的代码中看不到它。谢谢，因为我对javascript还不熟悉，请告诉我。所以我把函数load（）、bindInfoWindow（）和downloadUrl放在函数initialize（）中，所以现在我只得到了一个错误：load函数没有定义，我想我的作用域有问题了？