Блог

Главная - Вопросы по программированию - Я не могу реализовать МаркерКластеринг, условную видимость и фильтрацию по типу

Я не могу реализовать МаркерКластеринг, условную видимость и фильтрацию по типу

#javascript #google-maps #markerclusterer #webflow

#javascript #google-карты #markerclusterer #webflow

Вопрос:

В настоящее время у меня возникают некоторые трудности с реализацией следующих функций в Google Maps и использованием Webflow в качестве серверной части CMS. Я использовал следующее видео о том, как связать Javascript API Google Maps с CMS Webflow, чтобы разобраться в основах, однако я зашел в тупик, пытаясь реализовать следующие функции:

  • Кластеризация маркеров
  • Фильтрация по типу и статусу проекта
  • Различные типы маркеров для обозначения статуса проекта
  • Условная видимость во всплывающих окнах информационного окна (так что, если поле не задано в webflow, соответствующие элементы не отображаются на странице),
  • Закрытие информационного окна при открытии другого.

Вот код, который использовался до сих пор: здесь также есть ссылка только для чтения на проект webflow.

 <script>

  function initMap() {
    const myLatLng = {
      lat: 49.053078,
      lng: -36.260135
    };
    const image =
      "https://uploads-ssl.webflow.com/617bccba1ff41a17f1f593e6/61a7c8a2dfdf5e3d275c8d6c_Group 10.svg";

    const map = new google.maps.Map(document.getElementById("map"), {
      mapId: "a552ab80d59640f8",
      zoom: 3.25,
      center: myLatLng,
      mapTypeControl: false,
      fullscreenControl: false,
      streetViewControl: false,
      cluster: true
    });

    locations.forEach(location => {
      let contentString =
        '<div id="content" class="map-wrapper">'  
        '<div id="siteNotice">'  
        "</div>"  
        '<h5 id="firstHeading" class="firstHeading">'   location.name   '</h5>'  
        '<div id="bodyContent">'  
        '<div class="map-info">'  
        "<p class='p-inline'>Field:</p>"  
        "<p class='map-stat'>"   location.status   "</p>"  
        "<p id='capacity' class='p-inline'>Field:</p>"  
        "<p id='capacity' class='map-stat'>"   location.mw   "</p>"  
        '</div>'  
        '<div class="map-info">'  
        "<p id = 'clean' class='p-inline'>Field:</p>"  
        "<p id = 'clean' class='map-stat'>"   location.clean   "</p>"  
        "<p class='p-inline'>Field:</p>"  
        "<p class='map-stat'>"   location.c02   "</p>"  
        "</div>"  
        "<p class='p-top-pad'>"   location.comment   "</p>"  
        "</div>"  
        "</div>";

      let infoWindow = new google.maps.InfoWindow({
        content: contentString,
        maxWidth: 375,
      });

      let marker = new google.maps.Marker({
        position: {
          lat: parseFloat(location.lat),
          lng: parseFloat(location.lng),
        },
        map,
        title: location.name,
        icon: image,
        optmised: true,
        cluster: true
      });

      marker.addListener("click", () => {
        infoWindow.open(map, marker);
      });

      google.maps.event.addListener(map, 'click', function() {
        infoWindow.close(map, marker);
      });

    });

    let markerCluster = new markerClusterer.MarkerClusterer({
      map,
      markers
    });

  }

  <
  /script>

Любая помощь будет с благодарностью!

Комментарии:

1. Здесь также есть ссылка на промежуточный проект.

2. Ваш фрагмент кода не работает.

Метки: ,