如何在google maps中直接识别一个城市的坐标？答案

【问题标题】：How to directly identify the co ordinates of a city in google maps?如何在google maps中直接识别一个城市的坐标？
【发布时间】：2018-08-14 09:05:41
【问题描述】：

我正在努力实现以下目标

主页：访问者将从搜索字段中搜索城市或位置。根据谷歌文档的缩放级别如下。

1: World
5: Landmass/continent
10: City
15: Streets
20: Buildings

在搜索页面上：我想列出搜索到的位置中的所有属性，例如加利福尼亚所以我想用 Zoom level 10 在地图上显示所有属性.. 但问题是我正在努力寻找城市的坐标.. 做我必须在数据库中添加所有城市坐标？见下面的代码..我怎样才能使center: {lat: 19.1760, lng: 72.7954}动态所以它会相应地改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
    </style>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBkyMvhWRirAMPvBnjgzXEH6DIkjwXwW_A&callback=initMap">
</script>
</head>
<body>
    <div id="map"></div>
    <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: {lat: 19.1760, lng: 72.7954}
      });

      setMarkers(map);
    }

        var beaches = [
          ['Aksa Beach', 19.1760, 72.7954, 1],
          ['Juhu Beach', 19.0969, 72.8266, 1]
        ];

        function setMarkers(map) {

          var shape = {
            coords: [1, 1, 1, 20, 18, 20, 18, 1],
            type: 'poly'
          };
          for (var i = 0; i < beaches.length; i++) {
            var beach = beaches[i];
            var marker = new google.maps.Marker({
              position: {lat: beach[1], lng: beach[2]},
              map: map,
              shape: shape,
              title: beach[0],
              zIndex: beach[3]
            });

            marker.addListener('click', function() {
            map.setZoom(20);
            map.setCenter(marker.getPosition());
          });
          }

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

简而言之，我怎样才能动态获取城市/大陆/街道等的坐标来渲染地图？因为坐标是必需的属性。

【问题讨论】：

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

【解决方案1】：

使用地理编码器。

geocoder.geocode( { 'address': Address_text}, function(results, status) {
    if (status== google.maps.GeocoderStatus.OK) {
        loc_lat = results[0].geometry.location.lat();
        loc_lon = results[0].geometry.location.lng()]
        fmaddress = results[0].formatted_address;
        alert('LAT: '+loc_lat+', LON: '+loc_lon+' ADDRESS: '+fmaddress);
    } else {
        if(Address_text != '' && Address_text!= null) {
            alert('Couldnt get the X,Y');
        }
    }
});

注意，您将无法使用位置 lat,lon,address，直到请求结束，您必须等待请求返回，然后才能使用数据。由于 JS 以异步方式工作。不要忘记使用“&libraries=places”。 ->

https://maps.googleapis.com/maps/api/js?key=AIzaSyBkyMvhWRirAMPvBnjgzXEH6DIkjwXwW_A&libraries=places&callback=initMap

【讨论】：