【问题标题】:Combinig marker output with geocoding address将标记输出与地理编码地址相结合
【发布时间】:2012-09-18 10:41:28
【问题描述】:

由于我无法与 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>

【问题讨论】:

    标签: php javascript mysql google-maps


    【解决方案1】:

    第 18 行:

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

    尝试在您的 load() 函数之外声明它,否则 Firebug 会在第 103 行出错(未定义映射)。

    【讨论】:

    • 感谢您指出,缺少代码 ;-) 我之前已经尝试过您的建议,但没有达到预期的结果,但按照您所说的方式进行了更改...也许现在使用您的代码有别的想法吗?非常感谢!
    【解决方案2】:

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

    <!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>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-07-04
      • 1970-01-01
      • 2012-05-30
      • 1970-01-01
      • 2010-09-18
      相关资源
      最近更新 更多