Question

我一直在使用Google Maps API，特别是街景视图。我的目标是在街景模式下弹出一个模式。我将共享用于模态的代码，但是它们位于项目的两个单独的文件夹中。有人知道后台运行功能时如何弹出模式吗？（顺便说一句，我正在使用REACT的Modal组件）

我尝试先调用包含Google Maps API的组件“ GoogleMApsStreetView”，再调用“ Modal”组件

<div>
        {<GoogleMapsStreetView />}
        <Modal
        className="Modal"
        className="content-Modal"

但是发生的是，模式在背景中仅显示街景，但仅显示了毫秒，当模式消失时，只有街景出现在屏幕上。

import React, { Component } from "react";
import Modal from 'react-modal';
import GoogleMapsStreetView from "./GoogleMapsStreetView.js";


export default class LevelOne extends Component {

  constructor() {
    super();

    this.state = {
      modalIsOpen: true
    };
  }
    /*this.openModal = this.openModal.bind(this);
    this.afterOpenModal = this.afterOpenModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal() {
    this.setState({modalIsOpen: true});
  }

  afterOpenModal() {
    // to change text color in modal
    //this.subtitle.style.color = '#000000';
  }

  closeModal() {
    this.setState({modalIsOpen: false});
  }*/

  render() {

    return (
      <div>
        {<GoogleMapsStreetView />}
        <Modal
        className="Modal"
        className="content-Modal"

          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          contentLabel="Example Modal"
        >


          <center><h2 style = {{color: '#444444'}}>Hello Jane!</h2></center>
          <center><button onClick={this.closeModal}>close</button></center>
        </Modal>
      </div>

    );
  }
}

如何在后台运行Google Streetview时弹出模式对话框

0 个答案: