[英]How do I highlight the marker on the map when click on matching carousel corresponding to the marker to the map?
假設第一個輪播幻燈片是加利福尼亞州洛杉磯,當單擊它時,地圖上的紅點標記將其顏色更改為類似於加利福尼亞州洛杉磯坐標上的藍色。 單擊第二張幻燈片時,第一個突出顯示的標記將恢復為默認紅色,新標記將突出顯示為藍色。
我不確定如何使用 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 日期對象中的日期時,紅點標記也會突出顯示。
任何幫助表示贊賞。
謝謝!
如果您可以將一些數據屬性添加到
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>';
沒有最小的可重復示例很難提供幫助
我希望這有幫助
這是一個發光效果,發光有點多,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/
我希望這有幫助 ?
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.