Question

尝试使用谷歌地图做出反应，处理问题。

首次创建Google地图组件时，它的效果非常好。

问题： - 但是，如果我访问其他某个页面，然后再次转到包含相同的地图页面，地图就会消失。它不会再次创建。

以下是组件： -

var React = require('react');

var MapLocation = React.createClass({
    getInitialState: function() {
        return {
            map : null
        };
    },
    componentDidMount: function () {
        var that = this;
        if(document.readyState !== "complete") {
            window.addEventListener("load", function () {
                that.createMap();
            })
        }
        else {
            that.createMap();
        }

    },

    createMap: function () {
        var lng = this.props.lng,
            lat = this.props.lat,
            mapCanvas = this.refs.map_canvas.getDOMNode(),
            mapOptions = {
                center: new google.maps.LatLng(lng, lat),
                zoom: 15,
                draggable: false,
                scrollwheel: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

        var map = new google.maps.Map(mapCanvas, mapOptions);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lng, lat),
            map: map,
            //icon: 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png'
        });

        this.setState({map: map});
    },

    enableScroll: function() {
        if(this.state.map) {
            this.state.map.set('scrollwheel', true);
            this.state.map.set('draggable', true);
        }
    },

    render: function () {
        var lat = this.props.lat,
            lng = this.props.lng;

        return (
            <div className='map-location'>
                <h3 className='hotel__sub-title'>
                    Location
                </h3>
                <div onClick={this.enableScroll} id="google-map" ref='map_canvas'></div>
            </div>
        )
    }
});

module.exports = MapLocation;

Answer 1

根据react documentation：

void componentDidMount（）在初始渲染发生后立即仅在客户端（不在服务器上）调用一次。

这意味着在打开其他页面并再次返回到地图页面后，将不会调用componentDidMount。我建议你使用一些谷歌地图反应模块：

祝你好运！

反应中重新创建谷歌地图

1 个答案: