点击时如何在谷歌地图的标记上显示位置？答案

【问题标题】：How to display location on markers of google maps when clicked?点击时如何在谷歌地图的标记上显示位置？
【发布时间】：2014-03-10 07:08:36
【问题描述】：

我已经从我的数据库表中提取了纬度和对数，并在带有标记的谷歌地图上显示了它。现在我想在标记被点击时显示位置。我尝试了很多但不能找到路。你能建议我如何进行吗？我也提供示例代码，可能对你有帮助。请帮助我。

<?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>

【问题讨论】：

查看信息窗口：developers.google.com/maps/documentation/javascript/examples/…
我尝试添加信息窗口。但这是一种静态方式，但我想动态显示位置或至少在标记上显示纬度。
我的意思是为每个标记添加信息窗口。如果单击标记，将显示其信息窗口，在另一个标记上，将显示该标记的信息窗口。这不是你想要的动态吗？
但是信息窗口必须是静态定义的，所以它不能以动态方式运行

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

【解决方案1】：

改进您的 addMarker() 函数，因为它在信息窗口上显示点击标记的 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);
    });
}

【讨论】：

非常感谢。它的工作。你能为我建议一个最后的解决方案。我怎样才能将这个经纬度的地图转换为实际位置？
如果你指的是实际位置的地址，它被称为地理编码，谷歌有一个很好的文档：developers.google.com/maps/documentation/javascript/geocoding。此外，带有地理编码标签的 SO 中的许多带有答案的问题将引导您轻松找到解决方案。
我会通过它并尽快通知您。
我已经编辑了上面的代码，以便使用反向地理编码在标记上获取位置而不是纬度值，但它不起作用。请仔细阅读并提出更改建议
我编辑了我的帖子，但您还需要在initialize() 函数的顶部添加geocoder = new google.maps.Geocoder(); 并在var map; 之后添加var geocode;

【解决方案2】：

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

【讨论】：