无法使用 pubnub 在地图中设置信息窗口

Question

我想跟踪 driver 车辆以便我使用 pubnub 服务

图书馆：https://github.com/pubnub/eon-map（由 pubnub 支持团队建议）

我设置了一个套接字，每 30 秒从 driver 的移动设备获取纬度和经度，并使用该值在我的管理仪表板地图上显示标记。

这是我的代码：

// socket connection code is write here and socket is connected successfully

var pn = new PubNub({
      publishKey: 'pub-adsasdasd',
      subscribeKey: 'sub-asdasdadasdas'
    });
var channel = 'eon-maps-geolocation-input';

var map = eon.map({
      pubnub: pn,
      id: 'map',
      mbId: 'ianjennings.l896mh2e',
      mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
      channels:[channel],
      options: {
          center: new L.LatLng(31.0461,34.8516),
          zoom: 8
      },
      provider: 'google',
      googleKey: 'AIzaSyBYcy2l0Yf4lDADZ_i6dy0M6pFZyPQA',
      connect: connect
  }
});

function connect() {
    socket.on('showrows', function(locations) {
        // console.log(locations);
        var arr = [];
        locations.forEach(function(i, v) {
            if (i[2] != null) {
                var obj = {};
                obj['latlng'] = [i[2], i[3]];              
                arr.push(obj);
            }
        });

        var new_torchys = JSON.parse(JSON.stringify(arr));
        for (var i = 0; i < new_torchys.length; i++) {

            new_torchys[i] = {
                marker: new_torchys[i].marker,
                latlng: [
                    new_torchys[i].latlng[0],
                    new_torchys[i].latlng[1]
                ],
            }
        }


        pn.publish({
            channel: channel,
            message: new_torchys
        });


    });
}

以上代码成功显示标记，但我无法在单击标记时设置信息 window。

我把这段代码写在for循环里

var marker = L.marker([new_torchys[i].latlng[0], new_torchys[i].latlng[1]]).addTo(map);
marker.bindPopup("<b>Hello world!</b><br>I am a popup.");

但是标记层是叠加的，地图看起来很糟糕。

我也想要 driver 移动时的实时位置。

请帮我看看怎么做？？？

Answer 1

有一个回调函数可以传递给 eon.map，称为 marker。在此函数中，创建一个 mapbox 图标的实例，将弹出窗口绑定到它，然后 return 它。

var channel = 'eon-maps-geolocation-input';

eon.map({
    pubnub: pubnub,
    id: 'map',
    mbToken: 'pk.eyJ1IjoiaWFuamVubmluZ3MiLCJhIjoiZExwb0p5WSJ9.XLi48h-NOyJOCJuu1-h-Jg',
    mbId: 'ianjennings.l896mh2e',
    channels: [channel],
    connect: connect,
    options: {
      zoomAnimation: false,
    },
    marker: function (latlng, data) {
        var marker = new L.marker(latlng, {
          icon: L.mapbox.marker.icon()
        })
        .bindPopup('<button class="trigger">Say hi</button>');

        return marker;
    }
  });

如果您每 30 秒从设备发送一次地理定位，地图将在 PubNub 发布到您指定的频道后立即自动更新 eon-maps-geolocation-input

pn.publish({
    channel: channel,
    message: new_torchys
});

有关 Mapbox 图标的帮助，请参阅他们的文档 https://www.mapbox.com/mapbox.js/example/v1.0.0/clicks-in-popups/

有关使用 EON 进行位置跟踪的深入指南，请查看此 https://github.com/pubnub/eon-workshop/tree/master/lesson3

无法使用 pubnub 在地图中设置信息窗口

Not able to set infowindow in map using pubnub

javascript

marker

pubnub