Fatal编程技术网
  • javascript/
  • Javascript Wordpress中的传单地图-弹出窗口不起作用

Javascript Wordpress中的传单地图-弹出窗口不起作用

javascript wordpress leaflet

Javascript Wordpress中的传单地图-弹出窗口不起作用,javascript,wordpress,leaflet,Javascript,Wordpress,Leaflet,我正在尝试将地图集成到我的wordpress站点中 使用下面的代码。更具体地说，我在块编辑器的“html块”中使用这段代码 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6

我正在尝试将地图集成到我的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: '&copy; <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",
    color: "#000",
    weight: 0.3,
    opacity: 1,
    fillOpacity: 0.8
}

var akzise_gates_PBMI = new L.GeoJSON.AJAX("https://www.akzisemauer-berlin.de/map/data/akzise_gates_PBMI.geojson", {
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, akziseGatePBMIStyle)
    }}, {
    onEachFeature: markerpopup
    });       
akzise_gates_PBMI.addTo(map);



testmarker = new L.CircleMarker([ 52.513660,13.417072], { 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>


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'{
属性：“©；参与者”，
minZoom:1，
maxZoom:28，
}).addTo（地图）；
//阿克齐塞马尔魔杖
功能akziseWallStyle（功能）{
返回{
颜色：墙颜色（feature.properties.bezirk），
体重：3，
};
}
功能墙颜色（bezirk）{
如果（bezirk==“Friedrichshain Kreuzberg”）返回“#e5b813”；否则
返回“#666666”；
}
var akzise_wall=new L.GeoJSON.AJAX（“https://www.akzisemauer-berlin.de/map/data/akzise_wall.geojson",{
样式：akziseWallStyle}）；
akzise_wall.addTo（地图）；
//阿克齐塞马尔酒店
//markerpopup函数
功能标记OPUP（特征、图层）{
if（feature.properties&&feature.properties.name）{
layer.bindPopup（feature.properties.name）；
}
}
var akziseGateFHXBStyle={
半径：8，
fillColor:#e5b813“，
颜色：“000”，
重量：0.3，
不透明度：1，
填充不透明度：0.8
}
var akzise_gates_FHXB=新的L.GeoJSON.AJAX（“https://www.akzisemauer-berlin.de/map/data/akzise_gates_FHXB.geojson", {
pointToLayer：功能（特性、latlng）{
返回L.circleMarker（latlng，akziseGateFHXBStyle）
}}, {
onEachFeature:markerpopup
});    
akzise_gates_FHXB.addTo（地图）；
var akziseGatePBMIStyle={
半径：8，
fillColor:#666666“，
颜色：“000”，
重量：0.3，
不透明度：1，
填充不透明度：0.8
}
var akzise_gates_PBMI=new L.GeoJSON.AJAX（“https://www.akzisemauer-berlin.de/map/data/akzise_gates_PBMI.geojson", {
pointToLayer：功能（特性、latlng）{
返回L.circleMarker（latlng，akziseGatePBMIStyle）
}}, {
onEachFeature:markerpopup
});       
akzise_gates_PBMI.addTo（地图）；
testmarker=newl.CircleMarker（[52.513660,13.417072]，{radius:10，颜色：'green'，}）.bindPopup（字符串（“这个有用吗？”））.addTo（地图）；
//贝齐克斯格伦森
变量bezirkStyle={
“颜色”：“#717171”，
“权重”：0，
“填充不透明度”：0.4
};
var bezirksgrenzen=new L.GeoJSON.AJAX（“https://www.akzisemauer-berlin.de/map/data/bezirksgrenzen_simp.geojson",{
样式：bezirkStyle}）；
添加到（地图）；
setInterval（函数（）{
map.invalidateSize（）；
}, 100);
（我使用invalidatesize函数修复maptiles无法正确加载的错误，请检查）

我正在使用point_to_layer函数设置点（akzisemauer_gates）的样式，这很好，但我无法使弹出窗口正常工作-两个akzise_gates_*功能和testmarker都无法正常工作

我尝试的是：

  • 当我跳过点要素的样式设置并返回到标准标记时，弹出窗口将按预期工作

  • 当我在弹出窗口中尝试相同的代码时（它无法加载我的geojson，可能是因为不相关的原因，但testmarker可以工作），所以我假设问题与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: '&copy; <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",{interactive: false,
         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>


//初始化映射
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'{
属性：“©；参与者”，
minZoom:1，
maxZoom:28，
}).addTo（地图）；
//贝齐克斯格伦森
变量bezirkStyle={
“颜色”：“#717171”，
“权重”：0，
“填充不透明度”：0.4
};
var bezirksgrenzen=new L.GeoJSON.AJAX（“https://www.akzisemauer-berlin.de/map/data/bezirksgrenzen_simp.geojson“，{交互式：错误，
样式：bezirkStyle}）；
添加到（地图）；
bezirksgrenzen.bringToBack（）；
//阿克齐塞马尔魔杖
功能akziseWallStyle（功能）{
返回{
颜色：墙颜色（feature.properties.bezirk），
体重：3，
};
}
功能墙颜色（bezirk）{
如果（bezirk==“Friedrichshain Kreuzberg”）返回“#e5b813”；否则
返回“#666666”；
}
var akzise_wall=new L.GeoJSON.AJAX（“https://www.akzisemauer-berlin.de/map/data/akzise_wall.geojson“，{交互式：错误，
样式：akziseWallStyle}）；
akzise_wall.addTo（地图）；
//大门
功能标记OPUP（特征、图层）{
layer.bindPopup（feature.properties.name）
}
功能门\u样式（特征）{
返回{
半径：8，
fillColor:fill_color（feature.properties.bezirk），
颜色：“000”，
重量：0.3，
不透明度：1，
填充不透明度：0.8
}
}
函数填充颜色（bezirk）{
如果（bezirk==“Friedrichshain Kreuzberg”）返回“#e5b813”；
否则返回“#666666”；
}
var akzise_gates=new L.GeoJSON.AJAX（“https://www.akzisemauer-berlin.de/map/data/gates.geojson", {
pointToLayer：功能（特性、latlng）{
返回L.circleMarker（板条、门式（特征））
}, 
onEachFeature:markerpopup
});
akzise_gates.addTo（地图）；
//错误修正
setInterval（函数（）{
map.invalidateSize（）；
}, 100);
GeoJSON数据中的功能没有
“name”
属性，而是
“Gemeinde_name”
属性。