Question

我在Google地图中显示我的XML文件时遇到问题

我的概念：MySQL - ＆gt; XML - ＆gt;显示到GMaps

这是我的代码：

的index.php

<!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>ODP Tracking</title>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <script type="text/javascript">

    var customIcons = {
      FTTH: {     
        icon:"/images/ico_tag.png"
      },
      MSAN: {     
        icon:"/images/ico_tag_ms.png"
      },
      DSLAM: {     
        icon:"/images/ico_tag_ds.png"
      },
      bar: {    
        icon:'http://labs.google.com/ridefinder/images/mm_20_red.png'
      }
    };

    function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(load);
    } else { 
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
    }

function updateMarkerPosition(latLng) {
  document.getElementById('latitude').value = [latLng.lat()]
    document.getElementById('longitude').value = [latLng.lng()]
}
function load(position) {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new    google.maps.LatLng(position.coords.latitude,position.coords.longitude),
        zoom: 17,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

var latLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var url = "phpsqlajax_genxml.php";

var marker2 = new google.maps.Marker({
    position : latLng,
    title : 'Lokasi',
    map : map,
    draggable : false
  });

      // Change this depending on the name of your PHP file
      downloadUrl(url, function(data) {
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var kap = markers[i].getAttribute("kap");
          var avai = markers[i].getAttribute("avai");
          var type = markers[i].getAttribute("type");
          var note = markers[i].getAttribute("ket");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lang")));
          var html = "<b>" + name + "</b> <br/>ALPRO : " + type + "<br/>KAP : " + kap + "<br/>AVAI : " + avai + "<br/>KETERANGAN : " + ket ;
          var icon = customIcons[type] || {};

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

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

        }
      });

        updateMarkerPosition(latLng);
        google.maps.event.addListener(marker2, 'drag', function() {
        updateMarkerPosition(marker2.getPosition());
  });


    }


    function bindInfoWindow(marker, marker2, map, infoWindow, html) {
        google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent(html);
        infoWindow.open(map, marker, marker2);
      });
    }

    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="getLocation()">
 <style>
html, body, #map {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map {
    position: relative;
}
</style>
    <div id="map"></div>
  </body>

</html>

这是我的XML解析代码

phpsqlajax_genxml.php

<?php
require("phpsqlajax_dbinfo.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);
$xmlStr=str_replace("-",'&#45;',$xmlStr);
$xmlStr=str_replace("/",'&#47;',$xmlStr);
return $xmlStr;
}

// Create connection
$conn = new mysqli('localhost', $username, $password, $database);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);}

// Select all the rows in the markers table
$sql = "SELECT * FROM koordinat_odp";

$result = $conn->query($sql);
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 = $result->fetch_assoc()){
  // ADD TO XML DOCUMENT NODE
  echo '<marker ';
  echo 'name="' . parseToXML($row['nama_dp']) . '" ';
  echo 'kap="' . $row['kap'] . '" ';
  echo 'avai="' . $row['avai'] . '" ';
  echo 'lat="' . $row['lat'] . '" ';
  echo 'lang="' . $row['lang'] . '" ';
  echo 'type="' . $row['jenis_alpro'] . '" ';
  echo 'ket="' . $row['note'] . '" ';
  echo '/>';
}

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

?>

我的问题：它没有在地图上显示标记，我自己在浏览器中生成xml文件，它可以工作，但没有在gmaps中显示

提前感谢您的帮助。

Answer 1

我认为您的答案可以找到here。

function parseXML(xml){
var bounds = new google.maps.LatLngBounds();
 $(xml).find("marker").each(function(){
        //Read the name, address, latitude and longitude for each Marker
        var name = $(this).find('name').text();
        var kap = $(this).find('kap').text();
        var avai = $(this).find('avai').text();
        var note = $(this).find('ket').text();
        var type = $(this).find('type').text();
        var lat = $(this).find('lat').text();
        var lng = $(this).find('lng').text();
        var markerCoords = new google.maps.LatLng(parseFloat(lat), 
                                                  parseFloat(lng));
        bounds.extend(markerCoords);
        var marker = new google.maps.Marker({position: markerCoords, map:map});
    });
    map.fitBounds(bounds);
}

如何从Google地图中的XML文件加载标记

1 个答案: