使用地图服务会有搜索地点的需求, 在使用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>();
