单击时,反向地理编码不会在标记上显示信息窗口

时间:2014-03-11 08:55:03

标签: javascript php html google-maps google-maps-api-3

我从数据库表中提取了纬度和经度,并在谷歌地图上用标记显示了它。现在我想在点击标记时显示位置。我使用信息窗口进行反向地理编码但是单击标记时无法获得预期的结果。当我调试它时显示错误“latlng not defined”。错误是在第43行,即geocoder.geocode(....)。你能否建议我如何处理?我也提供可能对你有帮助的示例代码。请帮助我。

<?php
   $dbname='140dev';
   $dbuser='root';                              
    $dbpass='root';      
    $dbserver='localhost';
    $dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
       mysql_select_db("$dbname") or die(mysql_error());


$sql = mysql_query("SELECT * FROM tweets");
$res =  mysql_fetch_array($sql);
$lat_d = $res['geo_lat'];
$long_d = $res['geo_long'];

// mimic a result array from MySQL
 $result = array(array('geo_lat'=>$lat_d,'geo_long'=>$long_d));

?>
<!doctype html>
<html>
<head>
    <script type="text/javascript"
 src="http://maps.googleapis.com/maps/api/js?key="API_key"&sensor=false"></script>
    <script type="text/javascript">

var map;
var geocoder;
    function initialize() {
        geocoder = new google.maps.Geocoder();
        // Set static latitude, longitude value
    var latlng = new google.maps.LatLng(<?php echo $lat_d; ?>, <?php echo $long_d;?>);
        // Set map options
        var myOptions = {
            zoom: 16,
            center: latlng,
            panControl: true,
            zoomControl: true,
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        // Create map object with options
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    <?php
        // uncomment the 2 lines below to get real data from the db
        $result = mysql_query("SELECT * FROM tweets");
        while ($row = mysql_fetch_array($result))
        //foreach($result as $row) // <- remove this line
   echo "addMarker(new google.maps.LatLng(".$row['geo_lat'].", ".$row['geo_long']."), 
   map);";
    ?>
    }

   function addMarker(latLng, map) {
  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    draggable: true, // enables drag & drop
    animation: google.maps.Animation.DROP
  });

 var contentString = latLng.lat() + " - " + latLng.lng();

 var infowindow = new google.maps.InfoWindow({
   content: contentString
 });

 google.maps.event.addListener(marker, 'click', function() {
    geocoder.geocode({'latLng': latlng}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
           if (results[1]) {
              map.setZoom(11);
              infowindow.setContent(results[1].formatted_address);
              infowindow.open(map, marker);
           } else {
              alert('No results found');
           }
        } else {
           alert('Geocoder failed due to: ' + status);
        }
     });
 });
 }
    </script>
</head>
<body onload="initialize()">
    <div style="float:left; position:relative; width:550px; border:0px #000 solid;">
        <div id="map_canvas" style="width:950px;height:700px;border:solid black 1px;">    
</div>
    </div>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

{'latLng': latlng} latlng超出了我的范围,我只能在initialize()函数内声明它。

您需要在范围内使用google.maps.LatLng个实例。

答案 1 :(得分:0)

您正在将latlng传递给地理编码器,根据您的latLng功能,该地理编码器必须为addMarker()

function addMarker(latLng, map) {

latLng此处和

geocoder.geocode({'latLng': latlng}, function(results, status) {

latlng这里未定义。它应该是:

geocoder.geocode({'latLng': latLng}, function(results, status) {