单击与地图标记相对应的匹配轮播时，如何突出显示地图上的标记？

Question

假设第一个轮播幻灯片是加利福尼亚州洛杉矶，当单击它时，地图上的红点标记将其颜色更改为类似于加利福尼亚州洛杉矶坐标上的蓝色。 单击第二张幻灯片时，第一个突出显示的标记将恢复为默认红色，新标记将突出显示为蓝色。

我不确定如何使用 Vanilla JS 连接这两者。 如果逻辑连接，我可以使用 CSS 轻松更改红点颜色。

我正在使用 DataMaps 来渲染美国地图，其中包含来自 JSON 文件的某些城市的坐标，以及用于底部轮播的 slick-carousel。

JSON

[
    {
        "city": "Madison",
        "state": "WI",
        "latitude": 43.07199845990384,
        "longitude": -89.40813691528471
    },
    {
        "city": "Columbus",
        "state": "OH",
        "latitude": 40.00178899021552,
        "longitude": -83.01964928313465
    }
]

在这里，我获取 json 文件、DataMaps 的初始化以及将 json 对象填充到轮播 HTML 中的逻辑。

// Get JSON data
fetch('assets/json/cities.json')
  .then(function (response) {
      return response.json();
  })
  .then(function (data) {
      appendData(data);
  })
  .catch(function (err) {
      console.log('error: ' + err);
  });

var map = new Datamap({
  element: document.getElementById("map"),
  responsive: true,
  height: null,
  width: null,
  scope: 'usa',
  geographyConfig: { // USA map color
    popupOnHover: false,
    highlightOnHover: false,
    borderWidth: 1,
    borderOpacity: 0.6,
    borderColor: '#ffffff'
  },
  bubblesConfig: { // USA city popup color
    borderWidth: 1,
    borderOpacity: 1,
    borderColor: '#c5002e',
    popupOnHover: true,
    radius: null,
    fillOpacity: 1,
    animate: true,
    highlightOnHover: true,
    highlightFillColor: '#c5002e', //  hover dot color
    highlightBorderColor: '#c5002e',
    highlightBorderWidth: 1,
    highlightBorderOpacity: 1,
    highlightFillOpacity: 0.75,
    exitDelay: 100,
    key: JSON.stringify,
    popupTemplate: function(geography, data) {
      return '<div class="hoverinfo">' + data.name + '</div>';
    },
  },
    fills: {
      defaultFill: '#3a3a3a', // map color
      city: '#c5002e' //  dot color
  }
});

// Responsive map
window.addEventListener('resize', function() {
  map.resize();
});

// Loop to grab all json objects and render them in the page
function appendData(data) {
  for (var i = 0; i < data.length; i++) {
    var city = (data[i].city),
        state = (data[i].state),

    const locations = document.createElement("div");

    // Add html
    locations.innerHTML = `
      <div class="city__locations-slide">
        <div class="city__locations-slide-inner">
          <p class="">${city} ${state}</p>
        </div>
      </div>
    `;

    document.querySelector(".city__locations").append(locations)

  }

光滑的轮播代码

//initilize city locations slick carousel
$(document).ready(function() {
  $(".city__locations").slick({
    dots: true,
    prevArrow: '<button type="button" class="city__locations-prev-button"/>',
    nextArrow: '<button type="button" class="city__locations-next-button"/>',
    infinite: true,
    slidesToShow: 4,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 640,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 1
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });
});

HTML

<div class="row">
    <div class="columns small-24">
      <div id="map-location" class="push--40 city__locations"></div>
  </div>
</div>

这是jsbin中的初始示例。

如果这一切都解决了，我想实现另一个日期功能。 当当前日期大于/等于 json 日期对象中的日期时，红点标记也会突出显示。

任何帮助表示赞赏。

谢谢！

Answer 1

如果您可以将一些数据属性添加到

return '<div data-unique-identifier class="hoverinfo">' + data.name + '</div>';

然后使用轮播 div 连接鼠标悬停事件，然后您可以使用数据属性将 div 与相应的图标匹配。 有了日期，您可以再次在上面的行中添加一个自定义 CSS 类来创建一个高亮，有点像这样：

return '<div data-unique-identifier class="' + new Date(data.someDate) === new Date('Jul 12 2011') ? highlight : hoverinfo + '">' + data.name + '</div>';

没有最小的可重复示例很难提供帮助

我希望这有帮助

Answer 2

这是一个发光效果，发光有点多，CSS不是我的强项，但应该做你想做的，你可以调整CSS。 我找不到覆盖地图点上的 CSS 的方法，所以我使用了一个位于创建发光效果中的 div

 // Init USA map var map = new Datamap({ element: document.getElementById("map"), responsive: true, height: null, width: null, scope: 'usa', geographyConfig: { // USA map color popupOnHover: false, highlightOnHover: false, borderWidth: 1, borderOpacity: 0.6, borderColor: '#ffffff' }, bubblesConfig: { // USA city popup color borderWidth: 1, borderOpacity: 1, borderColor: '#c5002e', popupOnHover: true, radius: null, fillOpacity: 1, animate: true, highlightOnHover: true, highlightFillColor: '#c5002e', // hover dot color highlightBorderColor: '#c5002e', highlightBorderWidth: 1, highlightBorderOpacity: 1, highlightFillOpacity: 0.75, exitDelay: 100, key: JSON.stringify, popupTemplate: function(geography, data) { return '<div class="hoverinfo">' + data.name + '</div>'; }, }, fills: { defaultFill: '#3a3a3a', // map color city: '#c5002e' // dot color } }); // Responsive map window.addEventListener('resize', function() { map.resize(); }); // City popup map.bubbles([{ radius: 10, fillKey: 'city', name: 'Madison, WI', cityId: "1", latitude: 43.07199845990384, longitude: -89.40813691528471 }, { radius: 10, fillKey: 'city', name: 'Columbus, OH', cityId: "2", latitude: 40.00178899021552, longitude: -83.01964928313465 }, { radius: 10, fillKey: 'city', name: 'Gainesville, FL', cityId: "3", latitude: 29.645407365499, longitude: -82.348610942268 }, { radius: 10, fillKey: 'city', name: 'Chestnut Hill, MA', cityId: "4", latitude: 42.335294607839636, longitude: -71.16643600759312 } ]); //initilize city locations slick carousel $(document).ready(function() { $(".city__locations").slick({ dots: true, prevArrow: '<button type="button" class="city__locations-prev-button"/>', nextArrow: '<button type="button" class="city__locations-next-button"/>', infinite: true, slidesToShow: 3, slidesToScroll: 1, responsive: [{ breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 1 } }, { breakpoint: 640, settings: { slidesToShow: 2, slidesToScroll: 1 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } ] }); $(".city__locations-slide").each(function() { $(this).mouseover(function() { const location = $(this) .children(".city__locations__locations-slide-inner") .children("p").html() const mapMatch = $(".datamaps-bubble").filter(function() { return $(this).data("info").name === location }) $(".glow").css({ top: mapMatch.position().top + 'px', left: mapMatch.position().left + 'px', }).show(); }).mouseout(function() { $(".glow").hide(); }) }) });

 .glow { display: none; position: absolute; width: 30px; height: 30px; border-radius: 50%; background-color: #fff; box-shadow: 0 0 60px 30px #fff, 0 0 100px 60px #f0f, 0 0 140px 90px #0ff; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="robots" content="noindex"> <meta name="viewport" content="width=device-width"> <title>USA Map with carousel</title> <style> .city__locations-slide { background-color: lightgrey; padding: 10px; margin: 10px; } .city__locations-prev-button { position: absolute; left: 0; top: 30%; width: 20px; height: 20px; z-index: 111; } .city__locations-next-button { position: absolute; right: 0; top: 30%; width: 20px; height: 20px; z-index: 111; } </style> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css" /> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css" /> </head> <body> <div class="container"> <div class="row"> <div class="columns small-24"> <div id="map" class="" style="position: relative; height: 100%; width: 100%; background-color: rgb(255, 255, 255, 1);"></div> <div id="map-location" class="push--40 city__locations"> <div class="city__locations-slide"> <div class="city__locations__locations-slide-inner"> <p>Madison, WI</p> </div> </div> <div class="city__locations-slide"> <div class="city__locations__locations-slide-inner"> <p>Columbus, OH</p> </div> </div> <div class="city__locations-slide"> <div class="city__locations__locations-slide-inner"> <p>Gainesville, FL</p> </div> </div> <div class="city__locations-slide"> <div class="city__locations__locations-slide-inner"> <p>Chestnut Hill, MA</p> </div> </div> </div> </div> </div> </div> <div id="glow" class="glow"> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/datamaps/0.5.8/datamaps.usa.js"></script> <script src="//code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <script src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script> </body> </html>

https://jsfiddle.net/PatrickHume/e1m7quj6/90/

我希望这有帮助 ？