Попытка получить булавку для отображения на карте с помощью GoogleMaps Api (ReactJS)

Я пытался заставить этот код работать и сталкивался с несколькими проблемами. Я использую модуль узла: «google-maps-react». Основная ошибка заключается в том, что невозможно прочитать свойство «setMap». По какой-то причине маркеры не отображаются на карте.Попытка получить булавку для отображения на карте с помощью GoogleMaps Api (ReactJS)

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);

источник

2017-02-17 Emil Juboori

Вы вводите код точно так же, как будто у вас есть это выше? Если это так, вы должны получить и затем ввести ключ google go. Вы получаете ключ от google developers console.

источник

2017-02-18 00:17:32

Я получил ключ и вставил его правильно, я просто удалить его, так как это мои компании. –

Его не совсем то, что вы искали с точки зрения кода, но оно выполняет свою работу и делает это довольно красиво. Я не смог найти ошибку в вашем коде, но обнаружил довольно много информации, которая указывает на проблему с последним API Google и реагирует через node.js. Поэтому я натолкнулся и использовал эту гораздо более простую версию, надеясь, что она будет соответствовать вашим потребностям. Я только добавил 4 из 8 пунктов, но вы можете добавить оставшиеся 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>

источник

2017-02-18 06:43:56

Попытка получить булавку для отображения на карте с помощью GoogleMaps Api (ReactJS)

ответ

Смежные вопросы