我在我的视图中有地图。
点击标记我需要打开弹出窗口，这样可以正常工作。
以下是代码：
@EnableWebMvc
@Configuration
@ComponentScan
public class RestConfiguration extends WebMvcConfigurerAdapter {
@Override
public void configureMessageConverters(List<HttpMessageConverter<?>> messageConverters) {
messageConverters.add(new MappingJackson2HttpMessageConverter());
super.configureMessageConverters(messageConverters);
}
}
};
但是我需要获得 export function all_hotels_map_results(): void {
Helpers.set_currency_settings();
const json = gon.hotel_info;
const token = "***********";
const centerLatlng = new mapboxgl.LngLat(gon.destination_city.lng, gon.destination_city.lat);
mapboxgl.accessToken = token;
let map = new mapboxgl.Map({
container: "map-canvas",
style: "mapbox://styles/mapbox/streets-v9",
center: centerLatlng,
zoom: 9
});
map.addControl(new mapboxgl.NavigationControl());
map.on('load', function() {
$.each(json, function(i, item) {
let myLatlng = new mapboxgl.LngLat(item.lng, item.lat);
let stars = "";
for(let s = 0; s < item.rating; s++) {
stars += '<img class="star-image" style="height:20px;width:20px;">';
}
const Popup_Content = '<div class="map-card__wrapper">'
+'<div class="map-card__image-container">'
+'<div class="map-card__image" style="background: url('+item.pictures[0].url+');">' +'</div>'
+'</div>'
+'<div class ="map-card__content-container ">'
+ '<div class ="map-card__title">'+item.name +'</div>'
+'<p class="map-card__address">'+item.address1+'</p>'
+ '<div class ="map-card__review">'+stars +'</div>'
+ '<div class ="map-card__price-container">'+__("Flygbolag")+ ": "+ accounting.formatMoney(item.sales_prices[0])
+'</div>'
+ '</div>';
let marker = new mapboxgl.Marker()
.setLngLat(myLatlng)
.setPopup(new mapboxgl.Popup({ offset: 5 })
.setHTML(Popup_Content))
.addTo(map);
});
});
的价值，我试图这样做：
<div class ="map-card__title">但它不起作用。我在控制台里没有任何警告信息。
哪里可能是我的错？
感谢您的帮助。
答案 0 :(得分：0)
正在动态生成要附加事件侦听器的元素。
当您调用$('selector').click(fn)时，可能会发生这些元素甚至没有创建或附加到 DOM 。
您应该尝试将事件委派给这些元素的共同父级，例如地图本身，甚至正文。这样，您的正文或地图会侦听每个子元素的点击，而不是这些元素本身。
我的建议看起来非常像这样：
$('body').on('click', '.children', function() {});
您可以在此处详细了解这些内容：