Map API视口经纬度与实际坐标不符问题咨询

Let's break down the core issue first: you're mixing up two entirely different concepts here—viewport bounds and the precise coordinates of a place. That's why you're seeing the discrepancy.

What is a viewport, anyway? #

A viewport (from the Google Places API) is a rectangular boundary box that defines the area on the map that should be displayed to properly frame the place you searched for. For example, when you search for the Empire State Building, the viewport covers the entire block (or a slightly larger area) around the building, not just the exact point of the building itself.

The values you're seeing—40.746983/40.749681 (latitude range) and -73.983858/-73.986556 (longitude range)—are the southwest and northeast corners of this boundary box, not the precise coordinates of the building. That's why they don't match the exact 40.748817, -73.985428 you expect.

Your code has two key issues #

1. You're relying on private API properties
   The b.b and f.f properties you're accessing are internal, private properties of the Google Maps API. Google can (and does) rename these without warning (they've changed from b/f to lat/lng in newer versions, for example). Never use these—stick to the public API methods instead.

2. You're grabbing the viewport when you want the precise location
   If you need the exact coordinates of the place (like the Empire State Building's entrance), you don't need the viewport at all. The Place object already gives you this directly via place.geometry.location, which is a google.maps.LatLng object with proper lat() and lng() methods.

Fixed code example #

Here's how to adjust your places_changed listener to get both the precise location and the viewport bounds correctly:

google.maps.event.addDomListener(searchBox, 'places_changed', function(event) { 
  var places = searchBox.getPlaces(); 
  var bounds = new google.maps.LatLngBounds(); 

  for (var i = 0; i < places.length; i++) { 
    var place = places[i];
    if (!place.geometry) continue; // Skip places without geometry data

    // Get the PRECISE location of the place
    var preciseLat = place.geometry.location.lat();
    var preciseLng = place.geometry.location.lng();
    console.log("Precise coordinates:", preciseLat, preciseLng); // This should match your expected values

    // Get the viewport bounds correctly (using public methods)
    if (place.geometry.viewport) {
      var sw = place.geometry.viewport.getSouthWest();
      var ne = place.geometry.viewport.getNorthEast();
      console.log("Viewport bounds:");
      console.log("Southwest:", sw.lat(), sw.lng());
      console.log("Northeast:", ne.lat(), ne.lng());
    }

    bounds.extend(place.geometry.location); 
    marker.setPosition(place.geometry.location); 
  }
});

Why your map click code works but the Places code didn't #

When you click the map, event.latLng is a direct google.maps.LatLng object for that clicked point. But in the Places response, the precise location lives at place.geometry.location—not a top-level latLng property. That's why you got the "latLng undefined" error when trying to access it directly on the Place object.

Key takeaways #

• Viewport bounds are meant to frame the place on a map, not give you an exact point—differences from the precise coordinates are intentional.
• Always use the public Google Maps API methods (like lat(), lng(), getSouthWest()) instead of internal properties like b or f.
• To get the exact coordinates of a place from the Places API, use place.geometry.location.lat() and place.geometry.location.lng().

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