Предоставление карты Google без ссылки-google-map

Question

Кто-нибудь смог отобразить карту google с помощью React и не использовать плагин action-google-map? Я пробую что-то вроде этого:

var MapTab = React.createClass({ 

render: function() { 

    return <div className="map-container"> 
     <div id='map' ></div> 
    </div> 

}, 

componentDidMount: function(){ 

     console.log("Hello") 



window.onload = function(){ 
    (function initMap() { 
     var markers = []; 
     var geocoder = new google.maps.Geocoder(); 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 12, 
      center: {lat: 37.7749300, lng: -122.4194200} 
     }); 
    })(); 
} 


}// end of cdm; 
}); 
module.exports = MapTab; 

Ничего не пробовал. Я также попытался захватить карту, используя ссылки, но это тоже не отображало карту. Я также разместил скрипт google maps в заголовке (с ключом) и подтвердил, что ключ действителен в проекте vanilla js.

Answer 1

избавиться от window.onload. К моменту, когда componentDidMount метод называется окном, уже загружено, поэтому ваша функция initMap() никогда не срабатывает.

Answer 2

Кажется, что вы еще не знакомы с жизненным циклом React Component.

https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle

этом: http://busypeoples.github.io/post/react-component-lifecycle/ (это имеет таблицу порядке, в котором РЕАКТ методы выполняются)

На самом деле, в componentDidMount() («DID-крепление» означает, что элемент имеет уже есть на странице, так что вы можете начать обязательные события к нему)

Реагировать идея Компонентный интересна, так что нам не нужно использовать «window.onload()» JavaScript в или JQuery в "$ (документ) .ready() "

Таким образом, ваш код может быть изменен следующим образом:

render: function() { 
    return <div className="map-container"> 
     <div id='map' ></div> 
    </div> 
}, 

componentDidMount: function(){ 

    console.log("Hello") 

    var markers = []; 
    var geocoder = new google.maps.Geocoder(); 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 12, 
     center: {lat: 37.7749300, lng: -122.4194200} 
    }); 

}// end of cdm; 

PS: Кроме того, для того, чтобы сделать карту появится, вам нужен стиль карта-контейнер и карта правильно (для чего нужна высота в пикселе, в вашем случае с шириной «0 пикселей», возможно, вам тоже нужно поместить ширину - либо в пикселях, либо на 100%). Не стесняйтесь стилизовать их, хотя !

Answer 3

С компонентомDidMount вы знаете, что вы загрузили контейнер контейнера, но вам не гарантировано, что внешние карты api уже загружены. Google предоставляет вам возможность дать функцию обратного вызова (initMap() в своих примерах).

https://maps.googleapis.com/maps/api/js?key= & обратного вызова = initMap

Теперь вы можете действовать следующим образом, После того как карта компонент сделал крепление вы можете:

1. window.initMap = this.initMap сделать initMap от реакции для Google карты для обратного вызова.
2. загрузите карты Google JS с помощью параметра initMap.

3. В этом файле.initMap в вашем компоненте вы можете делать свои картографические материалы, потому что теперь вы знаете, что ваш контейнер и API Google загружены.

   const React = require('react') 
   const PropTypes = require('prop-types') 
   import Reflux from 'reflux' 
   const Radium = require('radium') 
   
   class Map extends Reflux.Component { 
   
       constructor(props) { 
        super(props) 
        this.loadJS = this.loadJS.bind(this) 
        this.initMap = this.initMap.bind(this) 
       } 
   
       componentDidMount() { 
        window.initMap = this.initMap; 
        if (typeof google === 'object' && typeof google.maps === 'object') { 
         this.initMap() 
        } else { 
         this.loadJS('https://maps.googleapis.com/maps/api/js?key=<API_KEY>&callback=initMap') 
        } 
       } 
   
       // https://github.com/filamentgroup/loadJS/blob/master/loadJS.js 
       loadJS(src) { 
        var ref = window.document.getElementsByTagName("script")[0]; 
        var script = window.document.createElement("script"); 
        script.src = src; 
        script.async = true; 
        ref.parentNode.insertBefore(script, ref); 
       } 
   
       initMap() { 
        var map = new google.maps.Map(this.refs.map, { 
         center: {lat: -34.397, lng: 150.644}, 
         zoom: 8 
        }) 
       } 
   
       render() { 
        return (<div ref='map'></div>) 
       } 
   
   } 
   module.exports = Radium(Map)