2017-04-20 48 views
0

我正在使用google maps api地方搜索以获取附近地点的详细信息。在这个例子中,我们必须在函数initMap()中指定center:lat,lng。我如何从当前位置提供它们?如何从当前位置指定纬度和长度值?

的jsfiddle链接:https://jsfiddle.net/mayureshbakshi/xj3n2ecc/2/

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Place details</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 

     #map { 
     height: 100%; 
     } 

     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    <script> 
     function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: -33.866, lng: 151.196}, 
      zoom: 15 
     }); 

     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(marker, 'click', function() { 
       infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 
       'Place ID: ' + place.place_id + '<br>' + 
       place.formatted_address + '</div>'); 
       infowindow.open(map, this); 
      }); 
      } 
     }); 
     } 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"> 
    </script> 
    </body> 
</html> 
+0

@JaromandaX我编辑的问题,当你评论。 –

+0

好吧,我不可能知道你会发布一个问题,然后在10分钟后添加代码 –

回答

0

您可以使用此代码

function myMap() { 

     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: -34.397, lng: 150.644}, 
      zoom: 6 
     }); 
     infoWindow = new google.maps.InfoWindow; 

     // Try HTML5 geolocation. 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
       var pos = { 
        lat: position.coords.latitude, 
        lng: position.coords.longitude 
       }; 

       infoWindow.setPosition(pos); 
       infoWindow.setContent('Your current location      '); 
       infoWindow.open(map); 
       map.setCenter(pos); 
       var marker = new google.maps.Marker({ position: pos }); 
       marker.setMap(map); 
       var mapOptions = { center: myCenter, zoom: 15 }; 
      }, function() { 
       handleLocationError(true, infoWindow, map.getCenter()); 
      }); 
     } else { 
      // Browser doesn't support Geolocation 
      handleLocationError(false, infoWindow, map.getCenter()); 
     } 

    } 
+0

这段代码给了我我所在位置的坐标。但是,如何将地图放在他们的中心,以便我获得的地点详情位于我的位置附近? –

+0

你的意思是你想放大地图? –

+0

在initMap()中心:{lat:LAT,lng:LNG}中,我想从地理位置获取LAT和LNG值。 –

0
// Note: This example requires that you consent to location sharing when 
    // prompted by your browser. If you see the error "The Geolocation service 
    // failed.", it means you probably did not give permission for the browser to 
    // locate you. 


    var map, infoWindow; 
    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: -34.397, lng: 150.644}, 
     zoom: 6 
    }); 
    infoWindow = new google.maps.InfoWindow; 

    // Try HTML5 geolocation. 
    if (navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
     var pos = { 
      lat: position.coords.latitude, 
      lng: position.coords.longitude 
     }; 

     infoWindow.setPosition(pos); 
     infoWindow.setContent('Location found.'); 
     infoWindow.open(map); 
     map.setCenter(pos); 
     }, function() { 
     handleLocationError(true, infoWindow, map.getCenter()); 
     }); 
    } else { 
     // Browser doesn't support Geolocation 
     handleLocationError(false, infoWindow, map.getCenter()); 
    } 
    } 

    function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
    infoWindow.setPosition(pos); 
    infoWindow.setContent(browserHasGeolocation ? 
          'Error: The Geolocation service failed.' : 
          'Error: Your browser doesn\'t support geolocation.'); 
    infoWindow.open(map); 
    } 

https://developers.google.com/maps/documentation/javascript/geolocation

对于刚刚定心谷歌地图,如果你有纬度和经度,你可以做以下的后点。

map.setCenter({lat:lat, lng:lng}); 
相关问题