如何在含地点搜索功能的Google Map代码中启用Geolocation？

Hey there! I totally get that merging geolocation into your existing map code can feel a bit overwhelming when you're new to JavaScript—let's walk through this together to get it working smoothly.

Key Prerequisites First #

• Make sure you've enabled the Geolocation API in your Google Cloud Console (alongside the Places API you're already using).
• Most modern browsers require geolocation to work over HTTPS (localhost is okay for testing).
• Users will see a browser prompt asking for permission to share their location—your code needs to handle both allowed and denied cases.

Modified Full Code #

Here's your original code with geolocation integrated. I'll highlight the new parts below:

<input id="pac-input" class="controls" type="text" placeholder="Enter a location">
<div id="map"></div>
<div id="infowindow-content">
  <span id="place-name" class="title"></span><br>
  Place ID <span id="place-id"></span><br>
  <span id="place-address"></span>
</div>
<!-- Replace with your own API key -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap" async defer></script>

<script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    // We'll set the center dynamically, so start with a temporary default
    center: {lat: 48.137260, lng: 11.574850},
    zoom: 13
  });

  // --- New Geolocation Logic Starts Here ---
  // Check if the browser supports geolocation
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      // Success callback: use user's location
      function(position) {
        var userLocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        // Center the map on the user's location
        map.setCenter(userLocation);
        // Optional: Add a marker for the user's position
        var userMarker = new google.maps.Marker({
          position: userLocation,
          map: map,
          title: "Your Location"
        });
      },
      // Error callback: stick with the default center
      function(error) {
        console.log("Geolocation permission denied or unavailable. Using default location.");
        // You can also show a message to the user here if needed
      },
      // Optional options: set timeout and enable high accuracy
      {
        enableHighAccuracy: true,
        timeout: 5000,
        maximumAge: 0
      }
    );
  } else {
    // Browser doesn't support geolocation
    console.log("Geolocation is not supported by your browser.");
  }
  // --- Geolocation Logic Ends Here ---

  // Keep your existing Place Autocomplete code
  var input = document.getElementById('pac-input');
  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  var infowindow = new google.maps.InfoWindow();
  var infowindowContent = document.getElementById('infowindow-content');
  infowindow.setContent(infowindowContent);

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

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

  autocomplete.addListener('place_changed', function() {
    infowindow.close();
    var place = autocomplete.getPlace();

    if (!place.geometry) {
      return;
    }

    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }

    marker.setPlace({
      placeId: place.place_id,
      location: place.geometry.location
    });
    marker.setVisible(true);

    infowindowContent.children['place-name'].textContent = place.name;
    infowindowContent.children['place-id'].textContent = place.place_id;
    infowindowContent.children['place-address'].textContent = place.formatted_address;
    infowindow.open(map, marker);
  });
}
</script>

What Changed? #

1. Geolocation Check: We first check if the browser supports navigator.geolocation (most modern ones do).
2. Get User Position: Using getCurrentPosition, we request the user's location:
   • On success: We center the map on their coordinates and optionally add a marker for their location.
   • On error (permission denied, location unavailable): We fall back to your original default location and log a message.
3. Preserved Autocomplete: All your existing place search and marker logic stays intact—users can still search for locations, and the map will update accordingly.

Quick Notes #

• Don't forget to replace YOUR_API_KEY with your actual Google Maps API key.
• If you don't want the user location marker, just remove the userMarker code block.
• You can customize the error handling to show a user-friendly message instead of just logging to the console.

内容的提问来源于stack exchange，提问作者arabtornado