点击地图放大

Question

我在我的 Wordpress 网站上有一个可过滤的地图，这是我使用 Wordpress 上的 LocateandFilter 插件制作的，该插件使用带有 Google Maps 叠加层的 Leaflet 地图。我希望地图在左窗格上单击关联状态复选框时放大状态。我很擅长使用wordpress，包括javascript在内的编码，因为这不是插件的包含功能，我认为我可以破解它。我知道我需要找到地图变量（它似乎不是地图）并通过单击更改选项 - 我不知道如何选择地图并更改它的选项。我已经研究了几个小时，我意识到我只是没有背景来解决这个问题。但是我现在太深了，无法切换插件。有人可以帮忙吗？

这里是页面：https://armor-pt.com/locations/

如果我能弄清楚如何选择地图/地图变量是什么，我会编写如下代码：

function zoomArizona(){
 if (document.querySelector('div.la-filter-261 input').checked){
  mymap.flyTo([34, 111], 5);
  } else {
   mymap.flyTo([37, 95], 0);
   }
}

Answer 1

你需要注入创建地图的函数，你可以这样做：

1. 在添加脚本 leaflet-filters 之后的某处添加下一行。

<script type='text/javascript' src='https://armor-pt.com/wp-content/plugins/locateandfilter/public/js/leaflet-filters/leaflet-filters.js?ver=1.4.11' id='locate-and-filter-leaflet-filters-js'></script>

...
<script> <!-- optional -->
var oldFnc = leaflet_filters_class; // copy the original function
leaflet_filters_class = function(params){ // add your own function to the variable name which will be called later from the plugin
    var leaflet_filters = new oldFnc(params); // execute the original function
    window.leaflet_filters = leaflet_filters; // make the result global accessible
    return leaflet_filters; // return the result, like expected from the original function
}
<script> <!-- optional -->

1. 现在您可以添加自己的 Leaflet 逻辑。请记住，这只能在从插件初始化地图后执行。

var mymap = leaflet_filters.map;
function zoomArizona(){
 if (document.querySelector('div.la-filter-261 input').checked){
  mymap.flyTo([34, 111], 5);
  } else {
   mymap.flyTo([37, 95], 0);
   }
}