Question

我希望我能以正确的方式提出这个问题，并提前感谢任何建议！我一直试图在我自己的网站上使用本教程：

https://developers.google.com/maps/documentation/javascript/mysql-to-maps

在尝试了许多版本的我自己的代码失败之后，我决定继续一步一步地完成教程 - 甚至创建一个与教程完全相同的新MYSQL数据库......

在教程示例中，他们使用实际的.xml文件从以下位置读取数据：

// Change this depending on the name of your PHP or XML file
downloadUrl('https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml', function(data) {

但是，就像代码“PHP File”上面的注释行一样 - 意味着您可以使用PHP文件而不是.xml文件，然后根据数据库查询动态生成XML代码。

他们展示了从数据库中获取XML代码的3种不同方法，我尝试了所有3种方法，但结果相同。

当我运行index.html页面时，我只会显示没有任何标记的地图
如果我只运行生成XML代码的php文件，浏览器中不会显示任何内容（只是一个空白的白页） - 但是 - 当我查看页面源时，它会完美地显示XML ！
如果我从我的PHP文件中获取生成的XML并将其复制/粘贴到.xml文件中，然后在downloadurl函数中调用该.xml文件，那么一切正常！

所以，这就是我的问题。

我遗漏了哪些内容，允许我使用PHP文件动态生成XML，而不是在我的目录中需要单独的XML文件。

我使用的代码与教程页面中的代码完全相同。

提前致谢!!

编辑 - 这是2个php页面。 convert-xml.php用于从MYSQL db生成信息。它是从数据库中获取信息，因为当我查看源代码时它会显示xml树。它;不是将其写入浏览器或使用downloadurl函数在地图上显示标记。

<!DOCTYPE html >
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <title>Using MySQL and PHP with Google Maps</title>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>
    <div id="map"></div>

    <script>
      var customLabel = {
        restaurant: {
          label: 'R'
        },
        bar: {
          label: 'B'
        }
      };

        function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: new google.maps.LatLng(-33.863276, 151.207977),
          zoom: 12
        });
        var infoWindow = new google.maps.InfoWindow;

          // Change this depending on the name of your PHP or XML file
          downloadUrl('convert-xml.php', function(data) {
            var xml = data.responseXML;
            var markers = xml.documentElement.getElementsByTagName('marker');
            Array.prototype.forEach.call(markers, function(markerElem) {
              var id = markerElem.getAttribute('id');
              var name = markerElem.getAttribute('name');
              var address = markerElem.getAttribute('address');
              var type = markerElem.getAttribute('type');
              var point = new google.maps.LatLng(
                  parseFloat(markerElem.getAttribute('lat')),
                  parseFloat(markerElem.getAttribute('lng')));

              var infowincontent = document.createElement('div');
              var strong = document.createElement('strong');
              strong.textContent = name
              infowincontent.appendChild(strong);
              infowincontent.appendChild(document.createElement('br'));

              var text = document.createElement('text');
              text.textContent = address
              infowincontent.appendChild(text);
              var icon = customLabel[type] || {};
              var marker = new google.maps.Marker({
                map: map,
                position: point,
                label: icon.label
              });
              marker.addListener('click', function() {
                infoWindow.setContent(infowincontent);
                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>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_IS_HERE&callback=initMap">
    </script>
  </body>
</html>

转换-xml.php

<?php require 'conn-info.php';?>

<?php 
// Start XML file, create parent node 
$dom = new DOMDocument("1.0"); 
$dom->preserveWhiteSpace = false
$dom->formatOutput = true; 
$node = $dom->createElement("markers"); 
$parnode = $dom->appendChild($node);

// connect to db 
$membermap_conn = mysql_connect($membermap_server, $membermap_user, $membermap_password, $membermap_database); 
if ($membermap_conn->connect_errno) {
    echo "Failed to connect to MySQL: (" . $membermap_conn->connect_errno . ") " . $membermap_conn->connect_error; }

// select the db 
$db_selected = mysql_select_db($membermap_database, $membermap_conn); 
if (!$db_selected) {   
die ('Can\'t use db : ' . mysql_error()); 
}

// Pull the zip / user information out of the database. 
$query = "SELECT * FROM markers WHERE 1";


$result = mysql_query($query); 
if (!$result) {   
die('Invalid query: ' . mysql_error()); 
}

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

// Iterate through the rows, adding XML nodes for each 
while ($row = @mysql_fetch_assoc($result)){   
// Add to XML document node   
$node = $dom->createElement("marker");   
$newnode = $parnode->appendChild($node);   
$newnode->setAttribute("id",$row['id']);   
$newnode->setAttribute("name",$row['name']);   
$newnode->setAttribute("address", $row['address']);   
$newnode->setAttribute("lat", $row['lat']);   
$newnode->setAttribute("lng", $row['lng']);   
$newnode->setAttribute("type", $row['type']); }

echo $dom->saveXML();

?>

使用从PHP文件生成的XML与物理.xml文件

0 个答案: