doujian3132 2010-08-27 13:54
浏览 72
已采纳

谷歌地图标记问题

My google maps API code is not doing the map markers correctly. For some odd reason it will throw the map marker on there but not in the correct spot at all. Its longitude seems to be correct but the latitude doesnt seem to be there. It just seems to throw the marker on the edge of the map. Also when you click on them instead of showing the information it just Zooms too far and the map disappears. Here is what I have which I got off the google API Documentation:

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条回答 默认 最新

  • dsw1608 2010-08-27 14:21
    关注

    I have done something that's almost identical to what you are trying to achieve. My solution works perfectly, but I have done it in a completely different way.

    I have all my latitude and longitute stored next to placenames etc. in my database as you have, but this is how I process them:

    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>
    

    What's happening here is I'm just outputting all my co-ordinates and places to a hidden div on my page, which is then read by javascript via getElementById. It's easy to pass the variables over to google marker code then.

    Hopefully this helps you Cheers, Dan

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了,怎么打开?(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题,遇到这种情况怎么处理?
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线,如何释放宽带全部速度
  • ¥30 关于#r语言#的问题:如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测