将XML传递给Javascript以在Google地图中显示标记

我是一名php新手，我正尝试创建基于此教程的Google地图 https://developers.google.com/maps/articles/phpsqlajax_v3稍微有一点变化。我建立了一个搜索框并设法根据查询输出一个XML。将XML传递给Javascript以在Google地图中显示标记

我有一个很难从search.php中传递XML数据进行标记在谷歌地图

这里是我的代码

的形式

<form name="form1" method="POST" action="search.php"> 
<input type="text" name="search" size="20"/> 
<input type="button" onClick="searchLocations()" value="Search"/> 
</form>

对于the search.php

<?php 
    include("config.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; 
    } 

    if(empty($_POST['search'])) { 
header("Location:map.html"); 

    } 

    $query = " SELECT * FROM markers WHERE name LIKE '%".$_POST['search']."%' OR address LIKE '%".$_POST['search']."%' "; 
    $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 'name="' . parseToXML($row['name']) . '" '; 
    echo 'address="' . parseToXML($row['address']) . '" '; 
    echo 'lat="' . $row['lat'] . '" '; 
    echo 'lng="' . $row['lng'] . '" '; 
    echo 'type="' . $row['type'] . '" '; 
    echo '/>'; 
    } 

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

    ?>

对于JavaScript的

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
//<![CDATA[ 

var customIcons = { 
    restaurant: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png' 
    }, 
    bar: { 
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' 
    } 
}; 

function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(14.479, 121.020), 
    zoom: 14, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    // Change this depending on the name of your PHP file 
    downloadUrl("search.php", 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 address = markers[i].getAttribute("address"); 
     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 
     }); 
     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>

来源

2014-03-25 via8321

更新的代码... –

演示：http://so.devilmaycode.it/passing-xml-to-javascript-to-show-markers-in-google-map

HTML

<!DOCTYPE html > 
<head> 
    <title</title> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    var map = null; 

    var customIcons = { 
     restaurant: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png' 
     }, 
     bar: { 
     icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' 
     } 
    }; 

    function load() { 
     map = new google.maps.Map(document.getElementById("map"), { 
     center: new google.maps.LatLng(47.6145, -122.3418), 
     zoom: 13, 
     mapTypeId: 'roadmap' 
     }); 
    } 

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

    function searchLocations(){ 
     var infoWindow = new google.maps.InfoWindow; 
     var search_term = document.getElementById('search-term').value; 
     jQuery.ajax({ 
     dataType :'xml', 
     type: 'GET', 
     url : 'search.php?search_term='+search_term, 
     success:function(data){ 
      var markers = data.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
      var name = markers[i].getAttribute("name"); 
      var address = markers[i].getAttribute("address"); 
      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 
      }); 
      bindInfoWindow(marker, map, infoWindow, html); 
      } 
     }}); 
     return false; 
    } 
    //]]> 
    </script> 
</head> 
<body onload="load()"> 
<p> 
    <form id="search-form" method="post" action="search.php"> 
    <input type="text" name="search" size="20" id="search-term"/> 
    <input type="button" value="Search" onclick="searchLocations();" /> 
</form> 
</p> 
<div id="map" style="width: 500px; height: 300px"></div> 
</body> 
</html>

PHP

<?php 
include("config.php"); 

function xml_entities($value) { 
    return strtr(
     $value, 
     array(
      "<" => "&lt;", 
      ">" => "&gt;", 
      '"' => "&quot;", 
      "'" => "&apos;", 
      "&" => "&amp;", 
      ) 
     ); 
} 

if(isset($_REQUEST['search_term'])){ 
    $search_term = mysql_real_escape_string(trim($_REQUEST['search_term'])); 

    if($result = mysql_query("SELECT * FROM markers WHERE name LIKE '%{$search_term}%' OR address LIKE '%{$search_term}%'")){ 

     $markers = array(); 

     while ($row = @mysql_fetch_assoc($result)){ 
      extract($row); 
      $markers[] = "<marker name='".xml_entities($name)."' address='".xml_entities($address)."' lat='{$lat}' lng='{$lng}' type='{$type}' />"; 
     } 

     if(count($markers)){ 
      header("Content-type: text/xml"); 
      echo '<markers>'.implode('', $markers).'</markers>'; 
     } 
    } 
} 
?>

来源

2014-03-25 19:34:47

感谢您的帮助aSeptik，但仍无法得到它的工作。将$ _POST更改为$ _REQUEST并添加缺少的js脚本。我在做什么错误..我看到你的工作.. – via8321

@ via8321：我已经添加了PHP代码，并剥离到骨头的HTML文件，试试这两个文件，让我知道。 –

我仍然无法得到它的工作..我测试了你的PHP文件，但没有得到任何XML结果。 – via8321

将XML传递给Javascript以在Google地图中显示标记

回答

相关问题