2013-03-14 127 views
9

我正在尝试使用Google地图v3 api创建地图。我通过互联网找到了下面的代码,我想在地图窗口中显示纬度和纬度而不是地址。如何从google maps v3 api获取经度和纬度?

<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> 

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

回答

10

如果你有

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.setContent('<div><strong>' + place.name + '</strong><br>' + place.geometry.location.lat() + ',' + place.geometry.location.lng()); 
+0

谢谢,它解决了我的问题。但是我还有一个问题,只能显示纬度,经度和地址,而不显示地图。如果可能的话。 – ehp 2013-03-14 18:35:19

+1

请阅读[使用条款](https://developers.google.com/maps/faq#tos)。它看起来像[](https://developers.google.com/places/uplift?hl=en),您可以在没有地图的情况下显示地点内容,但必须显示“由Google支持”徽标。如果你没有地图,不知道你需要什么坐标。在这种情况下,您可能不想使用Google Maps API v3,只需[Places API](https://developers.google.com/places/)即可。 – geocodezip 2013-03-14 18:46:42

+0

我只是问了解一下。我会在地图上显示它。顺便说一句,我也想显示城市名称和状态的缩写。 说新泽西州普林斯顿。我想展示普林斯顿,nj。 如何做到这一点或有可能获得州名缩写? – ehp 2013-03-14 20:14:25

2

看起来你可能会寻找只是普通的地理定位的东西?这里是我的一个项目中的snippett来抓取一个用户的纬度/长度

trigger show_user_location();开始地理定位API。

function show_user_location(){ 

    navigator.geolocation.getCurrentPosition(display_user_location, error_response); 
} 
function display_user_location(user_position){ 
    var lat = user_position.coords.latitude; 
    var lon = user_position.coords.longitude; 

// once we get here make that AJAX query 
// #loc.value="<p>Your latitude is: "+lat+", your longitude is: "+lon+"</p>"+ "<p><a href='http://maps.google.com/?q="+lat+","+lon+"'>View your location on Google Maps</a></p>"; 

    // I often put the lat/lon in a hidden form for later retrieval here. 
    // value = document.getElementById('lat').value; 
    // value = document.getElementById('lat').value; 

    document.getElementById("lat").value = lat; 
    document.getElementById("long").value = lon; 

} 
5

看看这个代码..

<!DOCTYPE html> 
<html> 
<head> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
    <script> 
     function initialize() { 
     var address = 'Kolkata'; 
      geocoder = new google.maps.Geocoder(); 
      geocoder.geocode({ 
      'address': address 
      }, function(results, status) {  
       var lat=document.getElementById("lat").innerHTML=results[0].geometry.location.lat();  
       var lng=document.getElementById("lng").innerHTML=results[0].geometry.location.lng();   
      }); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 
    </script> 
</head> 
<body> 
    <p id="lat"></p> 
    <p id="lng"></p> 
</body> 
</html> 
8

更简单的解决将是:

var address = "New Delhi" 
$.ajax({ 
    url:"http://maps.googleapis.com/maps/api/geocode/json?address="+address+"&sensor=false", 
    type: "POST", 
    success:function(res){ 
    console.log(res.results[0].geometry.location.lat); 
    console.log(res.results[0].geometry.location.lng); 
    } 
}); 

干杯

+0

这不会触发“同源”域问题? – 2014-08-05 10:09:46

+0

@FranciscoPresencia:它不会抛出跨域问题.. :) ..你可以简单地为自己运行它,看看.. :) – 2014-08-06 12:21:46

+0

很确定这是对付的ToS。为什么不使用更加用户友好的[自动填充](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform)? – Walf 2015-03-10 06:42:18

1

当你想lat和长任何部分尝试为地图添加点击侦听器,而不是标记。代码应该如下所示:

var infowindow = new google.maps.InfoWindow(); 
    var service = new google.maps.places.PlacesService(map); 

    service.getDetails({ 
     placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4' 
    },function(place,status){ 
     if(status === google.maps.places.PlacesServiceStatus.OK) 
     { 
      var marker = new google.maps.Marker({ 
       map:map, 
       position: place.geometry.location 

      }); 

     google.maps.event.addListener(map, 'click', function(e) { 
      infowindow.setContent('<div>'+'Longitute'+'<strong>' + e.latLng.lng() + '</strong><br>' + 
      'Latitude:'+'<strong>' + e.latLng.lat()+'</strong>' + '</div>'); 
      infowindow.open(map, this); 
     }); 
     } 
    }); 

这将使用信息窗口显示地图上任何位置的纬度和经度。

相关问题