使用地圖服務(wù)會有搜索地點的需求, 在使用Google map基于Google map自帶的Place Autocomplete, 也就是我們常見的Input框進行搜索時, 發(fā)現(xiàn)每當輸入的文字改變就會發(fā)起請求,并且文檔中并不支持節(jié)流, 要知道這個服務(wù)是收費的, 這就會造成浪費.

Google了這個問題, 發(fā)現(xiàn)好多人有此需求, 并且給Google提了Feature Request, 但是貌似并沒有什么回應(yīng).

最后在翻閱文檔以及Stack Overflow之后, 我發(fā)現(xiàn)可以用Retrieving Autocomplete Predictions和Place Details來實現(xiàn)自定義搜索功能.

具體實現(xiàn)邏輯請訪問在線DEMO.

如果你也有此需求, 不要直接copy代碼, 里面可優(yōu)化的地方有

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

建議把marker, map, autocompleteService, placeService 這些統(tǒng)一放到一個對象中, 看起來比較干凈.

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>();