【问题标题】:I am trying to place markers on a map from an xml file but my map appears without any markers我正在尝试从 xml 文件在地图上放置标记,但我的地图显示时没有任何标记
【发布时间】:2016-07-09 13:44:46
【问题描述】:

这是我保存为 'phpsqlajax.php' 的 xml 代码

<?php
require("db_connect1.php");
function parseToXML($htmlStr) 
{ 
$xmlStr=str_replace('<','&lt;',$htmlStr); 
$xmlStr=str_replace('>','&gt;',$xmlStr); 
$xmlStr=str_replace('"','&quot;',$xmlStr); 
$xmlStr=str_replace("'",'&apos;',$xmlStr); 
$xmlStr=str_replace("&",'&amp;',$xmlStr); 
return $xmlStr; 
} 
// Opens a connection to a mySQL server
$connection=mysqli_connect ($db_hostname, $db_username, $db_password);
if (!$connection) {
  die('Not connected : ' . mysqli_error($connection));
}
// Set the active mySQL database
$db_selected=mysqli_select_db($connection, $db_database);
if (!$db_selected) {
  die ('Can\'t use db : ' . mysqli_error($connection));
}
// Select all the rows in the markers table
$query = "SELECT * FROM markers WHERE 1=1";
$result = mysqli_query($connection, $query);
if (!$result) {
  die('Invalid query: ' . mysqli_error($connection));
}
header("Content-type: text/xml");
// Start XML file, echo parent node
echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysqli_fetch_assoc($result)){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'name="' . parseToXML('&','&amp;', $row['name']) . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lng="' . $row['lng'] . '" ';
  echo 'type="' . $row['type'] . '" ';
  echo '/>';
}
// End XML file
echo '</markers>';
?>         

我正在尝试下载它并将其实现到我的地图上,该地图保存为“mapxml.html”,但是该地图仅显示西雅图的图像,而不是我保存在数据库中的标记。这是mapxml.html代码

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google Maps AJAX + mySQL/PHP Example</title>
        <script src="http://maps.google.com/maps/api/js?sensor=false"
                type="text/javascript"></script>
        <script type="text/javascript">
        //<![CDATA[
        var customIcons = {
          field: {
            icon: 'img/marker.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          },
          Park: {
            icon: 'img/marker.png',
            shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
          }
        };
        function load() {
          var map = new google.maps.Map(document.getElementById("map"), {
            center: new google.maps.LatLng(47.6145, -122.3418),
            zoom: 13,
            mapTypeId: 'roadmap'
          });
          var infoWindow = new google.maps.InfoWindow;
          // Change this depending on the name of your PHP file
          downloadUrl("phpsqlajax_genxml.php", function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName("markers");
            for (var i = 0; i < markers.length; i++) {
              var name = markers[i].getAttribute("name");
              var type = markers[i].getAttribute("type");
              var point = new google.maps.LatLng(
                  parseFloat(markers[i].getAttribute("lat")),
                  parseFloat(markers[i].getAttribute("lng")));
              var html = "<b>" + name + "</b> <br/>" + address;
              var icon = customIcons[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: icon.icon,
                shadow: icon.shadow
              });
              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>
      </head>

      <body onload="load()">
        <div id="map" style="width: 500px; height: 300px"></div>
      </body>
    </html>

有人知道我的标记没有显示的原因吗?

我一直在关注 Google 教程,并且我的 XML 输出正常,但是我似乎无法完成说明 https://developers.google.com/maps/articles/phpsqlajax_v3

如果有人能提供帮助,我将不胜感激!

【问题讨论】:

  • 您是否尝试过使用静态坐标放置标记并忽略 xml 输出进行测试?
  • AJAX 请求返回的 XML 是什么样的?

标签: php mysql xml google-maps google-maps-api-3


【解决方案1】:

47.6145, -122.3418 是西雅图的坐标。如果您想查看 AJAX 请求返回的所有标记,则需要调整地图的边界以适应标记。

这是你的 for 循环的修改版本,包括:

var bounds = new google.maps.LatLngBounds();

for (var i = 0; i < markers.length; i++) {
    var name = markers[i].getAttribute("name");
    var type = markers[i].getAttribute("type");
    var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")),
        parseFloat(markers[i].getAttribute("lng"))
    );

    bounds.extend(point);

    var html = "<b>" + name + "</b> <br/>" + address;
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
    });
    bindInfoWindow(marker, map, infoWindow, html);
}

map.fitBounds(bounds);

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-09-07
    • 2014-01-07
    • 1970-01-01
    • 1970-01-01
    • 2014-09-29
    • 2017-01-09
    • 1970-01-01
    相关资源
    最近更新 更多