Большое спасибо thinhvo0108 за то, что вы показали, как это можно реализовать с помощью google-map-реакции. Его ответ можно найти здесь.

Однако, хотя это и решает мою проблему, мой оригинальный вопрос остается. Представьте, что не был создан компонент реагирования, который избавил бы от хлопот с использованием <script>, как бы я затем реализовал Google Карты, используя сценарии, как показано в вопросе ниже. Другими словами, как можно реализовать чистые сценарии JavaScript в форме <script>, используя React (ES6 / ES7)

Я работаю над добавлением карт Google в свое веб-приложение. Я нашел этот отличный генератор здесь, и он дал мне этот код:

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Google Maps</title>
</head>
<body>
    <div id="map_canvas" style="width:500px;height:300px;"></div>

    <script src="https://maps.google.com/maps/api/js"></script>
    <script>
        window.onload = function() {
            initialize();
        };

        function initialize() {
            var myLatlng = new google.maps.LatLng(50.3419169876, 5.60793614352);

            var myOptions = {
                zoom: 16,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var infowindow = new google.maps.InfoWindow({
                content: "Someplace"
            });

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                title: "Someplace"
            });

            google.maps.event.addListener(marker, 'click', function() {
                infowindow.open(map,marker);
            });
        }
    </script>
</body>
</html>

Поэтому я беру сценарии и вставляю их в свой файл index.html. Экземпляр карт Google должен быть размещен на странице контактов. Очевидно, когда я перезагружаю страницу в / contact, я быстро загружаю карту. Однако, поскольку окно находится вне области действия, всякий раз, когда я просто перемещаюсь с помощью навигационной панели, оно не работает.

У меня есть этот компонент GoogleMaps.js, который содержит только div id map_canvas:

import React from 'react'

const GoogleMapsInstance = () => (
  <div id="map_canvas" style={{ width: '100%', height: '400px', overflow: 'hidden' }} />
)
export default GoogleMapsInstance

Мне было интересно, как я могу получить сценарии внутри этого компонента, чтобы я мог вызывать сценарии в функции componentDidMount или что-то в этом роде.

Я также открыт для любого другого типа решения, которое дает мне быструю загрузку (без iframe) карт Google :)

Спасибо за вашу помощь!

2
Cornelius 25 Апр 2017 в 00:29

2 ответа

Лучший ответ

Этот способ не сложный, для вашего предпочтения я только вчера выложил и все работает!

Реализация карт Google с реагировать

Если вы хотите добавить этот элемент карты в свой компонент или наоборот, пожалуйста, дайте мне знать!

РЕДАКТИРОВАННАЯ ВЕРСИЯ НИЖЕ (НА ОСНОВЕ ВАШИХ НУЖД):

Вы можете просто следовать этому руководству, чтобы карта появилась на вашей странице контактов:

Сначала установите необходимые библиотеки:

npm install --save google-map-react
npm install --save prop-types

Затем вы можете скопировать все это ниже:

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class MyClass extends Component {
  constructor(props){
    super(props);

  }

  render() {
    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        style={{width: '500px', height: '300px'}}
      >
        <AnyReactComponent
          lat={50.3419169876}
          lng={5.60793614352}
          text={'MY SHOP'}
        />
      </GoogleMapReact>
    );
  }
}
MyClass.defaultProps = {
  center: {lat: 50.34, lng: 5.61},
  zoom: 16
};

export default MyClass;

Не стесняйтесь редактировать значение LatLng и / или текст «МОЙ МАГАЗИН», я полагаю, что вы также можете использовать какое-то нестандартное изображение PNG вместо text-element, чтобы показать предпочтительный пин-код карты, представляющий ваш магазин

2
Community 23 Май 2017 в 10:31

Простой поиск в гугле;)

Попробуйте: https://github.com/tomchentw/react-google-maps

Демонстрация: https://tomchentw.github.io/react-google-maps/

0
pirs 24 Апр 2017 в 23:34
43598029