0
を反応させる「クレート反応するアプリ」コマンドを経由してモジュールを反応させます。今私は私の連絡先のページにGoogleマップを表示したい。 ============================ショーグーグルマップは、私がインストールされているJS
- ページの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>
だから、私の公共/ 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>
私はこれを整理するのに役立ちます。
なぜこの男を行う？、反応に使用jqueryのをいけないしてくださいindex.htmlを自身 –
でそのスクリプトを指定してください： あなたは手元のコンポーネントで使用することができます –
@ShubhamKhatri、 'index.html'で指定されていません。 – Atul