谷歌地图：通过地理编码器将地址转换为坐标后获取方向答案

【问题标题】：Google Maps: getting directions after converting address to coordinates through geocoder谷歌地图：通过地理编码器将地址转换为坐标后获取方向
【发布时间】：2020-11-15 05:33:17
【问题描述】：

我通过 @eocodezip 让 Google 地图与本地上下文 thanks to an answer 一起工作，但无法从弹出的附近位置启用路线。

这是我正在使用的代码。似乎“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.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>

【问题讨论】：

标签： javascript google-maps google-maps-api-3 google-geocoder

【解决方案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>

【讨论】：

超级流畅。感谢您帮助我更好地了解发生了什么。当地图被拖动或缩放时，渲染的 Local Context 地图不显示额外的 POI 结果是否正常？
是的。当地理编码器成功时，您需要使用localContextMapView.locationRestriction = map.getBounds();，就像我在第二个 sn-p 中所做的那样，但在地图事件侦听器中执行此操作。查看编辑后的第二个 sn-p，我在 bounds_changed 事件中实现了它（即当您平移或缩放地图时）。
谢谢。这打开了相当多的功能。你知道是否有办法改变方向的上下文？（步行与开车）
现在，这个最新的迭代发生了一件有趣的事情，每次我点击一个导致边界改变的 POI 时，它都会关闭 placeDetails 窗口，并且事情可能会闪烁一段时间少量。你可以在这里看到它：jsfiddle.net/r6mb8f79
没有。只是表面上走路。是的，我没有看到这种行为。 bounds_changed 意味着每当地图边界发生变化时......不仅仅是通过用户交互。因此，我要说的唯一选择是使用dragend 事件，该事件将在用户平移地图时调整位置。不过，这不会对缩放更改做出反应……如果您实施 zoom_changed 事件，那么同样的问题将会发生。请记住，本地上下文映射仍处于测试阶段。您应该在此处报告问题并打开功能请求：issuetracker.google.com/issues?q=componentid:188853 代码已更新。