Question

我的Google地图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>';

?>

Answer 1

我做过的事与你想要达到的几乎相同。我的解决方案完美无缺，但我以完全不同的方式完成了它。

我的所有纬度和长度都存储在我的数据库中的地名等旁边，但这就是我处理它们的方式：

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>

这里发生的事情是我只是将我的所有坐标和位置输出到我页面上的隐藏div，然后通过javascript通过getElementById读取。然后很容易将变量传递给google marker代码。

希望这会对你有所帮助干杯，丹

谷歌地图标记问题

1 个答案: