将标记输出与地理编码地址相结合

时间：2012-09-18 10:41:28

标签： php javascript mysql google-maps

因为我与谷歌地图Api中的商店查找器不相处（请参阅我的其他未解答的问题）我试图以另一种方式处理它：通过php-mysql-query和xml-file将所有位置放入地图并通过文本输入搜索我自己的位置。 每个工作分别工作正常，但在组合时，我没有得到我的位置标记，即地理编码器似乎无法正常工作。但是：当我输入一个无意义的地址时，我收到了正确的错误消息。所以在我看来，地理编码的标记无法显示，但我不知道为什么。有人可以帮忙吗？这是一个例子（http://umwelt-und-information.com/maps/ASPE_Adressen_zeigen.php），这里是代码：

<?php
//error_reporting(E_ALL);    
require("dbpass.php");
if (PHP_VERSION>='5')
require_once('domxml-php4-to-php5.php');
// Opens a connection to a mySQL server
$connection=mysql_connect ($dbhost, $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active mySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Start XML file, create parent node
$doc = domxml_new_doc("1.0");
$node = $doc->create_element("markers");
$parnode = $doc->append_child($node);
// Select all the rows in the ASPE table
$query = "SELECT DISTINCT Nachname, lng, lat, Strasse, Telefon_P, Telefon_D, Telefon_M FROM ASPE";
$result = mysql_query($query) or die ("Error in query: $query " . mysql_error());
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
$node = $doc->create_element("marker");
$newnode = $parnode->append_child($node);
$newnode->set_attribute("Nachname", $row['Nachname']);
$newnode->set_attribute("Strasse ", $row['Strasse']);
$newnode->set_attribute("Telefon_P", $row['Telefon_P']);
$newnode->set_attribute("Telefon_D", $row['Telefon_D']);
$newnode->set_attribute("Telefon_M", $row['Telefon_M']);
$newnode->set_attribute("lat", $row['lat']);
$newnode->set_attribute("lng", $row['lng']);
}
$xmlfile = $doc->dump_file("ASPE.xml");
mysql_close($connection);
//header("Location: http://umwelt-und-information.com/maps/kartenansicht_Art.php"); 
?>

<script src="http://maps.google.com/maps/api/js?sensor=false" 
   type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var map;
var geocoder;
var markers = [];
var infoWindow;
var iconimage = 'ok.png';

// Geocoder
geocoder = new google.maps.Geocoder();
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    // map.setZoom(15);
    var iconimage2 = 'correct.png';
    var marker = new google.maps.Marker({
        map: map,
        icon: iconimage2,
        position: results[0].geometry.location
    });
  } else {
    alert("Zu Ihren Angaben konnte kein Fundort gefunden werden: " + status);
  }
});
}

function load() {
    var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(52.6145, 8.3418),
    zoom: 13,
    mapTypeId: 'roadmap',
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
  });
  infoWindow = new google.maps.InfoWindow();






    downloadUrl("ASPE.xml?ienocache="+new Date().getMilliseconds(), function(data){ 
       var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker");
      var bounds = new google.maps.LatLngBounds();
      for (var i = 0; i < markers.length; i++) {
        var Nachname = markers[i].getAttribute("Nachname");
        var Strasse = markers[i].getAttribute("Strasse");
        var Telefon_P = markers[i].getAttribute("Telefon_P");
        var Telefon_D = markers[i].getAttribute("Telefon_D");
        var Telefon_M = markers[i].getAttribute("Telefon_M");
        var latlng = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));

       var html = "<b>" + "Nachname: "  + "</b>" + Nachname +  " <br/>" +
         "<b>" + "Strasse: " +  "</b>" + Strasse + "<br/>" + 
         "<b>" + "Telefon (p): " + "</b>" + Telefon_P + "<br/>" +
         "<b>" + "Telefon (d):" +  "</b>" + Telefon_D + "<br/>" +
         "<b>" + "Telefon (m):" +  "</b>" + Telefon_M + "<br/>";
        var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: iconimage         
        });     


   bounds.extend(latlng);
   map.fitBounds(bounds);
   var listener = google.maps.event.addListener(map, "idle", function() { 
    if (map.getZoom() > 15) map.setZoom(15); 
    google.maps.event.removeListener(listener); 
    });




 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);
});
markers.push(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> Geben Sie hier eine Adresse zum leichteren Auffinden des Fundortes ein: <br> 
<input id="address" type="textbox" value="" size="80">
<input type="button" value="Fundort finden" onclick="codeAddress()"> <br></br></div>


<div id="map" style="width: 600px; height: 500px"></div>


</body>

2 个答案:

答案 0 :(得分：0)

第18行：

 var map = new google.maps.Map(document.getElementById("map"), {

尝试在load（） - 函数之外声明它，因为否则Firebug在第103行得到错误（map undefined）。

答案 1 :(得分：0)

现在，一切正常（除了地理编码中的自动完成，但这并不重要）:-)我可以显示mysql数据库中的位置，并通过键入地址（地理编码）以及单击来添加标记一个新的位置。见http://umwelt-und-information.com/maps/ASPE_Adressen_zeigen.php。我发现，为什么之前没有工作：我使用“function load（）...”和“相应的，但是当我现在使用”函数initialize（）“和”它的工作原理!!也许任何人都可以偶然评论这两个选项之间的区别...... ;-) 无论如何，这是代码（如果有人需要的话）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-    transitional.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /></head>
<?php
//error_reporting(E_ALL);    

require("dbpass.php");
if (PHP_VERSION>='5')
require_once('domxml-php4-to-php5.php');

// Opens a connection to a mySQL server

$connection=mysql_connect ($dbhost, $username, $password);
if (!$connection) {
die('Not connected : ' . mysql_error());
}

 // Set the active mySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Start XML file, create parent node
$doc = domxml_new_doc("1.0");
$node = $doc->create_element("markers");
$parnode = $doc->append_child($node);


// Select all the rows in the ASPE table
$query = "SELECT DISTINCT Nachname, Vorname, lng, lat, Strasse, Telefon_P, Telefon_D, Telefon_M FROM ASPE";
$result = mysql_query($query) or die ("Error in query: $query " . mysql_error());
$num_results = mysql_num_rows($result);
echo "<b> $num_results </b> Ergebnis(se) passt/passen zu Ihrer Abfrage</br>"; 


// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
// ADD TO XML DOCUMENT NODE
$node = $doc->create_element("marker");
$newnode = $parnode->append_child($node);
$newnode->set_attribute("Vorname", utf8_encode ($row['Vorname']));
$newnode->set_attribute("Nachname", utf8_encode ($row['Nachname']));
$newnode->set_attribute("Strasse ", utf8_encode ($row['Strasse']));
$newnode->set_attribute("Telefon_P", utf8_encode ($row['Telefon_P']));
$newnode->set_attribute("Telefon_D", utf8_encode ($row['Telefon_D']));
$newnode->set_attribute("Telefon_M", utf8_encode ($row['Telefon_M']));
$newnode->set_attribute("lat", $row['lat']);
$newnode->set_attribute("lng", $row['lng']);
}
$xmlfile = $doc->dump_file("ASPE.xml");
mysql_close($connection);
//header("Location: http://umwelt-und-information.com/maps/kartenansicht_Art.php"); 

?>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript">/script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>

<script type="text/javascript">


//<![CDATA[
var map;
var geocoder;
var markers = [];
var infoWindow;


  // Geocoder

var input = document.getElementById('searchTextField');
//var options = {
types: ['(geocode)']
//componentRestrictions: {country: 'de'}
//};

autocomplete = new google.maps.places.Autocomplete(input, options);


function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    map.setZoom(15);
    var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
    });
  } else {
    alert("Zu Ihren Angaben konnte kein Fundort gefunden werden: " + status);
  }
});
}

function initialize() {
var latlng = new google.maps.LatLng(51.5, 7.5);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

geocoder = new google.maps.Geocoder();  
infoWindow = new google.maps.InfoWindow();


var marker;
function placeMarker(location) {
if ( marker ) {
marker.setPosition(location);
} else {
marker = new google.maps.Marker({
  position: location,
  map: map
});
}
}

google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});             

    downloadUrl("ASPE.xml?ienocache="+new Date().getMilliseconds(), function(data){ 
       var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker");
      var bounds = new google.maps.LatLngBounds();
      for (var i = 0; i < markers.length; i++) {
        var Vorname = markers[i].getAttribute("Vorname");
        var Nachname = markers[i].getAttribute("Nachname");
        var Strasse = markers[i].getAttribute("Strasse");
        var Telefon_P = markers[i].getAttribute("Telefon_P");
        var Telefon_D = markers[i].getAttribute("Telefon_D");
        var Telefon_M = markers[i].getAttribute("Telefon_M");
        var latlng = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));

       var html = 
       "<b>" + "Vorname: "  + "</b>" + Vorname +  " <br/>" +
       "<b>" + "Nachname: "  + "</b>" + Nachname +  " <br/>" +
         "<b>" + "Strasse: " +  "</b>" + Strasse + "<br/>" + 
         "<b>" + "Telefon (p): " + "</b>" + Telefon_P + "<br/>" +
         "<b>" + "Telefon (d):" +  "</b>" + Telefon_D + "<br/>" +
         "<b>" + "Telefon (m):" +  "</b>" + Telefon_M + "<br/>";
        var iconimage2 = 'correct.png';
        var marker = new google.maps.Marker({
        map: map,
        position: latlng,
        icon: iconimage2         
        });     


  bounds.extend(latlng);
  map.fitBounds(bounds);
  var listener = google.maps.event.addListener(map, "idle", function() { 
  if (map.getZoom() > 15) map.setZoom(15); 
  google.maps.event.removeListener(listener); 
  });




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);
});
markers.push(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>


<div> Geben Sie hier die Adresse des Fundortes ein: <br> <input id="address" type="textbox" value="" size="80">
<input type="button" value="Fundort finden" onclick="codeAddress()"> <br></br></div>
<body onload="initialize()">

<div id="map_canvas" style="width: 800px; height: 600px"></div>


</body>
</html>
相关问题
最新问题