Question

我目前正在试验PubNub的EON地图库。它是一个实时映射库，它使用MapBox和PubNub的实时数据流基础结构。

我正在尝试构建一个简单的PWA，每次位置更改时都会发布一个字符串。

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="../bower_components/geo-location/geo-location.html">
<link rel="import" href="../bower_components/google-map/google-map.html">

<link rel="stylesheet" type="text/css" href="../bower_components/mapbox.js/mapbox.css">
<script src="../bower_components/mapbox.js/mapbox.js"></script>
<script src="../bower_components/pubnub/dist/web/pubnub.min.js"></script>
<script src="../bower_components/eon-map/pubnub-mapbox.js"></script>

<!-- Instantiate PubNub -->
<script type="text/javascript">

  console.log('Init PubNub');
  var channel = 'pubnub-mapbox';
  var pub = new PubNub({
      publishKey:   'myPubKey',
      subscribeKey: 'mySubKey',
      logVerbosity: true
  });

</script>

<dom-module id="my-view1">
  <template>

    <div id='map'></div>

<script type="text/javascript">
    var map = eon.map({
      pubnub: pub,
      id: 'map',
      mbToken: 'myToken',
      mbId: 'myId',
      channels: [channel]
    });

</script>

  </template>

  <script>
Polymer({
  is: 'my-view1',
});

当浏览器尝试实例化EON映射时，会出现问题。即使有一个div元素，我收到此错误消息：

Uncaught Error: Map container not found.
    at e._initContainer (leaflet-src.js:1979)
    at e.initialize (leaflet-src.js:1532)
    at e.initialize (map.js:37)
    at new e (leaflet-src.js:229)
    at Object.module.exports.map (map.js:233)
    at new create (pubnub-mapbox.js:79)
    at Object.window.eon.map (pubnub-mapbox.js:291)
    at <anonymous>:2:19
    at HTMLElement._createLocalRoot (polymer-mini.html:1998)
    at HTMLElement._setupRoot (polymer-mini.html:1703)

我觉得我错过了一些非常简单的事情，但我似乎无法抓住我的错误。任何帮助将不胜感激。

Answer 1

我能够使用以下内容渲染eon-maps：

在eon.html页面中定义一个包含示例代码的新eon-map元素。

<link rel="stylesheet" type="text/css" href="./bower_components/mapbox.js/mapbox.css">
<script src="./bower_components/mapbox.js/mapbox.js"></script>
<script src="./bower_components/pubnub/dist/web/pubnub.min.js"></script>
<script src="./bower_components/eon-map/pubnub-mapbox.js"></script>

<dom-module id="eon-map">

  <template>

    <style type="text/css">
      #map {
        height: 200px;
      }
    </style>
    <div id='map'></div>

  </template>

  <script>
    Polymer({
      is: 'eon-map',
      ready: function() {

        var channel = 'pubnub-mapbox';
        var pub = new PubNub({
          publishKey: 'your_pub_key',
          subscribeKey: 'your_sub_key',
          logVerbosity: true
        });

        var map = eon.map({
          pubnub: pub,
          id: 'map',
          mbToken: 'your_mb_token',
          mbId: 'your_mb_id',
          channels: [channel],
          debug: true
        });

      }
    });
  </script>
</dom-module>

然后，在您的根目录中加入eon.html并使用eon-map元素。

<link rel="import" href="./bower_components/polymer/polymer.html">
<!-- <link rel="import" href="shared-styles.html"> -->
<link rel="import" href="./bower_components/geo-location/geo-location.html">
<link rel="import" href="./bower_components/google-map/google-map.html">
<link rel="import" href="eon.html">

<eon-map></eon-map>

＆＃34;未找到地图容器＆＃34; Polymer + PubNub出错

1 个答案: