2015-11-14 124 views
-1

我有显示从谷歌地图XML文件如何加载标记

我的概念在我的谷歌地图中的XML文件的一个问题:MySQL的 - > XML - >显示为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

预先感谢您为您的所有帮助。

+0

你做XML和JSON没有任何理由吗? – Haring10

+0

[通过Google地图使用PHP/MySQL](https://developers.google.com/maps/articles/phpsqlajax_v3) – geocodezip

+1

您能提供一个XML输出样本吗? (一[最小的,完整的测试和读示例](http://stackoverflow.com/help/mcve)演示您的问题将是最好的) – geocodezip

回答

0

我认为你的回答可以发现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); 
}