单击标记打开地图旁边的图像

clicking a marker opening a image next to map

本文关键字：图像 地图 单击      更新时间：2023-09-26

我有一个传单地图，其中有很多标记，我想是打开一个图像旁边的地图链接到某些标记上的标记点击。我只知道我需要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);

你可以这样做(还有很多其他的方法)

在这个例子中:

  1. 没有ajax调用(也没有jquery)。数据从geoJson结构加载(查看http://franceimage.github.io/leaflet/10/data.geojson)

  2. 弹出窗口的html内容是使用geojson特性的属性创建的

  3. 我已经使用了CircleMarker，所以改变颜色是小菜一碟

我希望这对你有帮助

相关文章：