Question

我的代码在每个输出位置显示标记，但我想在标记上显示地址。我的意思是当用户点击标记时，地址必须显示在标记上方。如何才能完成此任务？我只有纬度和经度没有解决。

test.php的：

 <?php


 $sql=<<<EOF
  SELECT * from markers;
 EOF;
 $result = $db->query($sql);
 $yourArray = array();
 $index = 0;

 while($row = $result->fetchArray(SQLITE3_ASSOC) ){

 $json[] = array(
 'lat' => $row['latitude'],
 'lon' => $row['longitude'],
 'name' => $row['name']


   );

  }

$db->close();


 ?>

<!DOCTYPE html>
<html>
 <head>
   <style>
     #map {
    height: 400px;
    width: 50%;
   }
</style>
</head>
<body>
 <h3></h3>
 <div id="map" align="left"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDj38Snh4MEIsomOlTZfARryo7V8A_qk9o&callback=initMap">
 </script>

 <?php json_encode($json, JSON_PRETTY_PRINT) ?>
 <script type="text/javascript"> 
 function initMap() {

 var locationsJSON = <?php echo json_encode($json, JSON_PRETTY_PRINT) ?>;

  var locations = locationsJSON;

 var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(31.5546, 74.3572),
    mapTypeId: google.maps.MapTypeId.ROADMAP
});




var marker, i;
for (i = 0; i < locations.length; i++) {

    console.log(locations[i]);


    var myLatLng = new google.maps.LatLng(locations[i].lat, locations[i].lon);

    marker = new google.maps.Marker({
        position: myLatLng,
        map: map
    });
}


}
</script>
</body>
</html>

Answer 1

如果你拥有的是坐标（纬度和经度），你唯一的选择就是使用reverse geocoder：

（来自那个documentation）：

术语地理编码通常是指将人类可读地址转换为地图上的位置。进行相反的过程，将地图上的位置转换为人类可读的地址，称为反向地理编码。

但是（除非您发布的代码不是您计划绘制的区域），否则地图区域似乎不会产生可靠的反向地理编码结果。因此，我建议您使用地址和坐标填充数据库。

fiddle using reverse geocoded results in the infowindow

代码段

＆＃13;

function initMap() {

  var locationsJSON = [
  {lat: 31.564614,lon: 74.298718}, 
  {lat: 31.563892,lon: 74.300435}, 
  {lat: 31.565546,lon: 74.297597}, 
  {lat: 31.565332,lon: 74.296744}, 
  {lat: 31.565332,lon: 74.296744}, 
  {lat: 31.565272,lon: 74.297637}, 
  {lat: 31.562347,lon: 74.296712}];

  var locations = locationsJSON;

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(31.5546, 74.3572),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var geocoder = new google.maps.Geocoder();
  var infowindow = new google.maps.InfoWindow();

  var marker, i;
  for (i = 0; i < locations.length; i++) {
    var myLatLng = new google.maps.LatLng(locations[i].lat, locations[i].lon);
    marker = new google.maps.Marker({
      position: myLatLng,
      map: map
    });
    google.maps.event.addListener(marker, 'click', function(evt) {
      var mark = this;
      geocoder.geocode({
        location: evt.latLng
      }, function(results, status) {
        if (status == "OK") {
          infowindow.setContent(results[0].formatted_address + "<br>" + results[0].geometry.location.toUrlValue(6));
          infowindow.open(map, mark);
        }
      });
    });
  };
}

google.maps.event.addDomListener(window, "load", initMap);

＆＃13;

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

＆＃13;

如何在谷歌地图中的每个标记上显示地址

1 个答案: