我想,当用户点击标记时,侧边栏滚动项目用户点击的内容...就像这个网页https://googlemaps.github.io/js-store-locator/examples/places.html ....但是这怎么办?任何想法谢谢..
此div与地图ID& side_bar id。
<div style="width:100%; height:100vh;padding-bottom: 50px; ">
<div id="map" style="top:50px;height:100%;width:80%;float:left"></div>
<div id="side_bar" style="top:50px;width:20%;float:left;overflow-y: scroll; height:100%;margin-top:50px;padding:20px"></div>
</div><!-- Map Ends display -->
从php数据添加infowindow点击&amp;在side_bar id中添加项目
// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][2], locations[i][3]),
map: map,
visible: true,
animation: google.maps.Animation.DROP,
icon : icons[locations[i][4]],
});
// Event that closes the Info Window with a click on the map
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
markers.push(marker);
var side_bar_html = "<a href='javascript:google.maps.event.trigger(markers["+parseInt(markers.length-1)+"],\"click\");'style='text-decoration:none;'>"+locations[i][0]+"</a><br><hr><br>";
document.getElementById('side_bar').innerHTML += side_bar_html;
}
答案 0 :(得分:0)
我找到了解决方案。我添加了这个
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][1]);
infowindow.open(map, marker);
var no = marker.id;
$("div[class*='item']").removeClass("active");
$('div[class*=item_'+no+']').addClass("active");
var $selectedLocation = $('div[class*=item_'+no+']' );
var $container = $('#side_bar');
$container.animate({
scrollTop: $selectedLocation.offset().top - $container.offset().top + $container.scrollTop()
});
}
})(marker, i));
并添加到我的ID标记