Прокрутка отключена при нажатии на маркер в Mapbox - PullRequest
Новая
       47

Прокрутка отключена при нажатии на маркер в Mapbox

0 голосов
/ 17 ноября 2018

Я следовал учебным пособиям, доступным на Mapbox, чтобы создать приведенный ниже код.Кажется, я столкнулся с проблемой, что при нажатии на маркер в моем стиле функция масштабирования карты отключается.Прочитав некоторые ответы на вопросы здесь и в других местах, кажется, что она имеет какое-то отношение к функции getCanvas и к тому, вызывает ли она карту или слой.

Я понятия не имею, как это изменить, хотя я довольно новичок в javascript, поэтому ваша помощь будет принята с благодарностью.

Я бы хотел, чтобы моя карта имела те же функции прокрутки, что и эта: https://www.mapbox.com/bites/00281/

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title></title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.js'></script>
  <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.49.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%}
    
    .mapboxgl-popup-content {
    max-width: 300px;
    padding: 1em;
    }

    h3 {
        color: black;
        font-family: 'Amatic SC', cursive;
        font-weight: bold;
        font-size: 25px;
        text-align: center;
    }

    h4 {
        color: black;
        font-family: 'Amatic SC', cursive;
        font-size: 18px;
        text-align: center;
    }

    h5 {
        color: black;
        font-family: 'Josefin Sans', sans-serif;
        font-weight: lighter;
        font-size: 12px;
        text-align: center;
    }

    p {
        color: black;
        font-family: 'Josefin Sans', sans-serif;
        font-weight: lighter;
        font-size: 12px;
        text-align: center;
    }
</style>
</head>

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

mapboxgl.accessToken = '';
const map = new mapboxgl.Map({
  container: 'map',
  style: '',
  center: [54.450013, 24.476566],
  zoom: 10.81
});

map.on('load', function() {
    var popup = new mapboxgl.Popup({
        offset: {bottom: [0,0], top: [0,0]},
        closeButton: false,
        closeOnClick: false,
    });

    function showPopup (e) {
        map.getCanvas().style.cursor = 'pointer';

    popup.setLngLat(e.features[0].geometry.coordinates)
    .setHTML(checkEmpty('<center><a href="'+e.features[0].properties.image+'"><img src="'+e.features[0].properties.direct+'" width = "100px"/></a>'+
    '</center><h3>'+e.features[0].properties.restaurant_title+ 
    '</h3><h4>'+e.features[0].properties.macro_location+'</h4>'))
    .addTo(map);
    }

    function hidePopup() {
        map.getCanvas().style.cursor = '';
        popup.remove();
    }

    function checkEmpty(info) {
        return (info) ? info: "No data";
    }

map.on('mouseenter', 'bestbitesad-brunches', showPopup);
map.on('mouseleave', 'bestbitesad-brunches', hidePopup);
});

map.on('click', function(e) {
  var features = map.queryRenderedFeatures(e.point, {
      layers: ['bestbitesad-brunches']
    });

  if (!features.length) {
    return;
  }

  var feature = features[0];

  var popup1 = new mapboxgl.Popup({ 
      offset: [0,0,0,0],
      closeOnClick: true,
      anchor: 'middle'})
    .setLngLat(feature.geometry.coordinates)
    .setHTML( '<center><a href="'+feature.properties.image+'"><img src="'+feature.properties.direct+'" width = "100px"/></a>'+
    '</center><h3>' + feature.properties.restaurant_title + 
    '</h3><h4>' +feature.properties.macro_location+ 
    '</h4><h5>' + feature.properties.contact+
    '</h5><h5>' + feature.properties.times +
    '</h5><p>' + feature.properties.description + 
    '</p><hr><p>' + feature.properties.pricing + '</hr></p>')
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);
});
</script>

</body>
</html>
...