使用PubNub Eon-Map实现车辆追踪时无法设置地图信息窗口

Hey there! I’ve tackled this exact issue with Eon-Map before—since it’s built on top of Leaflet, we can leverage Leaflet’s native popup functionality to add info windows to your driver markers. Here’s how to make it work:

1. Customize Marker Creation with Popups #

When initializing your Eon-Map, use the marker configuration option to create a custom Leaflet marker and bind a popup to it right away. This ensures every new driver marker comes with an info window:

// Assuming your PubNub instance is already set up as `pn`
var map = eon.map({
  pubnub: pn,
  channel: "your-driver-tracking-channel",
  history: false,
  // Custom marker callback to add popups
  marker: function(data) {
    // Create a Leaflet marker with the driver's coordinates
    var driverMarker = L.marker([data.lat, data.lng]);
    
    // Bind a popup with dynamic driver info (adjust content to your needs)
    driverMarker.bindPopup(`
      <div style="padding: 8px;">
        <h5 style="margin: 0 0 6px;">Driver Details</h5>
        <p><strong>Name:</strong> ${data.driverName}</p>
        <p><strong>License Plate:</strong> ${data.carPlate}</p>
        <p><strong>Last Updated:</strong> ${new Date(data.timestamp).toLocaleString()}</p>
      </div>
    `);
    
    return driverMarker;
  }
});

2. Ensure Your Driver Data Includes Extra Details #

Make sure the data you’re sending from the driver’s device includes all the info you want to display in the popup. For example, your publish call should look like this:

// Driver-side publish example (send every 30s)
pn.publish({
  channel: "your-driver-tracking-channel",
  message: {
    lat: currentLatitude, // From device GPS
    lng: currentLongitude, // From device GPS
    driverName: "John Doe",
    carPlate: "CA-12345",
    timestamp: Date.now()
  }
});

3. Update Popups When Marker Positions Change #

If you need to refresh the popup content when a driver’s location updates, listen for the eonMarkerUpdate event and update the popup dynamically:

map.on('eonMarkerUpdate', function(event) {
  var marker = event.marker;
  var updatedData = event.data;
  
  // Update the popup with fresh info
  marker.setPopupContent(`
    <div style="padding: 8px;">
      <h5 style="margin: 0 0 6px;">Driver Details (Updated)</h5>
      <p><strong>Name:</strong> ${updatedData.driverName}</p>
      <p><strong>License Plate:</strong> ${updatedData.carPlate}</p>
      <p><strong>Current Location:</strong> ${updatedData.lat.toFixed(4)}, ${updatedData.lng.toFixed(4)}</p>
      <p><strong>Last Updated:</strong> ${new Date(updatedData.timestamp).toLocaleString()}</p>
    </div>
  `);
});

Key Notes #

• Eon-Map is just a wrapper for Leaflet, so any Leaflet marker method (like bindPopup, openPopup, or setPopupContent) will work here.
• If you’re using unique identifiers for each driver (like a driver ID), you can use that to track markers more reliably across updates.

内容的提问来源于stack exchange，提问作者Nidhi