Google maps 如何在谷歌地图中直接识别一个城市的坐标？_Google Maps_Google Maps Api 3_Google Maps Markers

Google maps 如何在谷歌地图中直接识别一个城市的坐标？

google-maps google-maps-api-3

Google maps 如何在谷歌地图中直接识别一个城市的坐标？,google-maps,google-maps-api-3,google-maps-markers,Google Maps,Google Maps Api 3,Google Maps Markers,我正在努力实现以下目标主页：访问者将从搜索字段中搜索城市或位置。谷歌文档中的缩放级别如下所示 1: World 5: Landmass/continent 10: City 15: Streets 20: Buildings 在搜索页面上：我想列出搜索区域中的所有属性，例如加利福尼亚，因此我想用缩放级别10在地图上显示所有属性。。但问题是我正在努力寻找城市的坐标。。我必须在数据库中添加所有城市坐标吗？请参阅下面的代码。。如何使center:{lat:19.1760，lng:72.7954}动

我正在努力实现以下目标

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

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

在搜索页面上：我想列出搜索区域中的所有属性，例如加利福尼亚，因此我想用缩放级别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>


文件
/*始终明确设置贴图高度以定义div的大小
*包含映射的元素*/
#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，正文{
身高：100%；
保证金：0；
填充：0；
}
函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：{lat:19.1760，lng:72.7954}
});
设置标记（地图）；
}
var海滩=[
['Aksa Beach'，19.1760,72.7954,1]，
[‘巨湖滩’、19.0969、72.8266、1]
];
函数设置标记（map）{
变量形状={
coords:[1,1,1,20,18,20,18,1]，
类型：“poly”
};
对于（变量i=0；i<0.length；i++）{
var beach=海滩[i]；
var marker=new google.maps.marker({
位置：{纬度：海滩[1]，液化天然气：海滩[2]}，
地图：地图，
形状：形状，
标题：海滩[0]，
zIndex:海滩[3]
});
marker.addListener（'click'，function（））{
map.setZoom（20）；
map.setCenter（marker.getPosition（））；
});
}
}

简而言之，我如何动态地获得城市/大陆/街道等的坐标来绘制地图？因为坐标是必需的属性。

使用地理编码器

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