Question

我已经通过'crate-react-app'命令安装了react模块。现在我想在我的联系我们页面上显示谷歌地图。在页面html中，谷歌地图相关的js文件加载在文件末尾，如下所示 -

=====================================

    <!-- External JavaScripts
    ============================================= -->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/plugins.js"></script>

    <!-- Footer Scripts
    ============================================= -->
    <script type="text/javascript" src="js/functions.js"></script>

    <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDMxJ92oBkSnVNHFX3R8XhtYQPEgk1_IiI"></script>
    <script type="text/javascript" src="js/jquery.gmap.js"></script>

    <script type="text/javascript">

        $('#google-map').gMap({
            address: 'Melbourne, Australia',
            maptype: 'ROADMAP',
            zoom: 14,
            markers: [
                {
                    address: "Melbourne, Australia",
                    html: '<div style="width: 300px;"><h4 style="margin-bottom: 8px;">Hi, we\'re <span>Envato</span></h4><p class="nobottommargin">Our mission is to help people to <strong>earn</strong> and to <strong>learn</strong> online. We operate <strong>marketplaces</strong> where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn <strong>creative skills</strong>.</p></div>',
                    icon: {
                        image: "images/icons/map-icon-red.png",
                        iconsize: [32, 39],
                        iconanchor: [32,39]
                    }
                }
            ],
            doubleclickzoom: false,
            controls: {
                panControl: true,
                zoomControl: true,
                mapTypeControl: true,
                scaleControl: false,
                streetViewControl: false,
                overviewMapControl: false
            }
        });

    </script>

</body>
</html>

所以，在我的public / index.html中，我编写了这样的代码 -

===================

<body class="stretched">
        <div id="wrapper" class="clearfix"></div>   

        <div id="gotoTop" class="icon-angle-up"></div>
        <script type="text/javascript" src="%PUBLIC_URL%/js/jquery.js"></script>
        <script type="text/javascript" src="%PUBLIC_URL%/js/plugins.js"></script>
        <script type="text/javascript" src="%PUBLIC_URL%/js/functions.js"></script>
    </body>
</html>

在Contactus.js组件中 - 我已导入 - import $ from 'jquery';

并在componentDidMount()函数中添加$('#google-map').gMap({部分但不知道如何加载contactus.js组件中的文件 -

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDMxJ92oBkSnVNHFX3R8XhtYQPEgk1_IiI"></script> <script type="text/javascript" src="js/jquery.gmap.js"></script>

请帮我解决这个问题。

Answer 1

有人已经创建了GMaps组件用于反应，使用这个组件更容易，而不是试图自己集成它。

https://github.com/MicheleBertoli/react-gmaps

在反应中显示谷歌地图

1 个答案: