Question

我在按照本指南https://developers.google.com/maps/articles/phpsqlajax_v3从数据库i中添加标记时遇到了一些问题。该页面只是加载但没有标记，我还检查了xml生成器是否正常工作，是的确如此。有人可以帮助我解决我做错的事吗？这是我的索引文件。

     <?php include('connection_db.php');?>

     downloadUrl("xmlspitter.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,
    shadow: icon.shadow
    });
    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>   


 </head>
    <body onload="initialize()">
    <div id="contain">
   <div id="map_canvas" style="width:500px; height:500px"></div>
   </div>
   </body>
  </html>

注意：xmlspitter.php具有来自我的数据库的正确输出。如果有人知道更多好的教程，请告诉我谢谢。

// EDIT 这是来自外部js的地图

    function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(47.6145, -122.3418),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

和xmlspitter.php如果有人有兴趣

   <?php  
    include('connection_db.php');

   // Start XML file, create parent node

    $dom = new DOMDocument("1.0");
    $node = $dom->createElement("markers");
  $parnode = $dom->appendChild($node); 



   // Select all the rows in the markers table

  $query = "SELECT * FROM markers WHERE 1";
  $result = mysql_query($query);
  if (!$result) {  
  die('Invalid query: ' . mysql_error());
   } 

     header("Content-type: text/xml"); 

   // Iterate through the rows, adding XML nodes for each

  while ($row = @mysql_fetch_assoc($result)){  
   // ADD TO XML DOCUMENT NODE  
   $node = $dom->createElement("marker");  
   $newnode = $parnode->appendChild($node);   
   $newnode->setAttribute("name",$row['name']);
   $newnode->setAttribute("address", $row['address']);  
   $newnode->setAttribute("lat", $row['lat']);  
   $newnode->setAttribute("lng", $row['lng']);  
   $newnode->setAttribute("type", $row['type']);
 } 

 echo $dom->saveXML();

 ?>

Answer 1

根据您的显示，您的java脚本代码未运行。它应该全部放在初始化函数中。

此外，您尚未初始化customIcons变量或为其赋值。如果您不使用它，它可以被删除。它应该只使用默认标记。

指南

自定义图标您可以为标记指定自定义图标和阴影。首先创建一个关联数组，将您的图标与您的类型字符串相关联：＆＃39; restaurant＆＃39;或者＆＃39; bar。＆＃39;这使得稍后在从XML创建标记时可以轻松引用图标。

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

去年我实际做了类似的事情。虽然我使用php来填充数据库中的标记而不是javascript和xml。

已编辑：博客链接不再有效。

谷歌地图javascript api无法从mysql数据库加载标记

1 个答案: