2010-08-27 110 views
1

我的谷歌地图API代码没有正确地做地图标记。由于某些奇怪的原因,它会将地图标记放在那里,但根本不在正确的地方。它的经度似乎是正确的,但纬度似乎不在那里。它似乎把标记放在地图的边缘。同样,当你点击它们而不是显示信息时,它只是缩小太多,地图消失。这里是我,我下车谷歌API文档:

的Index.html问题与谷歌地图标记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title>Page Title</title> 
    <script src="http://maps.google.com/maps?file=api&v=2&key=myKey-dbBRD8yUxCv4Esyhw4vpb86bE3mijaBS3Fcz1Rq_adaGcRea0Mlr9lNqAJw" 
      type="text/javascript"></script> 

    <script type="text/javascript"> 
    //<![CDATA[ 

     function load() { 
     if (GBrowserIsCompatible()) { 
     var map = new GMap2(document.getElementById("map")); 
     map.setCenter(new GLatLng(39.8163, -98.55762), 4); 
     map.setUIToDefault(); 

     GDownloadUrl("markerData.php", function(data) { 
      var xml = GXml.parse(data); 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) { 
      var Date = markers[i].getAttribute("Date"); 
      var Time = markers[i].getAttribute("Time"); 
      var Size = markers[i].getAttribute("Size"); 
      var City = markers[i].getAttribute("City"); 
      var State = markers[i].getAttribute("State"); 
      var Population = markers[i].getAttribute("Population"); 
      var Comments = markers[i].getAttribute("Comments"); 
      var point = new GLatLng(parseFloat(markers[i].getAttribute("Latitude")), parseFloat(markers[i].getAttribute("Longitude"))); 
      var marker = createMarker(point, Date, Time, Size, City, State, Population, Comments); 
      map.addOverlay(marker); 
      } 
     }); 
     } 
    } 

    function createMarker(point, Date, Time, Size, City, State, Population, Comments) { 
     var marker = new GMarker(point); 
     var html = "Date:" + Date + "<br />Time:" + Time + "<br />Size:" + Size + "<br />City:" + City + "<br />State:" + State + "<br />Populaton:" + Population + "<br />Comments" + Comments ; 
     GEvent.addListener(marker, "click", function() { 
      marker.openInfoWindowHtml(html); 
     }); 

     return marker; 
    } 
    //]]> 
    </script> 

    </head> 

    <body onload="load()" onunload="GUnload()"> 
    <div id="map" style="width: 750px; height: 500px"></div> 
    </body> 
</html> 



markerData.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<?php 
require("dbinfo.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; 
} 

// Opens a connection to a MySQL server 
$connection=mysql_connect ("database", $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()); 
} 

// Select all the rows in the markers table 
$query = "SELECT * FROM mapData WHERE 1"; 
$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 'Date="' . $row['Date'] . '" '; 
    echo 'Time="' . $row['Time'] . '" '; 
    echo 'Size="' . $row['Size'] . '" '; 
    echo 'City="' . $row['City'] . '" '; 
    echo 'State="' . $row['State'] . '" '; 
    echo 'Population="' . $row['Population'] . '" '; 
    echo 'Latitude="' . $row['Latitude'] . '" '; 
    echo 'Longitude="' . $row['longitude'] . '" '; 
    echo 'Comments="' . $row['Comments'] . '" '; 
    echo '/>'; 
} 

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

?> 
+0

我使用一个API密钥通知,所以您使用的地图API第2版?因为版本3现在已经出来了,它更加简单稳定。 – 2010-08-27 14:37:27

+0

我不确定,我刚刚在网站上发现了有关使用Google地图API和php的文档,并遵循该文档。 http://code.google.com/apis/maps/articles/phpsqlajax.html#outputxml – shinjuo 2010-08-27 14:49:54

回答

1

我做的东西,几乎是相同的你正在努力达到什么。我的解决方案非常完美,但我以完全不同的方式完成了它。

我有我所有的纬度和longitute被储存在地名等,在我的数据库,你有,但我这是怎么处理它们:

selectPlaces.php

<?php 
include 'data.php'; 

mysql_connect($host, $user, $pass) or die ("Wrong Information"); 

mysql_select_db($db) or die("Wrong Database"); 

$result = mysql_query("SELECT * FROM reseller_addresses") or die ("Broken Query"); 
$letter = 'A'; 
while($row = mysql_fetch_array($result)){ 
    $placeName = stripslashes($row['b_name']); 
    $placeCode = stripslashes($row['b_code']); 
    $placeTown = stripslashes($row['b_town']); 
    $places .= "<strong>$letter:</strong> $placeName, $placeTown, $placeCode<br>"; 
    $placeLatLng = stripslashes($row['latlng']); 
    $hidden .= "$placeLatLng<br>"; 
    $letter++; 
} 

mysql_close(); 
?> 

的index.html

<?php 
include 'private/selectPlaces.php' 
?> 
<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<link rel="stylesheet" type="text/css" href="hallets-style.css" /> 
<script type="text/javascript"> 
    function initialize() { 
    var cent = new google.maps.LatLng(51.673606, -3.11542); 
    var myOptions = { 
     zoom: 10, 
     center: cent, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var locations = document.getElementById("hidden").innerHTML.toLowerCase(); 
    var spLocations = locations.split("<br>"); 
    var spLength = (spLocations.length)-1; 
    var letter = "A"; 
    for(var i=0; i<spLength; i++){ 
     var formLocations = spLocations[i].split(","); 
     var image = "http://www.google.com/intl/en_ALL/mapfiles/marker_black"+letter+".png"; 
     var myLatLng = new google.maps.LatLng(formLocations[0], formLocations[1]); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      icon: image, 
      map: map 
     }); 
     letter = String.fromCharCode(letter.charCodeAt() + 1); 
    } 
    } 
</script> 
</head> 
</head> 
<body onload="initialize()"> 
<div id="wrapper"> 
    <div id="left"> 
      <div id="map_canvas"></div> 
    </div> 
    <div id="right"> 
     <div id="menu"> 
     <div 
     <div id="content"><?php echo $places; ?> 
     </div> 
    </div> 
</div> 
<div id="hidden" style="display:none"><?php echo $hidden; ?></div> 
</body> 
</html> 

这里发生了什么是我只是输出我的所有坐标和地方隐藏在我的网页上,然后通过getElementById javascript读取。然后将变量传递给Google标记代码很容易。

希望这有助于你 干杯, 丹