悬停时 mapbox 标记的弹出窗口不起作用

Question

我正在尝试在悬停时显示 Mapbox 标记的弹出窗口。

我已经尝试按照这些示例进行操作，并且可以根据 class 显示不同的标记图标来完成我想做的事情，但是弹出窗口不起作用。

我需要在鼠标悬停在标记上时显示弹出窗口。

我觉得跟数据源有关系？任何帮助，将不胜感激。谢谢

我的代码如下，

mapboxgl.accessToken = 'example-token-here';
var geojson = {
  'type': 'FeatureCollection',
  'features': [{
      'type': 'Feature',
      'properties': {
        'message': 'Foo',
        'class': 'tree',
        'description': '<strong>Make it Mount Pleasant</strong><p>Make it Mount Pleasant is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.</p>',
        'iconSize': [60, 60]
      },
      'geometry': {
        'type': 'Point',
        'coordinates': [-66.324462890625, -16.024695711685304]
      }
    },
    {
      'type': 'Feature',
      'properties': {
        'message': 'Bar',
        'description': '<strong>Make it Mount Pleasant</strong><p>Make it Mount Pleasant is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.</p>',
        'class': 'xmas',
        'iconSize': [50, 50]
      },
      'geometry': {
        'type': 'Point',
        'coordinates': [-61.2158203125, -15.97189158092897]
      }
    },
    {
      'type': 'Feature',
      'properties': {
        'message': 'Baz',
        'description': '<strong>Make it Mount Pleasant</strong><p>Make it Mount Pleasant is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.</p>',
        'class': 'meadow',
        'iconSize': [40, 40]
      },
      'geometry': {
        'type': 'Point',
        'coordinates': [-63.29223632812499, -18.28151823530889]
      }
    }
  ]
};

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-65.017, -16.457],
  zoom: 5
});

// add markers to map
geojson.features.forEach(function(marker) {
  // Get each feature class
  var cls = marker.properties['class'];

  if (cls == 'tree') {
    // create a DOM element for the tree marker

    var el = document.createElement('div');
    el.className = 'marker';
    el.style.backgroundImage =
      'url(https://1mt.brightapps.co/wp-content/uploads/2021/02/tree.png)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';


  }

  if (cls == 'xmas') {
    // create a DOM element for the tree marker

    var el = document.createElement('div');
    el.className = 'marker xmas-marker';
    el.style.backgroundImage =
      'url(https://1mt.brightapps.co/wp-content/uploads/2021/02/xmas.png)';
    el.style.width = marker.properties.iconSize[0] + 'px';
    el.style.height = marker.properties.iconSize[1] + 'px';


  }



  // add marker to map
  new mapboxgl.Marker(el)
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
});


// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
  closeButton: false,
  closeOnClick: false
});

map.on('mouseenter', geojson, function(e) {
  // Change the cursor style as a UI indicator.
  map.getCanvas().style.cursor = 'pointer';

  var coordinates = e.features[0].geometry.coordinates.slice();
  var description = e.features[0].properties.description;

  // Ensure that if the map is zoomed out such that multiple
  // copies of the feature are visible, the popup appears
  // over the copy being pointed to.
  while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
  }

  // Populate the popup and set its coordinates
  // based on the feature found.
  popup.setLngLat(coordinates).setHTML(description).addTo(map);
});

map.on('mouseleave', geojson, function() {
  map.getCanvas().style.cursor = '';
  popup.remove();
});

.marker {
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.mapboxgl-popup {
  max-width: 100px;
}
.as-console-wrapper { max-height: 15% !important; bottom: 0; }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8">
      <div id="map" style="height: 500px;"></div>
    </div>
    <div class="col-lg-4 bg-secondary">
    </div>
  </div>
</div>

Answer 1

您的代码中存在几个概念误解。您正在基于源创建自定义图像标记（位于最后的 HTML 元素），但您是在源上的地图级别创建处理程序，而不是附加到标记。其次，您甚至在实例化之前就创建了一个弹出窗口，然后尝试在事件上定位，但您也在分离事件中将其删除，所以即使那样运行，它也会运行只有一次。

如果您想在鼠标悬停在您的一棵树上时显示弹出窗口...我已经创建了 this fiddle for you showing the popup on mouseover。

相关代码如下...

var geojson = {
    'type': 'FeatureCollection',
    'features': [{
        'type': 'Feature',
        'properties': {
            'message': 'Foo',
            'class': 'tree',
            'description': '<strong>Make it Mount Pleasant</strong><p>Make it Mount Pleasant is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.</p>',
            'iconSize': [60, 60]
        },
        'geometry': {
            'type': 'Point',
            'coordinates': [-66.324462890625, -16.024695711685304]
        }
    },
    {
        'type': 'Feature',
        'properties': {
            'message': 'Bar',
            'description': '<strong>Make it Mount Pleasant</strong><p>Make it Mount Pleasant is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.</p>',
            'class': 'xmas',
            'iconSize': [50, 50]
        },
        'geometry': {
            'type': 'Point',
            'coordinates': [-61.2158203125, -15.97189158092897]
        }
    },
    {
        'type': 'Feature',
        'properties': {
            'message': 'Baz',
            'description': '<strong>Make it Mount Pleasant</strong><p>Make it Mount Pleasant is a handmade and vintage market and afternoon of live entertainment and kids activities. 12:00-6:00 p.m.</p>',
            'class': 'meadow',
            'iconSize': [40, 40]
        },
        'geometry': {
            'type': 'Point',
            'coordinates': [-63.29223632812499, -18.28151823530889]
        }
    }
    ]
};

var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center: [-65.017, -16.457],
    zoom: 5
});

// Create a popup, but don't add it to the map yet.
var popup;

// add markers to map
geojson.features.forEach(function (marker) {
    // Get each feature class
    var cls = marker.properties['class'];

    if (cls == 'tree') {
        // create a DOM element for the tree marker

        var el = document.createElement('div');
        el.className = 'marker';
        el.style.backgroundImage =
            'url(https://1mt.brightapps.co/wp-content/uploads/2021/02/tree.png)';
        el.style.width = marker.properties.iconSize[0] + 'px';
        el.style.height = marker.properties.iconSize[1] + 'px';


    }

    if (cls == 'xmas') {
        // create a DOM element for the tree marker

        var el = document.createElement('div');
        el.className = 'marker xmas-marker';
        el.style.backgroundImage =
            'url(https://1mt.brightapps.co/wp-content/uploads/2021/02/xmas.png)';
        el.style.width = marker.properties.iconSize[0] + 'px';
        el.style.height = marker.properties.iconSize[1] + 'px';

    }

    el.addEventListener('mouseover', function () {
        // Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = 'pointer';
        console.log(marker);

        var coordinates = marker.geometry.coordinates.slice();
        var description = marker.properties.description;

        // Ensure that if the map is zoomed out such that multiple
        // copies of the feature are visible, the popup appears
        // over the copy being pointed to.
        //while (Math.abs(marker.lngLat.lng - coordinates[0]) > 180) {
        //  coordinates[0] += marker.lngLat.lng > coordinates[0] ? 360 : -360;
        //}
        console.log(coordinates);
        // Populate the popup and set its coordinates
        // based on the feature found.
        popup = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false
        }).setLngLat(coordinates).setHTML(description).addTo(map);
    });

    el.addEventListener('mouseout', function () {
        map.getCanvas().style.cursor = '';
        popup.remove();
    });



    // add marker to map
    new mapboxgl.Marker(el)
        .setLngLat(marker.geometry.coordinates)
        .addTo(map);
});


  [1]: https://i.stack.imgur.com/deiVz.png

悬停时 mapbox 标记的弹出窗口不起作用

popups for mapbox markers on hover not working

javascript

mapbox

mapbox-gl-js