javascript 模拟点击传单地图项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14756420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Emulate click on leaflet map item
提问by Ostap Koziy
Having the Leaflet Choropleth tutoriali have to emulate a click event on a specific map area. For example:
i have to have a function like clickOnMapItem(itemId)that will click on a map area which is defined by the following code
有了 Leaflet Choropleth 教程，我必须模拟特定地图区域上的点击事件。例如：我必须有一个类似的功能clickOnMapItem(itemId)，点击由以下代码定义的地图区域
{"type":"Feature","id":"05","properties":{"name":"Arkansas","density":56.43},"geometry":{"type":"Polygon","coordinates":[...}
where "id":"05"is the id I need to click on
其中"id":"05"是我需要点击的 ID
The rest of my code is as in the example:
我的其余代码如示例所示：
state-data.js:
状态-data.js：
var statesData = {"type":"FeatureCollection","features":[
{"type":"Feature","id":"01","properties":{"name":"Alabama","density":94.65},"geometry":{"type":"Polygon","coordinates":[[[-87.359 and so on
html:
html：
...header ommited
...标题省略
<!-- language:lang-html -->
<body>
<div id="map"></div>
<script src="dist/leaflet.js"></script>
<script type="text/javascript" src="us-states.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var map = L.map('map').setView([37.8, -96], 4);
var cloudmade = L.tileLayer('http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png', {
attribution: 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade',
key: 'BC9A493B41014CAABB98F0471D759707',
styleId: 22677
}).addTo(map);
// control that shows state info on hover
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info');
this.update();
return this._div;
};
info.update = function (props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};
info.addTo(map);
// get color depending on population density value
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7,
fillColor: getColor(feature.properties.density)
};
}
//ON HOVER HANDLER
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 5,
color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
}
//setting click handlers
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
geojson = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
map.attributionControl.addAttribution('Population data © <a href="http://census.gov/">US Census Bureau</a>');
var legend = L.control({position: 'bottomright'});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend'),
grades = [0, 10, 20, 50, 100, 200, 500, 1000],
labels = [],
from, to;
for (var i = 0; i < grades.length; i++) {
from = grades[i];
to = grades[i + 1];
labels.push(
'<i style="background:' + getColor(from + 1) + '"></i> ' +
from + (to ? '–' + to : '+'));
}
div.innerHTML = labels.join('<br>');
return div;
};
legend.addTo(map);
</script>
</body>
Thank you in advance!
先感谢您！
回答by bayu
Sorry, it's a 3 years old question, but I will try to answer it here:
抱歉，这是一个 3 年前的问题，但我会在这里尝试回答：
First, update your code below:
首先，更新下面的代码：
//setting click handlers
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
//add this line
layer._leaflet_id = feature.id;
}
The new line above will 'assign' your geoJSON's 'id' as your layer's leaflet_id, then make a new function like this :
上面的新行将“分配”geoJSON 的“id”作为图层的leaflet_id，然后创建一个像这样的新函数：
function clickOnMapItem(itemId) {
var id = parseInt(itemId);
//get target layer by it's id
var layer = geojson.getLayer(id);
//fire event 'click' on target layer
layer.fireEvent('click');
}
So, there's no need to populate any coordinate at all!!!
所以，根本不需要填充任何坐标！！！
Hope it helps!
希望能帮助到你！
回答by fritzvd
To add to @snkashis: fireEventwill only work if you input the right Types.
That would mean doing this:
添加到@snkashis:fireEvent仅当您输入正确的类型时才有效。这意味着这样做：
var latlngPoint = new L.LatLng(x, y);
map.fireEvent('click', {
latlng: latlngPoint,
layerPoint: map.latLngToLayerPoint(latlngPoint),
containerPoint: map.latLngToContainerPoint(latlngPoint)
});
You can also do this for a specific marker/layer whatever if it's added to the map.
如果将特定标记/图层添加到地图中，您也可以对它执行此操作。
回答by snkashis
So you want to emulate a click event? Why not use Leaflet's fireEventlike map.fireEvent('click',{latlng:[x,y]})
所以你想模拟一个点击事件？为什么不使用 Leaflet 之fireEvent类的map.fireEvent('click',{latlng:[x,y]})
You probably need to fill in layerPoint and containerPoint into the object's parameters.
您可能需要将 layerPoint 和 containerPoint 填入对象的参数中。
