leaflet集成google map搜索、支持显示菜单功能的使用及demo

在《leaflet集成google map搜索、支持显示菜单功能（支持回车选中第一项，自定义菜单）》中简单介绍了为实现支持回车选中第一项，自定义菜单功能对Leaflet-gplaces-autocomplete的修改和React封装，并没有提及如何使用。本篇会通过我实现的一个demo介绍如何使用。

• demo

在线地址：https://smk108.github.io/react-leaflet-google-places-searchbox/dist/index.html

效果如下：

• npm包及使用

npm包地址：https://www.npmjs.com/package/react-leaflet-google-places-searchbox

github地址：https://github.com/smk108/react-leaflet-google-places-searchbox

上述地址readme详细介绍了如何使用及api，截图如下：

• 注意事项

使用react-leaflet-google-places-searchbox必须保证加载了https://maps.googleapis.com/maps/api/js?key=<key>&libraries=places，且把key替换成真实可用的google api key，example代码中没有在index.html文件加载该api，是因为使用了react-leaflet-google里的加载googleapi功能，用法如下：

import {GoogleLayer} from 'react-leaflet-google';
const googlekey = ''; // google api key
<GoogleLayer
  key={`maptype_${this.props.leafletStore.maptype}`}
  googlekey={googlekey}
  libraries={['geometry', 'drawing', 'places']}
  maptype={this.props.leafletStore.maptype}
/>