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

【问题标题】：Saved markers not displaying on my map保存的标记未显示在我的地图上
【发布时间】：2014-01-13 16:08:37
【问题描述】：

我无法让我保存的标记显示在我的地图上。我的 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 错误？ marker.length 的值是多少？纬度和经度值是否符合您的预期？
map-variable 不是全局变量，并且 load()-function 不会在此代码中的某处被调用。
抱歉，我在的 HTML 中调用了 load 函数，markers.length 是动态的，将是数组中项目的数量。 map 变量不是全局变量？我需要将它放在哪里才能使其全球化？
考虑 DrMolle 对您的 map 变量的评论。确保它与其余代码位于同一脚本中。我在您的代码中没有看到它。
谢谢，由于我是 javascript 新手，请与我联系。所以我将函数 load()、bindInfoWindow() 和 downloadUrl 放在函数 initialize() 中，所以现在我得到错误 load function is not defined，我想我的范围有问题？

标签： javascript php xml google-maps-api-3 markers

【解决方案1】：

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

下面是我的工作代码结构，用于从数据库中获取标记并使用 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()'>

【讨论】：