Question

我正在努力实现以下目标

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

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>

因此，简而言之，我如何动态获取城市/大陆/海岸线等的坐标以渲染地图？因为坐标是必填属性。

Answer 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，地址，直到请求结束为止，您必须等待请求返回，然后再使用数据。由于JS以异步方式工作。不要忘记使用“＆libraries = places”。 ->

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

如何在Google地图中直接识别城市的坐标？

1 个答案: