Есть ли способ получить информацию из всплывающего окна mapbox при нажатии? - PullRequest
Новая
       56

Есть ли способ получить информацию из всплывающего окна mapbox при нажатии?

0 голосов
/ 24 апреля 2019

В настоящее время у меня есть приложение mapbox, которое отображает всплывающее окно для каждого маркера после нажатия, и это здорово.Однако я хочу, чтобы информация во всплывающем окне отправлялась в отдельный раздел внутри приложения, поэтому данные отображаются в нижней части экрана, а не во всплывающем окне на карте.Таким образом, это выглядит примерно так, как показано на рисунке ниже, но вместо этого внизу страницы и содержит только необходимые данные, такие как имя, описание и т. Д. Код, который я использую для создания маркеров, используется ниже.

google maps

До сих пор я пытался редактировать CSS всплывающего окна mapbox, но оно перезаписывается только CSS-файлом mapbox по умолчанию, и даже если это не так, оно просто слишком неуклюже и не дает желаемого эффекта.Я также знаю, что это можно сделать с помощью Leaflet, но это не то, что я хочу использовать, так что это не вариант для меня. 

    for(var i = 0; i < currentArray.length ; i++){
        var el = document.createElement('div');
        var markerHeight = 50, markerRadius = 10, linearOffset = 25;


        el.className = 'marker2';
        new mapboxgl.Marker(el)
        .setLngLat([currentArray[i].lng, currentArray[i].lat])
        .addTo(map);
        new mapboxgl.Marker(el)
        .setLngLat([currentArray[i].lng, currentArray[i].lat])
        .setPopup(new mapboxgl.Popup({ offset: 25, closeOnClick:true})
            .setHTML(
            `<div id = "popup-container">
                <h3>${currentArray[i].name}</h3>
                <p>${currentArray[i].venue}</p>
            </div>`
            )
        )
        .addTo(map);
}



callbackEventbrite(function(result){
   console.log("env", result)
   //var geo = GeoJSON.parse(result.events,{Point: [result.location.latitude, result.location.longitude]});
//console.log(geo);
   const keys = Object.values(result);
  for(const key of keys){
    geojson = {
        type: 'featureCollection',
        features: [{
            type: 'feature',
            geometry: {
                type: 'Point',
                coordinates: [key.venue.longitude, key.venue.latitude]
            }
        }]
    }
    eventInfo.push(
        {"longitude": key.venue.longitude , "latitude": key.venue.latitude , "name": key.name.text, "venue": key.venue.name, "date": key.start.local, "category": key.category_id}
    );

}
});

Ответы [ 2 ]

0 голосов
/ 30 апреля 2019

Если вы добавили properties к данным слоя, вы можете использовать их программно. Предполагая, что вам нужно получить существующие данные API и отформатировать геоджон, вы можете попробовать что-то вроде этого ...

Форматирование данных API как геоджона со свойствами и т. Д. 

// prepare geojson
let json = {
  type: "FeatureCollection",
  features: []
};

// apiData = some other json source
apiData.forEach(poi => {
  // add poi to geojson
  json.features.push({
    type: "Feature",
    properties: { // example properties
      id: poi.id,
      title: poi.title,
      image: poi.image
    },
    geometry: { type: "Point", coordinates: [poi.longitude, poi.latitude] }
  });
});

// add geojson source
map.addSource("my-locations", {
  type: "geojson",
  data: json,
});

// add stories layer
map.addLayer({
  interactive: true,
  id: "my-layer",
  type: "circle",
  source: "my-locations",
  paint: {
    "circle-color": #6495ED,
    "circle-radius": 10,
  }
});

Использование отформатированных данных в событиях клика ... 

map.on("click", "my-layer", e => {

  // do something when user clicks on marker

  var coordinates = e.features[0].geometry.coordinates.slice();
  var id = e.features[0].properties.id;
  var html = e.features[0].properties.image + e.features[0].properties.title;
  var popupContent = window.document.createElement("div");
  popupContent.addEventListener("click", e => {

    // do something when user clicks on popup

  });
  popupContent.innerHTML = html;
  new MapboxGL.Popup()
    .setLngLat(coordinates)
    .setDOMContent(popupContent)
    .addTo(map);
});

Возможно, вам придется перейти от использования new maboxgl.Marker.addTo. Подробности здесь: https://docs.mapbox.com/help/troubleshooting/transition-from-mapbox-js-to-mapbox-gl-js/#add-a-marker

0 голосов
/ 24 апреля 2019

Я немного изменил этот пример https://docs.mapbox.com/mapbox-gl-js/example/popup-on-click/, чтобы при щелчке слоя описание отображалось не во всплывающем окне, а в виде div в нижней части страницы.

Проверкаthis out https://jsfiddle.net/anatolysukhanov/y2jLedtq/

Идея состоит в том, что есть 2 div 

<div id="map"></div>
<div id="popup"></div>

в стиле, подобном этому 

    #map {
        position:absolute;
        top:0;
        bottom:0;
        width:100%;
    }

    #popup {
        position: fixed;
        bottom: 0;
        text-align: center;
        width: 100%;
        opacity: 0.8;
        background-color: white;
    }
...