Versucht, eine Karte mit GoogleMaps Api (ReactJS) auf der Karte zu sehen

Ich habe versucht, diesen Code zum Laufen zu bringen und habe ein paar Probleme bekommen. Ich benutze das Knotenmodul: 'google-maps-react'. Der Hauptfehler ist, kann die Eigenschaft von 'setMap' nicht lesen. Aus irgendeinem Grund werden die Markierungen nicht auf der Karte angezeigt.Versucht, eine Karte mit GoogleMaps Api (ReactJS) auf der Karte zu sehen

import React, { PropTypes } from 'react'; 
import {GoogleApiWrapper, Marker, Map} from 'google-maps-react'; 

class Layout extends React.Component { 

    render() { 



    return (
     <div ref="map"> 
     <Map google={this.props.google} 
     style={{width: '100%', height: '100%', position: 'relative'}} 
     className={'map'} 
     zoom={10} 
     initialCenter={{lat: 32.7157, lng: -117.1611}}> 
     <Marker 
      name={'EMS'} 
      position={{lat: 32.575258, lng: -117.061613}} /> 
     <Marker 
      name={'FIRE'} 
      position={{lat: 32.958337, lng: -117.096112}} /> 
     <Marker 
      name={'HAZMAT'} 
      position={{lat: 32.728588, lng: -117.100064}} /> 
     <Marker 
      name={'MVA'} 
      position={{lat: 32.556325, lng: -117.055856}} /> 
     <Marker 
      name={'FIRE'} 
      position={{lat: 32.691563, lng: -117.072024}} /> 
     <Marker 
      name={'EMS'} 
      position={{lat: 32.805941, lng: -117.219577}} /> 
     <Marker 
      name={'HAZMAT'} 
      position={{lat: 32.717516, lng: -117.164727}} /> 
     <Marker 
      name={'MVA'} 
      position={{lat: 32.715218, lng: -117.160156}} /> 
     </Map> 



     </div> 
    ) 
    } 
} 

export default GoogleApiWrapper({ 
    apiKey: 'AIzaSyB0P-Ql1Gdvu0baPK4xmQMchXxQoUk4YH8' 
})(Layout);

Quelle

2017-02-17 Emil Juboori

Geben Sie den Code genau so ein, wie Sie ihn oben haben? In diesem Fall müssen Sie den Google API-Schlüssel anfordern und eingeben. Sie erhalten den Schlüssel von google developers console.

Quelle

2017-02-18 00:17:32

Ich habe einen Schlüssel erhalten hinzufügen und eingefügt es richtig, ich entfernt es nur, da es mein Unternehmen. –

Es ist nicht genau das, was Sie in Bezug auf Code suchten, aber es macht den Job fertig und macht es ganz nett. Ich konnte den Fehler in Ihrem Code nicht finden, bin aber auf einige Informationen gestoßen, die auf ein Problem mit der neuesten Google-API hinweisen und über node.js reagieren. Also bin ich auf diese viel einfachere Version gestoßen, in der Hoffnung, dass sie Ihren Bedürfnissen entspricht. Ich habe nur 4 der 8 Punkte, aber Sie können die verbleibende 4.

<!doctype html> 
 
<html><head> 
 
<meta charset="UTF-8"> 
 
\t <title>Multiple Map Points</title> 
 
    
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
 
    <title>Google Maps Multiple Markers</title> 
 
    <script src="http://maps.google.com/maps/api/js?sensor=false" 
 
      type="text/javascript"></script> 
 
</head> 
 
<body> 
 
    <div id="map" style="width: 800px; height: 800px;" position="relative;"></div> 
 

 
    <script type="text/javascript"> 
 
    var locations = [ 
 
     ['EMS', 32.575258, -117.061613, 4], 
 
     ['FIRE', 32.958337, -117.096112, 3], 
 
     ['HAZMAT', 32.728588, -117.100064, 2], 
 
\t  ['MVA', 32.556325, -117.055856, 1] 
 
    ]; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
     zoom: 10, 
 
     center: new google.maps.LatLng(32.7157, -117.1611), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    var infowindow = new google.maps.InfoWindow(); 
 

 
    var marker, i; 
 

 
    for (i = 0; i < locations.length; i++) { 
 
     marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(locations[i][1], locations[i][2]), 
 
     map: map 
 
     }); 
 

 
     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
     return function() { 
 
      infowindow.setContent(locations[i][0]); 
 
      infowindow.open(map, marker); 
 
     } 
 
     })(marker, i)); 
 
    } 
 
    </script> 
 

 

 
</body> 
 
</html>

Quelle

2017-02-18 06:43:56

Versucht, eine Karte mit GoogleMaps Api (ReactJS) auf der Karte zu sehen

Antwort

Verwandte Themen