Question

我想跟踪司机车辆，以便我使用pubnub服务

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

我设置了一个插槽，每30秒从驱动程序移动设备获取经度和经度，并使用我在管理仪表板地图上显示标记的值。

这是我的代码：

// 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
        });


    });
}

以上代码成功显示标记但我无法在点击标记时设置信息窗口。

我在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.");

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

我还想在司机搬家时获得实时位置。

请帮我怎么做???

Answer 1

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

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在地图中设置infowindow

1 个答案: