单击时如何在谷歌地图标记上显示位置?

时间:2014-03-10 07:08:36

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

我已经从我的数据库表中提取了纬度和逻辑,并在带有标记的谷歌地图上显示了它。现在我想在点击标记时显示位置。我试了很多但是不能找到方法。你能建议我该如何处理?我也提供了可以帮助你的示例代码。请帮助我。

<?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 tweets1");
$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;
    function initialize() {
        // 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 tweets1");
        while ($row = mysql_fetch_array($result))
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();

geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
  if (results[1]) {
    map.setZoom(11);
    marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
    infowindow.setContent(results[1].formatted_address);
    infowindow.open(map, marker);
  } else {
    alert('No results found');
  }
 } else {
  alert('Geocoder failed due to: ' + status);
 }
 });

google.maps.event.addListener(marker, 'click', function() {
   infowindow.open(map,marker);
 });
}
    </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)

改进addMarker()功能,因为它显示了infowindow上点击标记的lat-lng值:

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() {
       infowindow.open(map,marker);
    });
}

答案 1 :(得分:0)

您可以添加位置信息作为标记标签。请按照示例进行操作 http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/examples/basic.html