이 항목에 대해 사용자가 테마를 선택할 수 있도록 상호작용 지도를 보여 주고 싶습니다.이와 같은 드래그 지도는 사용자가 이동하고 축소할 수 있도록 하는 것으로 인터넷에서 가장 흔히 볼 수 있는 지도 중의 하나이다.래스터 블록을 가져오고 표준 비헤이비어를 UI로 구성하는 것은 쉽지 않을 수 있으므로 Maps JavaScript SDK를 사용하면 일관된 경험을 얻을 수 있습니다.
축소판 그림 중 하나를 클릭하면 대화형 맵이 다음과 같이 새 스티커 서비스 공급자로 업데이트됩니다.

기본반응

기본적인 단일 페이지 프로그램의 경우 CDN의 React와 HERE 라이브러리를 인덱스에 직접 포함할 수 있습니다.html.

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

SimpleHereMap라는 간단한 ES6 클래스를 만듭니다.componentDidMount() 방법은 React Component Lifecycle에 따라 render() 방법 이후에 실행된다. 이것은 우리가 HERE 자바스크립트Quick Start 코드를 그대로 포함할 수 있음을 의미한다.

const e = React.createElement;

class SimpleHereMap extends React.Component {
  componentDidMount() {
    var platform = new H.service.Platform({
        app_id: 'APP_ID_HERE',
        app_code: 'APP_CODE_HERE',
        })

    var layers = platform.createDefaultLayers();
    var map = new H.Map(
        document.getElementById('map'),
        layers.normal.map,
        {
            center: {lat: 42.345978, lng: -83.0405},
            zoom: 12,
        });

    var events = new H.mapevents.MapEvents(map);
    var behavior = new H.mapevents.Behavior(events);
    var ui = H.ui.UI.createDefault(map, layers);
  }

  render() {
      return e('div', {"id": "map"});
  }
}

const domContainer = document.querySelector('#app');
ReactDOM.render(e(SimpleHereMap), domContainer);

단일 색인에서 단독으로 사용하면 이 예는 유효합니다.html 파일, 그러나 JSX를 사용하지 않습니다. create-react-app 사용을 시도하면 붕괴됩니다.만약 다른 ReactJS 게시물에서 설명한 것처럼 이 도구를 사용한다면 다음 오류를 볼 수 있습니다.

정의되지 않음 H 정의되지 않음

상술한 예시를 create-react-app로 개편하려면 약간의 변화가 필요하다.

이 스크립트 라이브러리의 내용을 공공/index로 이동합니다.html

지도를 만듭니다.js 및 SimpleHereMap 클래스.

업데이트 render() 방법은 JSX를 사용하여 요소를 배치합니다.

이렇게 변경한 경우npm start 콘솔에서 다음 오류가 발생할 수 있습니다.
정의되지 않음 H 정의되지 않음H.service.Platform()의 초기화로 인해 H가 범위에 없기 때문에 오류가 발생했습니다.이것은 여기에만 있는 것이 아닙니다. 일반적인 상황에서React에 포함된 제3자 코드는 모두 이렇습니다.사용create-react-app은 그 도구체인을 사용하는 것을 의미한다. webpack을 모듈 귀속기로 포함하고 eslint는 문법 검사에 사용되며 Babel는 JSX를 전송하는 데 사용된다.
HERE JavaScript SDK와 같은 모든 라이브러리에 H와 같은 전역 변수가 있으면 컴파일 과정에서 유사한 문제(jQuery, 전단지 등)를 만날 수 있습니다.이러한 비 가져오기 코드를 인용하면 플랫폼과 무관한 문법linter가 웹 브라우저에 페이지가 나타날 줄 모르기 때문에 불평할 것이다.
간단한 해결 방법은 인용window.H이다.불행하게도, 우리<script>include와 우리의 구성 요소를 긴밀하게 결합시키는 것은 모듈화된 자바스크립트 응용 프로그램 구축의 기본 원칙 중 하나에 어긋나지만, 이것은 효과적이다.

공용 / 인덱스.html

스크립트 라이브러리는 공공 색인에만 포함됩니다.html.

@@ -4,6 +4,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css?dp-version=1526040296" />
+
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
+    <script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
+

src/Map。js

맵 어셈블리는 렌더 맵을 정의합니다.우리가 주제 선택에 들어간 후에, 우리는 이 과목에 대해 더 많은 수정을 진행할 것이다.우리는 많은 속성을 상태로 저장할 것이다. 예를 들어lat,long,zoom, app 증명서를 동적으로 변경할 수 있도록 한다.

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

        this.platform = null;
        this.map = null;

        this.state = {
            app_id: props.app_id,
            app_code: props.app_code,
            center: {
                lat: props.lat,
                lng: props.lng,
            },
            zoom: props.zoom,
            theme: props.theme,
            style: props.style,
        }
    }

    // TODO: Add theme selection discussed later HERE

    componentDidMount() {
        this.platform = new window.H.service.Platform(this.state);

        var layer = this.platform.createDefaultLayers();
        var container = document.getElementById('here-map');

        this.map = new window.H.Map(container, layer.normal.map, {
            center: this.state.center,
            zoom: this.state.zoom,
          })

        var events = new window.H.mapevents.MapEvents(this.map);
        // eslint-disable-next-line
        var behavior = new window.H.mapevents.Behavior(events);
        // eslint-disable-next-line
        var ui = new window.H.ui.UI.createDefault(this.map, layer)
    }    

    render() {
        return (
            <div id="here-map" style={{width: '100%', height: '400px', background: 'grey' }} />
        );
    }
}

현재, 우리는 상호작용 지도를 표시할 수 있는 확장 가능한 ReactJS 구성 요소가 있습니다.

메시지

지도는 브랜드나 선호의 연장이 될 수 있기 때문에 많은 주제와 양식이 페이지에 지도를 표시할 수 있다.다음 그림에서는 maps Tile API에서 사용할 수 있는 몇 가지 맵 예를 보여 줍니다.

src/테마 선택기.js 구성 요소는 사용자가 선택할 수 있는 미리 보기 그림 목록을 제공하기 위해서입니다.여기에는 다음과 같은 몇 가지 인기 주제가 포함됩니다.

class ThemeSelector extends Component {
    render() {
        var themes = [
            'normal.day',
            'normal.day.grey',
            'normal.day.transit',
            'normal.night',
            'normal.night.grey',
            'reduced.night',
            'reduced.day',
            'pedestrian.day',
            'pedestrian.night',
        ];

        var thumbnails = [];
        var onChange = this.props.changeTheme;
        themes.forEach(function(theme) {
            thumbnails.push(<img key={ theme } src={ 'images/' + theme + '.thumb.png' } onClick= { onChange } alt={ theme } id={ theme } />);
        });

        return (
            <div>
            { thumbnails }
            </div>
        );

    }
}

클릭 이벤트가 실행되도록 src/Map에 더 많은 내용을 추가합니다.js 구성 요소.다음 방법changeTheme은 대부분의 JavaScript 구현과 유사한 예입니다.

changeTheme(theme, style) {
    var tiles = this.platform.getMapTileService({'type': 'base'});
    var layer = tiles.createTileLayer(
        'maptile',
        theme,
        256,
        'png',
        {'style': style}
    );
    this.map.setBaseLayer(layer);
}

우리는 shouldComponentUpdate() 방법에서 이 방법을 호출할 것이다.이 메서드는 React 어셈블리 라이프 사이클에서 상태가 변경될 때 호출되어 어셈블리를 다시 렌더링해야 하는지 여부를 결정합니다.새 테마를 선택할 때, 우리는 setBaseLayer 방법을 호출하고, 지도를 업데이트할 수 있으며, 리액션이 DOM 전체를 더 비싼 리셋할 필요가 없다.

shouldComponentUpdate(props, state) {
    this.changeTheme(props.theme, props.style);
    return false;
}

응용 프로그램

종합해 보면 우리는 src/App을 사용한다.js는 맵과 ThemeSelector 구성 요소의 공동 조상으로서 테마 선택의 상태를 추적합니다.
소스 코드는 다음과 같습니다.

import Map from './Map.js';
import ThemeSelector from './ThemeSelector.js';

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

        this.state = {
            theme: 'normal.day',
        }

        this.onChange = this.onChange.bind(this);
    }

    onChange(evt) {
        evt.preventDefault();

        var change = evt.target.id;
        this.setState({
            "theme": change,
        });
    }

    render() {
        return (
            <div className="App">
                <SimpleHereMap
                    app_id="APP_ID_HERE"
                    app_code="APP_CODE_HERE"
                    lat="42.345978"
                    lng="-83.0405"
                    zoom="12"
                    theme={ this.state.theme }
                />
                <ThemeSelector changeTheme={ this.onChange } />
            </div>
        );
    }
}

요약

이상적인 경우, 우리는 HERE Map API를 React 구성 요소로 봉하여 우리 프로그램에서 사용할 수 있도록 npm 패키지를 포함하기를 희망합니다.일부 커뮤니티 프로젝트는 이러한 패키지를 만들 수 있지만 선택한 패키지에 따라 체험이 달라질 수 있습니다.당신이 성공적으로 무엇을 사용했는지 알게 되어 기쁩니다. 그래서 댓글에 주석을 남깁니다.
다른 모든 사람들에게는 많은 다른 자바스크립트-API 예시와 호환성을 얻을 수 있는 빠른 방법을 찾으면 된다.그게 니가 원하는 거야.
너는 GitHub에서 이 프로젝트를 찾을 수 있다. source code