自定义Google map autocomplete

使用地图服务会有搜索地点的需求, 在使用Google map基于Google map自带的Place Autocomplete, 也就是我们常见的Input框进行搜索时, 发现每当输入的文字改变就会发起请求,并且文档中并不支持节流, 要知道这个服务是收费的, 这就会造成浪费.

Google了这个问题, 发现好多人有此需求, 并且给Google提了Feature Request, 但是貌似并没有什么回应.

最后在翻阅文档以及Stack Overflow之后, 我发现可以用Retrieving Autocomplete Predictions和Place Details来实现自定义搜索功能.

具体实现逻辑请访问在线DEMO.

如果你也有此需求, 不要直接copy代码, 里面可优化的地方有

import React, { useRef, useState, useEffect } from "react"; 

建议把marker, map, autocompleteService, placeService 这些统一放到一个对象中, 看起来比较干净.

type MapContext = {
  map: google.maps.Map;
  placesService: google.maps.places.PlacesService;
  autocompleteService: google.maps.places.AutocompleteService;
  infoWindow: google.maps.InfoWindow;
  latlng: google.maps.LatLngLiteral;
};

const [mapContext, setMapContext] = useState<MapContext>();