Ich habe das reactive Modul über den 'crate-react-app' Befehl installiert. Jetzt möchte ich die Google Map auf meiner Kontaktseite anzeigen. In Seite html, google map Zusammenhang js Dateien am Ende der Datei zu laden, wie unten -google map in react js anzeigen
============================ =========
<!-- 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>
Also, in meinem öffentlichen/index.html, schreibe ich Code wie diesen -
============== =====
<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>
Und in Contactus.js Komponente - ich importiert haben - import $ from 'jquery';
und in componentDidMount() Funktion hinzugefügt $('#google-map').gMap({ Teil aber nicht wissen, wie unter Datei in contactus.js Komponente laden -
<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>
Bitte helfen Sie mir dieses aussortieren zu.
Versuchen Sie das Skript in der index.html selbst –
bitte nicht verwenden jquery in reagieren Angabe machen, warum dieser Mann? :( können Sie Komponenten verwenden –
@ShubhamKhatri, Angabe in 'index.html' funktioniert nicht. – Atul