如何解决Wordpress中的传单地图-弹出窗口无法正常工作
我正在尝试将地图集成到我的WordPress网站中 使用以下代码。更具体地说,我在“块编辑器”的“ html块”中使用此代码。
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://www.akzisemauer-berlin.de/map/js/leaflet.ajax.min.js"></script>
<div id="map" style="width:100%; height: 400px; ">
</div>
<script>
var map = L.map('map',{
zoomControl:true,maxZoom:18,minZoom:1
}).setView([52.513660,13.417072],12);
L.tileLayer('http://a.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',{
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',minZoom: 1,maxZoom: 28,}).addTo(map);
//Akzisemauer-wand
function akziseWallStyle(feature) {
return {
color: wall_color(feature.properties.bezirk),weight: 3,};
}
function wall_color(bezirk) {
if(bezirk === "Friedrichshain-Kreuzberg") return "#e5b813"; else
return "#666666";
}
var akzise_wall = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/akzise_wall.geojson",{
style:akziseWallStyle});
akzise_wall.addTo(map);
//Akzisemauer-Tore
// markerpopup function
function markerpopup(feature,layer) {
if (feature.properties && feature.properties.name) {
layer.bindPopup(feature.properties.name);
}
}
var akziseGateFHXBStyle = {
radius: 8,fillColor: "#e5b813",color: "#000",weight: 0.3,opacity: 1,fillOpacity: 0.8
}
var akzise_gates_FHXB = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/akzise_gates_FHXB.geojson",{
pointToLayer: function (feature,latlng) {
return L.circleMarker(latlng,akziseGateFHXBStyle)
}},{
onEachFeature: markerpopup
});
akzise_gates_FHXB.addTo(map);
var akziseGatePBMIStyle = {
radius: 8,fillColor: "#666666",fillOpacity: 0.8
}
var akzise_gates_PBMI = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/akzise_gates_PBMI.geojson",akziseGatePBMIStyle)
}},{
onEachFeature: markerpopup
});
akzise_gates_PBMI.addTo(map);
testmarker = new L.CircleMarker([ 52.513660,{ radius: 10,color: 'green',}).bindPopup(String("DOES THIS WORK??")).addTo(map);
// Bezirksgrenzen
var bezirkStyle = {
"color": "#717171","weight": 0,"fillOpacity": 0.4
};
var bezirksgrenzen = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/bezirksgrenzen_simp.geojson",{
style:bezirkStyle});
bezirksgrenzen.addTo(map);
setInterval(function () {
map.invalidateSize();
},100);
</script>
((我使用invalidatesize函数修复了无法正确加载maptiles的错误,请检查here)
我正在使用point_to_layer函数设置可以正常工作的点(akzisemauer_gates)的样式,但我无法使弹出窗口起作用-既没有akzise_gates_ *这两个功能也没有测试标记。
我尝试了什么:
-
当我跳过点要素的样式并返回到标准标记时,弹出窗口将按预期工作。
-
当我在jsfiddle中尝试相同的代码时,弹出窗口会工作(可能由于不相关的原因而无法加载我的geojson`s,但是测试标记起作用了),所以我认为问题是wordpress相关
有人可能对wordpress内的传单行为有经验吗?
解决方法
好吧,我知道了。我犯了两个错误
第一个是我不认为该层可以相互重叠。我的“ bezirke”图层(一个多边形)与所有标记重叠。因此,当我单击我认为是标记的东西时,我实际上是在单击“ bezirke”图层,该图层没有显示弹出窗口,因为该图层未配置弹出窗口。有趣的是,这也适用于在多边形图层中为空的地图区域。
第二秒钟,我在使用L.GeoJson.Ajax函数时犯了一个语法错误:我将pointToLayer和onEachFeature子函数(不知道其调用方式)分别放在{}括号中,这是错误的,它们在一起放在一个{}中括号和内部仅用逗号分隔
这是工作脚本:
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js" integrity="sha512-Abr21JO2YqcJ03XGZRPuZSWKBhJpUAR6+2wH5zBeO4wAw4oksr8PRdF+BKIRsxvCdq+Mv4670rZ+dLnIyabbGw==" crossorigin="anonymous"></script>
<div id="map" style="width:100%; height: 400px; ">
</div>
<script>
//initialize map
var map = L.map('map',{
zoomControl:true,maxZoom:18,minZoom:1
}).setView([52.513660,13.417072],12);
//add basemap
L.tileLayer('http://a.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png',{
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',minZoom: 1,maxZoom: 28,}).addTo(map);
// Bezirksgrenzen
var bezirkStyle = {
"color": "#717171","weight": 0,"fillOpacity": 0.4
};
var bezirksgrenzen = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/bezirksgrenzen_simp.geojson",{interactive: false,style:bezirkStyle});
bezirksgrenzen.addTo(map);
bezirksgrenzen.bringToBack();
//Akzisemauer-wand
function akziseWallStyle(feature) {
return {
color: wall_color(feature.properties.bezirk),weight: 3,};
}
function wall_color(bezirk) {
if(bezirk === "Friedrichshain-Kreuzberg") return "#e5b813"; else
return "#666666";
}
var akzise_wall = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/akzise_wall.geojson",style:akziseWallStyle});
akzise_wall.addTo(map);
//gates
function markerpopup(feature,layer) {
layer.bindPopup(feature.properties.name)
}
function gates_style(feature) {
return {
radius: 8,fillColor: fill_color(feature.properties.bezirk),color: "#000",weight: 0.3,opacity: 1,fillOpacity: 0.8
}
}
function fill_color(bezirk) {
if (bezirk === "Friedrichshain-Kreuzberg") return "#e5b813";
else return "#666666";
}
var akzise_gates = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/gates.geojson",{
pointToLayer: function (feature,latlng) {
return L.circleMarker(latlng,gates_style(feature))
},onEachFeature: markerpopup
});
akzise_gates.addTo(map);
//bugfix
setInterval(function () {
map.invalidateSize();
},100);
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。