Google 地图：通过地理编码器将地址转换为坐标后获取路线

Question

我得到了 Google 可与本地上下文一起使用的地图 from @eocodezip，但无法从弹出的附近位置启用路线。

这是我正在使用的代码。似乎“directionsOptions: { origin: center }”运行得太晚了，但我无法将其向上移动，因为 'center' 直到稍后才定义。有什么方法可以更早地设置中心吗？至少我认为这是问题所在。

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction",
"bar", "cafe", "book_store", "convenience_store", "hospital"],
    maxPlaceCount: 24,
  });
  
  map = localContextMapView.map;
  let geocoder = new google.maps.Geocoder();
  geocoder.geocode({ address: "25325 Main St, Newhall, CA, USA" }, (results, status) => {
    if (status === "OK") {
      const center = results[0].geometry.location;
      map.setCenter(center);
  new google.maps.Marker({ position: center, map: map});
  map.setOptions({
    directionsOptions: { origin: center },
    center: center,
    zoom: 14,
  });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Local Context Basic</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

Answer 1

google.maps.Map 没有 DirectionsOptions 属性。请参考docs。您需要将其设置为 localContextMapView:

localContextMapView.directionsOptions = {
  origin: center
};

也就是说，使用您提供的代码，如果地理编码器失败，您将根本看不到地图。这是预期的行为吗？

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction",
      "bar", "cafe", "book_store", "convenience_store", "hospital"
    ],
    maxPlaceCount: 24,
  });

  map = localContextMapView.map;
  let geocoder = new google.maps.Geocoder();
  
  geocoder.geocode({
    address: "25325 Main St, Newhall, CA, USA"
  }, (results, status) => {
    if (status === "OK") {
    
      const center = results[0].geometry.location;
      
      map.setOptions({
        center: center,
        zoom: 14
      });
      
      new google.maps.Marker({
        position: center,
        map: map
      });

      localContextMapView.directionsOptions = {
        origin: center
      };
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

#map {
  height: 400px;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 400px;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Local Context Basic</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

如果改为设置默认中心和缩放，并在地理编码器成功时对其进行调整（同时在本地上下文地图上设置新 locationRestriction），您将始终显示地图。

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction",
      "bar", "cafe", "book_store", "convenience_store", "hospital"
    ],
    maxPlaceCount: 24,
  });

  map = localContextMapView.map;
  
  // Update localContext when user drags the map
  map.addListener('dragend', function() {
    localContextMapView.locationRestriction = map.getBounds();
  });
  
  // Set default center & zoom somewhere over NY
  map.setOptions({
    center: new google.maps.LatLng(40.61,-73.97),
    zoom: 10
  });
  
  let geocoder = new google.maps.Geocoder();
  
  geocoder.geocode({
    address: "25325 Main St, Newhall, CA, USA"
  }, (results, status) => {
    if (status === "OK") {
    
      const center = results[0].geometry.location;
      
      // Set new center and zoom
      map.setOptions({
        center: center,
        zoom: 14
      });
      
      // Set the location restriction to the new map bounds
      localContextMapView.locationRestriction = map.getBounds();
      
      new google.maps.Marker({
        position: center,
        map: map
      });

      localContextMapView.directionsOptions = {
        origin: center
      };
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

#map {
  height: 400px;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 400px;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Local Context Basic</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

Google 地图：通过地理编码器将地址转换为坐标后获取路线

Google Maps: getting directions after converting address to coordinates through geocoder

javascript

google-maps

google-maps-api-3

google-geocoder