प्रतिक्रिया-नक्शा-जीएल: मानचित्र से प्रदर्शित नहीं होता

वोट
4

मैं उपयोग कर रहा हूँ प्रतिक्रिया-नक्शा-जीएल उबेर से पैकेज है, लेकिन यह कुछ दिनों के लिए प्रयास करने के बाद भी, यह काम करने के लिए प्राप्त करने में सक्षम नहीं किया गया है।

मैं कल्पना (अभी तक) कुछ भी करने की कोशिश नहीं कर रहा हूँ - अब के लिए, मैं बस एक नक्शे के अपने पन्ने पर दिखाना चाहते हैं। मैं लगा कि एक बार मुझे लगता है कि कदम काम करने के लिए मिला है, मैं और अधिक उन्नत चीजों की कोशिश कर सकते हैं।

दुर्भाग्य से, यह सब मैं देख रहा है:

मानचित्र

कोई सुझाव?

यहाँ मेरी कोड के प्रासंगिक अनुभाग (.jsx फ़ाइल से) बताया गया है:

import React from 'react'
import { connect } from 'react-redux'
import MapGL from 'react-map-gl'

const App = React.createClass({

  render: function () {
    const map = (
        <div>
          <MapGL
            width={700}
            height={450}
            latitude={37.78}
            longitude={-122.45}
            zoom={11}
            mapStyle={'mapbox://styles/mapbox/basic-v9'}
            mapboxApiAccessToken={'pk.ey...<removed for privacy>...'}
          />
        </div>
      )

    return (
      <div>
        =======Map should be below=======
        <br/>
        { map }
        <br/>
        =======Map should be above=======
      </div>
    )
  }
})

export default connect()(App)

मेरी साइट काम करता है पर बाकी सब कुछ; केवल एक चीज याद आ रही है कि नक्शे वास्तव में प्रकट नहीं होता है। प्रदान की किसी भी मदद के लिए अग्रिम धन्यवाद।

29/06/2016 को 21:35
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
2

कोई दिखाई नक्शे के लक्षण बदबू आ रही है एक API पहुंच टोकन मुद्दे की तरह।

Readme.md अपने पहुँच टोकन जाँच करने के लिए एक पार्टी आदेश का वर्णन है।

echo $MapboxAccessToken
npm start &
open "http://localhost:9966/?access_token=$MapboxAccessToken"

Github स्रोत का उपयोग करता है mapboxApiAccessToken, लेकिन परीक्षण नमूना उपयोग क्या आप पोस्ट, का उपयोग करने से थोड़ा अलग दिखाने के r()

  var map = r(MapGL, {
    width: 500,
    height: 500,
    longitude: -122,
    latitude: 37,
    zoom: 14,
    mapboxApiAccessToken: mapboxApiAccessToken
  });
  React.render(map, document.body);
29/06/2016 को 22:35
का स्रोत उपयोगकर्ता

वोट
6

टिप्पणी में आपके अनुरोध के अनुसार, मैं अपने कोड का परीक्षण करने के लिए एक सरल पूर्वाभ्यास ऊपर डाल दिया।

मैं एक यादृच्छिक बॉयलरप्लेट प्रतिक्रिया कुछ समय बचाने के लिए चुना है। मैं यह क्लोन और उसके सभी निर्भरता स्थापित करें।

git clone https://github.com/coryhouse/react-slingshot
cd react-slingshot
npm install

फिर, मैं स्थापित प्रतिक्रिया-नक्शा-जीएल

npm install react-map-gl --save

अब हम कुछ के लिए आवश्यक निर्भरता स्थापित करने की आवश्यकता प्रतिक्रिया-नक्शा-जीएल सही ढंग से काम करने के लिए।

npm install json-loader transform-loader webworkify-webpack@1.0.6 --save-dev

यहाँ केवल विशिष्ट webworkify-webpack के v1.0.6 जो मेरी जानकारी के साथ बॉक्स से बाहर संगत पिछले संस्करण है प्रतिक्रिया-नक्शा-जीएल

इसके बाद, हम में Webpack के लिए उचित विन्यास निर्देशों को जोड़ने की जरूरत है webpack.config.dev.js, उदाहरण के लिए फ़ाइल।

सबसे पहले, हम एक जोड़ने के resolveब्लॉक

resolve: {
  extensions: ['', '.js', '.jsx'],
  alias: {
    webworkify: 'webworkify-webpack',
  }
},

और हम बस लोडर हम मौजूदा करने की जरूरत है जोड़ें।

/** ... Previous loaders ... **/
{test: /\.json$/, loader: 'json-loader'},
{test: /\.js$/, include: path.resolve(__dirname, 'node_modules/webworkify/index.js'), loader: 'worker'},
{test: /mapbox-gl.+\.js$/, loader: 'transform/cacheable?brfs'},

अंतिम चरण के लिए बस एक घटक में अपने कोड डाल करने के लिए यह प्रदर्शित हो गया है ( src/components/HomePage.js)।

import MapGL from 'react-map-gl';

/** ... **/

return (
  <div>
    <MapGL
      width={700}
      height={450}
      latitude={37.78}
      longitude={-122.45}
      zoom={11}
      mapboxApiAccessToken={'pk.eyJ1IjoiMW0yMno1Nmw3N2sifQ.YNkaLBJBc4lNXa5A'}
      mapStyle={'mapbox://styles/mapbox/basic-v9'}
    />
  </div>
);

ऐप्लिकेशन का परीक्षण करने के लिए, हम का उपयोग करें

npm start

एक ब्राउज़र निम्नलिखित सामग्री के साथ खुलेगा। यह JSX कोड आपके द्वारा दी गई, केवल संशोधन मेरी MapBox API पहुंच टोकन है।

नक्शा काम करता है।

मेरे जंगली अनुमान होगा कि आप या तो साथ, जिस तरह से आप अपने अनुप्रयोग bundling रहे हैं के साथ कुछ समस्या है Webpack या किसी अन्य बंडलर।

07/07/2016 को 21:51
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more