我有一张传单 map ,其中有很多标记,我想要打开 map 旁边的图像,该图像在单击标记时链接到某些标记。我只知道我需要 javascript/jquery 和 ajax 来完成这项工作。
以下是一个示例:http://www.washingtonpost.com/wp-srv/special/local/14th-street-businesses/
任何提示/技巧/教程表示赞赏。 提前致谢!
最佳答案
这是您问题的解决方案:http://franceimage.github.io/leaflet/10/
var selectedMarker = false;
var geojsonMarkerOptions = {
radius: 8,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
L.geoJson(fi_markers, {
pointToLayer: function (feature, latlng) {
var marker = L.circleMarker(latlng, geojsonMarkerOptions);
marker.on('click', function (e) {
var feature = e.target.feature;
var content = '<h3>' + feature.properties.popupContent + '</h3><a href="http://www.franceimage.com/en/places-to-visit/?p=' + feature.properties.id + '">' + feature.properties.thumbnail + '</a>';
document.getElementById("events").innerHTML = content;
if(selectedMarker != false) {
selectedMarker.setStyle({ fillColor: "#ff7800"});
}
marker.setStyle({ fillColor: "#000000"});
selectedMarker = marker;
});
return marker;
}
}).addTo(map);
这是一种你可以做到的方式(还有很多其他方式)
在此示例中:
没有 ajax 调用(也没有 jquery)。数据从 geoJson 结构加载(查看 http://franceimage.github.io/leaflet/10/data.geojson )
弹出窗口的 html 内容是使用 geojson 功能的属性创建的
我使用了 CircleMarker,因此更改颜色是小菜一碟
希望这会有所帮助
关于javascript - 单击标记打开 map 旁边的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24281075/