В моем API-интерфейсе Google Maps неправильные маркеры карт не выполняются. По какой-то нечетной причине он будет размещать маркер карты там, но не в правильном месте. Его долгота кажется правильной, но широта не кажется там. Кажется, он бросает маркер на край карты. Также, когда вы нажимаете на них вместо того, чтобы показывать информацию, это просто слишком близко, а карта исчезает. Вот что у меня есть, что я получил от документации API Google:
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('<','<',$htmlStr); $xmlStr=str_replace('>','>',$xmlStr); $xmlStr=str_replace('"','"',$xmlStr); $xmlStr=str_replace("'",''',$xmlStr); $xmlStr=str_replace("&",'&',$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>'; ?>
Я сделал то, что почти идентично тому, чего вы пытаетесь достичь. Мое решение работает отлично, но я сделал это совершенно по-другому.
У меня есть все мои широты и 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>
Что здесь происходит, я просто выводю все мои координаты и места на скрытый div на моей странице, который затем читается javascript через getElementById. Тогда легко передать переменные на код маркера Google.
Надеюсь, это поможет вам Cheers, Dan