代码之家 › 专栏 › 技术社区 › shinjuo

谷歌地图标记有问题

google-maps html php

shinjuo · 技术社区 · 14 年前

我的谷歌地图API代码没有正确地做地图标记。由于一些奇怪的原因,它会把地图标记扔在那里,但根本不在正确的位置。经度似乎是正确的,但纬度似乎不在那里。它似乎只是把标记扔到了地图的边缘。同样,当你点击它们而不是显示信息时,它会缩放得太远,地图就会消失。以下是我从谷歌API文档中得到的信息:

索引文件

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

标记语言

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

?>

1 回复 | 直到 14 年前

Dan Hanly 14 年前

我做了一些和你想达到的目标几乎相同的事情。我的解决方案工作得很好,但我用了完全不同的方式。

我的所有纬度和长度都存储在我的数据库中的地名等旁边,正如您所拥有的,但这是我处理它们的方法:

选择位置.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();
?>

索引文件

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

这里所发生的是我将所有坐标和位置输出到页面上的隐藏分区,然后由javascript通过getElementByID读取该分区。然后很容易将变量传递给Google标记代码。

希望这对你有帮助干杯, 丹