使用 PlacesServices 进行地理定位

Question

我要做的是使用 Geolocation API 找到我当前的位置，然后添加谷歌地点，以显示我周围的情况。但是我到目前为止只返回一个特定的位置......

 <script>
  var map;
  var infowindow;

  function initialize() {
    var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);

    map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: pyrmont,
      zoom: 15
    });

    var request = {
      location: pyrmont,
      radius: 500,
      types: ['store']
    };
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, callback);
  }

  function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
    }
  }

  function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
    });
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

如您所见，pyrmont - 给了我经纬度，但我想用这个替换用户当前的位置。所以我可以找出他们在哪里，然后给他们一些商店。当我尝试这样做时，我一直在画一个空白。我以前做过地理定位：

new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

但是，如果我在 lat long 部分使用这个 var，我会得到一个可爱的错误。感谢您提前提供任何帮助。

Answer 1

好的，这样做了：

 <script>
 var map;

      function initialize() {
        var mapOptions = {
          
        };
        map = new google.maps.Map(document.getElementById('contact-map'),{
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP   
        });

        // Try HTML5 geolocation
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);

            var request = {
          location: pos,
          radius: 500,
          types: ['store']
        };
            
            var marker = new google.maps.MarkerImage('../img/layout/marker.png');
            
            var infowindow = new google.maps.InfoWindow({
              map: map,
              position: pos,
              icon: marker,
              content: 'youre here'
            });
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request, callback);            
            
            function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }
      
      function createMarker(place) {
        var placeLoc = place.geometry.location;
        var marker = new google.maps.Marker({
          map: map,
          position: place.geometry.location
        });
      google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
  });
  }
            
            map.setCenter(pos);
          }, function() {
            handleNoGeolocation(true);
          });
        } else {
          // Browser doesn't support Geolocation
          handleNoGeolocation(false);
        }
      }

      function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
          var content = 'Error: The Geolocation service failed.';
        } else {
          var content = 'Error: Your browser doesn\'t support geolocation.';
        }

        var options = {
          map: map,
          position: new google.maps.LatLng(60, 105),
          content: content
        };

        var infowindow = new google.maps.InfoWindow(options);
        map.setCenter(options.position);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>