使用地理编码器使地址成为谷歌地图的中心

发布于 2024-12-15 00:21:04 字数 1901 浏览 2 评论 0原文

我正在尝试编写一个程序,查找某个地址的相应值 latLng,然后将其用于地图的中心。到目前为止,这是我的代码,但是我遇到的主要问题是从地理编码器获取返回的值。

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps Geocoding Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 700px; height: 700px"></div> 

   <script type="text/javascript"> 

   var mapOptions = { 
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      center: new google.maps.LatLng(54.00, -3.00),
      zoom: 4
   };


   var geocoder = new google.maps.Geocoder();

   var address = '3410 Dr Martin Luther King Jr Blvd, New Bern, NC, US';


   geocoder.geocode({'address': address}, function(results, status) {
                                            if(status == google.maps.GeocoderStatus.OK) 
                                            {
                                                var bounds = new google.maps.LatLngBounds();
                                                document.write(bounds.extend(results[0].geometry.location));
                                                map.fitBounds(bounds);
                                                new google.maps.Marker(
                                            {
                                               position:results[0].geometry.location,
                                               map: map
                                             }
                                             );

                                         }

                                      }
                    );

var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   </script> 
</body> 
</html>

I'm trying to write a program that finds the respective values latLng for an address and then using that for the center of the map. Here is my code so far, however the main problem I am having is getting the values of back from the geocoder.

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps Geocoding Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 
   <div id="map" style="width: 700px; height: 700px"></div> 

   <script type="text/javascript"> 

   var mapOptions = { 
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      center: new google.maps.LatLng(54.00, -3.00),
      zoom: 4
   };


   var geocoder = new google.maps.Geocoder();

   var address = '3410 Dr Martin Luther King Jr Blvd, New Bern, NC, US';


   geocoder.geocode({'address': address}, function(results, status) {
                                            if(status == google.maps.GeocoderStatus.OK) 
                                            {
                                                var bounds = new google.maps.LatLngBounds();
                                                document.write(bounds.extend(results[0].geometry.location));
                                                map.fitBounds(bounds);
                                                new google.maps.Marker(
                                            {
                                               position:results[0].geometry.location,
                                               map: map
                                             }
                                             );

                                         }

                                      }
                    );

var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   </script> 
</body> 
</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

鯉魚旗 2024-12-22 00:21:04

您想设置谷歌地图对象的边界。

var bounds = new google.maps.LatLngBounds();
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);

有关 LatLngBounds 的详细信息

(可选)map.fitBounds(bounds.getCenter()) 如果 LatLngBounds 中有多个 latlng

you want to set the bounds on the google map object.

var bounds = new google.maps.LatLngBounds();
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);

more info on LatLngBounds

optionaly you could do map.fitBounds(bounds.getCenter()) if you have more than one latlng in the LatLngBounds

烟雨扶苏 2024-12-22 00:21:04

您想使用新的经纬度在地图上调用 setCenter()。在您尝试执行此操作之前,我还会创建地图。

<script type="text/javascript"> 
  var geocoder = new google.maps.Geocoder();

  var address = '3410 Dr Martin Luther King Jr Blvd, New Bern, NC, US';

  var mapOptions = { 
          mapTypeId: google.maps.MapTypeId.TERRAIN,
          center: new google.maps.LatLng(54.00, -3.00),
          zoom: 5
  };

   var map = new google.maps.Map(document.getElementById("map"), mapOptions);

   geocoder.geocode({'address': address}, function(results, status) {
          if(status == google.maps.GeocoderStatus.OK) 
          {
               result = results[0].geometry.location;
               console.log(result);

               map.setCenter(result);
           }
   });
   </script>

You want to call setCenter() on the map with the new latlng. I would also create the map before you try to do this.

<script type="text/javascript"> 
  var geocoder = new google.maps.Geocoder();

  var address = '3410 Dr Martin Luther King Jr Blvd, New Bern, NC, US';

  var mapOptions = { 
          mapTypeId: google.maps.MapTypeId.TERRAIN,
          center: new google.maps.LatLng(54.00, -3.00),
          zoom: 5
  };

   var map = new google.maps.Map(document.getElementById("map"), mapOptions);

   geocoder.geocode({'address': address}, function(results, status) {
          if(status == google.maps.GeocoderStatus.OK) 
          {
               result = results[0].geometry.location;
               console.log(result);

               map.setCenter(result);
           }
   });
   </script>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文