如何将Maps JavaScript API获取的搜索框选中地点转换为LatLng/Place对象？

嘿，刚好我经常处理这类Google Maps API的场景，其实不用太复杂的转换——Google的API设计本身就做了很好的兼容，分几种常见情况给你拆解：

1. 用Autocomplete组件捕获地点（最常用场景） #

如果你是用google.maps.places.Autocomplete组件让用户选地点的，那你拿到的place对象直接就能给Directions API用！

举个实际代码例子：

// 初始化搜索框的Autocomplete
const autocomplete = new google.maps.places.Autocomplete(
  document.getElementById('your-search-input'),
  { types: ['geocode'] } // 可选，限制搜索类型
);

// 监听用户选中地点的事件
autocomplete.addListener('place_changed', () => {
  const selectedPlace = autocomplete.getPlace();

  // 情况A：直接把整个Place对象传给Directions API
  const directionsReq = {
    origin: selectedPlace, // 直接用，没问题！
    destination: '1600 Amphitheatre Parkway, Mountain View',
    travelMode: google.maps.TravelMode.DRIVING
  };

  // 情况B：如果你单独需要LatLng对象，直接提取就行
  const selectedLatLng = selectedPlace.geometry.location;
  // 然后可以这样用：origin: selectedLatLng
});

为什么能直接用？因为Autocomplete返回的place对象自带geometry.location（标准LatLng类型）和place_id，这俩都是Directions API接受的参数类型。

2. 手动用PlacesService搜索得到的结果 #

如果你是自己调用PlacesService.search获取的搜索结果，每个结果项也是标准的Place对象，用法和上面一样：

const placesService = new google.maps.places.PlacesService(yourMapInstance);
placesService.search({
  query: '用户输入的关键词',
  bounds: yourMapInstance.getBounds()
}, (results, status) => {
  if (status === google.maps.places.PlacesServiceStatus.OK) {
    const pickedPlace = results[0]; // 假设选第一个结果
    // 直接传给Directions API
    const directionsReq = {
      origin: pickedPlace,
      destination: '目标地址',
      travelMode: google.maps.TravelMode.WALKING
    };
    // 或者提取LatLng：const latLng = pickedPlace.geometry.location;
  }
});

3. 只有纯文本地址/名称的情况 #

万一你手里只有用户输入的纯文本（比如没用到Autocomplete，自己做的搜索框），那可以用Geocoding API转成LatLng，或者直接把文本传给Directions API（不过转成LatLng更可靠，避免歧义）：

const geocoder = new google.maps.Geocoder();
geocoder.geocode({ address: '用户输入的地址或名称' }, (results, status) => {
  if (status === google.maps.GeocoderStatus.OK) {
    const targetLatLng = results[0].geometry.location;
    // 传给Directions API
    const directionsReq = {
      origin: targetLatLng,
      destination: '...',
      travelMode: 'DRIVING'
    };
  }
});

几个要注意的小细节 #

• 检查geometry是否存在：有时候Autocomplete或PlacesService的结果可能不包含geometry信息（比如某些特殊地点类型），这时候你可以调用PlacesService.getDetails，通过place_id获取完整的Place对象。
• Directions API的参数灵活性：它接受的origin/destination可以是文本地址、LatLng对象、带placeId的对象（比如{placeId: 'ChIJ...'}），或者完整的Place对象，所以不用硬转成某一种，选最方便的就行。

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