2017-08-30 57 views
0

我想在反應中實現下面的代碼。我在哪裏可以使用「腳本」標記,以及如何繪製地圖。是否有任何內置庫顯示在地圖上如何在反應中使用google map api

<div id="map"></div> 
<script> 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 3, 
     center: {lat: 0, lng: -180}, 
     mapTypeId: 'terrain' 
    }); 

    var flightPlanCoordinates = [ 
     {lat: 37.772, lng: -122.214}, 
     {lat: 21.291, lng: -157.821}, 
     {lat: -18.142, lng: 178.431}, 
     {lat: -27.467, lng: 153.027} 
    ]; 
    var flightPath = new google.maps.Polyline({ 
     path: flightPlanCoordinates, 
     geodesic: true, 
     strokeColor: '#FF0000', 
     strokeOpacity: 1.0, 
     strokeWeight: 2 
    }); 

    flightPath.setMap(map); 
    } 
</script> 
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=initMap"> 
</script> 

+0

我會嘗試一個圖書館,https://github.com/tomchentw/react-google-maps – TimCodes

+0

請檢查我的答案:https://stackoverflow.com /問題/ 45917552 /發行功能於一體,谷歌地圖,在反應的應用程式/ 45920742#45920742。 –

回答

0

路線我建議你使用由primefaces提供primereact地圖組件,它的功能和易於使用。下面是例子從他們採取:documentation

import {GMap} from 'primereact/components/gmap/GMap'; 

onMapReady(event) { 
    this.setState({ 
     overlays: [ 
      new google.maps.Marker({position: {lat: 36.879466, lng: 30.667648}, title:"Konyaalti"}), 
      new google.maps.Marker({position: {lat: 36.883707, lng: 30.689216}, title:"Ataturk Park"}), 
      new google.maps.Circle({center: {lat: 36.90707, lng: 30.56533}, fillColor: '#1976D2', fillOpacity: 0.35, strokeWeight: 1, radius: 1500}), 
      new google.maps.Polyline({path: [{lat: 36.86149, lng: 30.63743},{lat: 36.86341, lng: 30.72463}], geodesic: true, strokeColor: '#FF0000', strokeOpacity: 0.5, strokeWeight: 2}) 
     ] 
    }) 
} 

<GMap overlays={this.state.overlays} options={options} style={{width: '100%', minHeight: '320px'}} onMapReady={this.onMapReady} 
        onMapClick={this.onMapClick} onOverlayClick={this.onOverlayClick} onOverlayDragEnd={this.handleDragEnd} /> 
相關問題