如何从google maps v3 api获取经度和纬度？ [英] How to get latitude and longitude from google maps v3 api?

问题描述

我正在尝试使用Google Maps v3 api创建地图。我在互联网上发现了下面的代码，我想在地图窗口中显示纬度和纬度，而不是地址。

 <脚本> 
函数initialize（）{
 var mapOptions = {
 center：new google.maps.LatLng（-33.8688,151.2195），
 zoom：13，
 mapTypeId： google.maps.MapTypeId.ROADMAP 
}; 
 var map = new google.maps.Map（document.getElementById（'map_canvas'），
 mapOptions）; 
 
 var input = document.getElementById（'searchTextField'）; 
 var autocomplete = new google.maps.places.Autocomplete（input）; 
 
 autocomplete.bindTo（'bounds'，map）; 
 
 var infowindow = new google.maps.InfoWindow（）; 
 var marker = new google.maps.Marker（{
 map：map 
}）; 
 
 google.maps.event.addListener（autocomplete，'place_changed'，function（）{
 infowindow.close（）; 
 marker.setVisible（false）; 
 input.className =''; 
 var place = autocomplete.getPlace（）; 
 if（！place.geometry）{
 //通知用户该地点未找到并返回。
 input.className ='notfound'; 
 return; 
} 
 
 //如果该地点有一个几何图形，则将其显示在地图上。 $ b if（place.geometry.viewport）{
 map.fitBounds（place.geometry.viewport）; 
} else {
 map.setCenter（place.geometry.location）; 
 map.setZoom（17）; //为什么是17？因为它看起来不错。
} 
 var image = {
 url：place.icon，
 size：new google .maps.Size（71，71），
原点：新google.maps.Point（0，0），
 anchor：new google.maps.Point（17，34），
 scaledSize：new google.maps.Size（35，35）
}; 
 marker.setIcon（image）; 
 marker.setPosition（place.geometry.location）; 
 marker.setVisible（true）; 
 
 var address =''; 
 if（place.address_components）{
 address = [
（place.address_components [0]&& place.address_components [0] .short_name ||''），
（place.address_components [1]&& place.address_components [1] .short_name ||''），
（place.address_components [2]&& place.address_components [2] .short_name | |''）
] .join（''）; 
} 
 
 infowindow.setContent（'< div>< strong>'+ place.name +'< / strong>< br>'+ address）; 
 infowindow.open（map，marker）; 
}）; 
 
 //设置单选按钮上的侦听器来更改Places 
 // Autocomplete中的过滤器类型。 
函数setupClickListener（id，types）{
 var radioButton = document.getElementById（id）; 
 google.maps.event.addDomListener（radioButton，'click'，function（）{
 autocomplete.setTypes（types）; 
}）; 
} 
 
 setupClickListener（'changetype-all'，[]）; 
 setupClickListener（'changetype-establishment'，['establishment']）; 
 setupClickListener（'changetype-geocode'，['geocode']）; 
} 
 google.maps.event.addDomListener（window，'load'，initialize）; 
< / script> 
< / head> 
< body> 
< div> 
< input id =searchTextFieldtype =textsize =50> 
< input type =radioname =typeid =changetype-allchecked =checked> 
< label for =changetype-all>全部< / label> 
 
< input type =radioname =typeid =changetype-establishment> 
< label for =changetype-establishment>机构< / label> 
 
< input type =radioname =typeid =changetype-geocode> 
< label for =changetype-geocode> Geocodes< / lable> 
< / div> 
< div id =map_canvas>< / div> 
< / body> 
< / html> 
  

请有人帮我获取并显示经纬度。
感谢，
Enamul

解决方案

  var address =''; 
 if（place.address_components）{
 address = [
（place.address_components [0]&& place.address_components [0] .short_name ||''），
（place.address_components [1]&& place.address_components [1] .short_name ||''），
（place.address_components [2]&& place.address_components [2] .short_name | |''）
] .join（''）; 
} 
 
 infowindow.setContent（'< div>< strong>'+ place.name +'< / strong>< br>'+ address）; 
 infowindow.open（map，marker）; 
  

将infowindow行更改为

<$ p （）+ place.name +'< / strong>< br>' '，'+ place.geometry.location.lng（））;

I am trying create a map using google maps v3 api. I have found the below code over internet and I want to show the latitude and logitude in map window instead of address.

<script>
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-33.8688, 151.2195),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);

        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);

        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
          map: map
        });

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
          infowindow.close();
          marker.setVisible(false);
          input.className = '';
          var place = autocomplete.getPlace();
          if (!place.geometry) {
            // Inform the user that the place was not found and return.
            input.className = 'notfound';
            return;
          }

          // If the place has a geometry, then present it on a map.
          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
          }
          var image = {
            url: place.icon,
            size: new google.maps.Size(71, 71),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(17, 34),
            scaledSize: new google.maps.Size(35, 35)
          };
          marker.setIcon(image);
          marker.setPosition(place.geometry.location);
          marker.setVisible(true);

          var address = '';
          if (place.address_components) {
            address = [
              (place.address_components[0] && place.address_components[0].short_name || ''),
              (place.address_components[1] && place.address_components[1].short_name || ''),
              (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
          }

          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
          infowindow.open(map, marker);
        });

        // Sets a listener on a radio button to change the filter type on Places
        // Autocomplete.
        function setupClickListener(id, types) {
          var radioButton = document.getElementById(id);
          google.maps.event.addDomListener(radioButton, 'click', function() {
            autocomplete.setTypes(types);
          });
        }

        setupClickListener('changetype-all', []);
        setupClickListener('changetype-establishment', ['establishment']);
        setupClickListener('changetype-geocode', ['geocode']);
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div>
      <input id="searchTextField" type="text" size="50">
      <input type="radio" name="type" id="changetype-all" checked="checked">
      <label for="changetype-all">All</label>

      <input type="radio" name="type" id="changetype-establishment">
      <label for="changetype-establishment">Establishments</label>

      <input type="radio" name="type" id="changetype-geocode">
      <label for="changetype-geocode">Geocodes</lable>
    </div>
    <div id="map_canvas"></div>
  </body>
</html>

Please some one help me to get and show latitude and longitude. Thanks, Enamul

解决方案

Where you have

  var address = '';
  if (place.address_components) {
    address = [
      (place.address_components[0] && place.address_components[0].short_name || ''),
      (place.address_components[1] && place.address_components[1].short_name || ''),
      (place.address_components[2] && place.address_components[2].short_name || '')
    ].join(' ');
  }

  infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
  infowindow.open(map, marker);

Change the infowindow line to read

  infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + place.geometry.location.lat() + ',' + place.geometry.location.lng());

这篇关于如何从google maps v3 api获取经度和纬度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！