Javascript 如何在React应用程序中实现Google地图搜索框_Javascript_Reactjs_Google Maps_Google Map React

Javascript 如何在React应用程序中实现Google地图搜索框

javascript reactjs google-maps

Javascript 如何在React应用程序中实现Google地图搜索框,javascript,reactjs,google-maps,google-map-react,Javascript,Reactjs,Google Maps,Google Map React,我不熟悉React和谷歌地图。我正在使用将Google地图集成到我的React应用程序中。我能够成功加载地图并添加标记但我在尝试添加搜索框时出错。我遵循了这里的文档和问题线索。但我还是发现了错误。这个代码有什么问题这是我的密码 App.js import React，{Component}来自'React'；从“谷歌地图反应”导入谷歌地图反应；导入“/App.css”；从“./Driver”导入驱动程序；从“./旅客”进口旅客；从“./SearchBox”导入搜索框；类应用程序

我不熟悉React和谷歌地图。我正在使用将Google地图集成到我的React应用程序中。我能够成功加载地图并添加标记

但我在尝试添加搜索框时出错。我遵循了这里的文档和问题线索。但我还是发现了错误。这个代码有什么问题

这是我的密码

App.js

import React，{Component}来自'React'；
从“谷歌地图反应”导入谷歌地图反应；
导入“/App.css”；
从“./Driver”导入驱动程序；
从“./旅客”进口旅客；
从“./SearchBox”导入搜索框；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
阿皮雷迪：错，
map:null，
谷歌地图：空
};
}
静态defaultProps={
中心：{
拉脱维亚：6.92，
液化天然气：79.86
},
缩放：15，
};
handleApiLoaded=（地图，地图）=>{
//使用贴图和贴图对象
如果（映射和映射）{
这是我的国家({
阿皮雷迪：没错，
地图：地图，
谷歌地图：地图
});
}
};
render（{apiredy，googlemaps，map}=this.state）{
返回(
//重要提示！始终明确设置容器高度
this.handleApiLoaded（map，map）}
>
{apiredy&&（）}
)
}
}
导出默认应用程序

SearchBox.js

从“React”导入React；
从“react dom”导入react dom
从“道具类型”导入道具类型
导出默认类SearchBox扩展React.Component{
静态类型={
占位符：PropTypes.string，
onPlacesChanged:PropTypes.func
}
render（）{
回来
}
onPlacesChanged=（）=>{
如果（此.props.onPlacesChanged）{
this.props.onPlacesChanged（this.searchBox.getPlaces（））；
}
}
componentDidMount（）{
var input=ReactDOM.findDOMNode（this.refs.input）；
//eslint禁用下一行无未定义
this.searchBox=新的googlemaps.places.searchBox（输入）；
this.searchBox.addListener（'places\u changed'，this.onPlacesChanged）；
}
组件将卸载（）{
this.searchBox.removeListener（'places_changed'，this.onPlacesChanged）；
}
}
//eslint禁用下一行没有未使用的表达式
//eslint禁用下一行无孤立块
{/*  */}

我粘贴了完整的代码，因为我不确定哪里出错了。

我在代码中找到了问题所在。我犯了一个愚蠢的错误。加载google maps api不应该像我上面所做的那样在SearchBox.js中完成。它应该加载到inde.html中，如下所示。它解决了我的问题

 <body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDjrIzc3Vm83jIb8C-SQhU7JJ5Q-jCJGWg&libraries=places,geometry"></script>
</body>


您需要启用JavaScript才能运行此应用程序。

googlemap-react-prop

bootstrapURLKeys

提供了避免将脚本直接插入HTML的可能性

<GoogleMapReact
    bootstrapURLKeys={{
        key: 'XXXXXXXXXXXXXXXXXXX',
        libraries: 'places'
    }}
......
/>

请阅读-总结是，这不是一个理想的方式来解决志愿者，可能会适得其反获得答案。请不要将此添加到您的问题中。您在何处/如何加载位置库？请提供允许复制此问题的副本。我们还删除了“请帮助我”和“谢谢”及其所有变体。一般来说，这里首选技术写作

：-）

。您的代码片段不是可执行的，它们应该标记为代码（已修复）。您能显示调用SearchBox的父组件吗？我想看看有关onPlacesChanged的详细信息

const SearchBox = ({ maps, onPlacesChanged, placeholder }) => {
    const input = useRef(null);
    const searchBox = useRef(null);

    const handleOnPlacesChanged = useCallback(() => {
        if (onPlacesChanged) {
            onPlacesChanged(searchBox.current.getPlaces());
        }
    }, [onPlacesChanged, searchBox]);

    useEffect(() => {
        if (!searchBox.current && maps) {
            searchBox.current = new maps.places.SearchBox(input.current);
            searchBox.current.addListener('places_changed', handleOnPlacesChanged);
        }

        return () => {
            if (maps) {
                searchBox.current = null;
                maps.event.clearInstanceListeners(searchBox);
            }
        };
    }, [maps, handleOnPlacesChanged]);

    return <input ref={input} placeholder={placeholder} type="text" />;
};