Google map javascript api无法从mysql数据库加载标记答案

【问题标题】：Google map javascript api unable to load markers from mysql databaseGoogle map javascript api无法从mysql数据库加载标记
【发布时间】：2012-12-06 09:35:04
【问题描述】：

我在从数据库中放置标记时遇到了一点问题，我遵循了本指南https://developers.google.com/maps/articles/phpsqlajax_v3。页面只是加载但没有标记，我还检查了 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 从我的数据库有正确的输出。另外，如果有人知道任何更好的教程，请告诉我谢谢。

//编辑这是来自外部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();

 ?>

【问题讨论】：

标签： php javascript mysql ajax google-maps-api-3

【解决方案1】：

根据您的显示，您的 java 脚本代码没有运行。应该都放在初始化函数中。

您还没有初始化customIcons 变量或给它赋值。如果您不使用它，则可以将其删除。那么它应该只使用默认标记。

来自指南

自定义图标您可以为标记指定自定义图标和阴影。首先创建一个关联数组，将您的图标与您的类型字符串相关联：“restaurant”或“bar”。这使您以后从 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。

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

【讨论】：

抱歉。我把它放在一个单独的文件中。它也显示，但标记和显示。 xml 也可以。
另一个 javascript 文件？变量是否在适当的范围内？这个脚本可以访问变量吗？
我发布了源代码，是的，脚本可以访问外部 js 文件
您引用了 customIcons 变量，但它从未定义或给定值。
在示例中，标记的加载是加载函数的一部分。