Проблема с маркерами Google Map - PullRequest
1 голос
/ 27 августа 2010

Мой код API карт Google не работает правильно с маркерами карты.По какой-то странной причине он бросит туда маркер карты, но не в правильном месте.Кажется, что его долгота правильная, но широты там нет.Это просто кажется, чтобы бросить маркер на краю карты.Кроме того, когда вы нажимаете на них, вместо того, чтобы показывать информацию, она просто увеличивает масштаб и карта исчезает.Вот то, что у меня есть, что я получил от документации Google 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>';

?>

1 Ответ

1 голос
/ 27 августа 2010

Я сделал то, что почти идентично тому, что вы пытаетесь достичь.Мое решение работает отлично, но я сделал это совершенно по-другому.

Все мои значения широты и долготы хранятся рядом с местными именами и т. Д. В моей базе данных, как и у вас, но вот как я их обрабатываю:

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.

Надеюсь, это поможет вам, Ура, Дэн

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...