Javascript 模拟单击传单地图项目
有了传单，我必须模拟特定地图区域上的点击事件。例如： 我必须有一个类似于Javascript 模拟单击传单地图项目,javascript,leaflet,geojson,Javascript,Leaflet,Geojson,有了传单，我必须模拟特定地图区域上的点击事件。例如： 我必须有一个类似于clickOnMapItem（itemId）的函数，它将单击由以下代码定义的地图区域 {"type":"Feature","id":"05","properties":{"name":"Arkansas","density":56.43},"geometry":{"type":"Polygon","coordinates":[...} 其中“id”：“05”是我需要点击的id 我的其余代码如示例所示： state-data
clickOnMapItem（itemId）{"type":"Feature","id":"05","properties":{"name":"Arkansas","density":56.43},"geometry":{"type":"Polygon","coordinates":[...}
var statesData = {"type":"FeatureCollection","features":[
{"type":"Feature","id":"01","properties":{"name":"Alabama","density":94.65},"geometry":{"type":"Polygon","coordinates":[[[-87.359 and so on
<!-- 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>
var map=L.map（'map'）.setView（[37.8，-96]，4）；
var cloudmake=L.tileLayer（'http://{s}.tile.cloudmake.com/{key}/{styleId}/256/{z}/{x}/{y}.png'{
属性：“地图数据和副本；2011 OpenStreetMap贡献者，图像和副本；2011 CloudMake”，
键：“BC9A493B41014CAAB98F0471D759707”，
styleId:22677
}).addTo（地图）；
//控件，该控件在悬停时显示状态信息
var info=L.control（）；
info.onAdd=函数（映射）{
这个.u div=L.DomUtil.create（'div'，'info'）；
这个.update（）；
把这个还给我；
};
info.update=功能（道具）{
这个._div.innerHTML=‘美国人口密度’+（道具？
''+props.name+'
'+props.density+'people/mi2'
：“悬停在状态上”）；
};
信息地址（地图）；
//根据“总体密度”值获取颜色
函数getColor（d）{
返回d>1000？“#800026”：
d>500？“#BD0026”：
d>200？“#E31A1C”：
d>100？“#FC4E2A”：
d>50？“#FD8D3C”：
d>20？“#2月24日c”：
d>10？“#1976年2月”：
#FFEDA0"；
}
功能样式（特征）{
返回{
体重：2，
不透明度：1，
颜色：'白色'，
dashArray:'3'，
不透明度：0.7，
fillColor:getColor（feature.properties.density）
};
}
//悬停处理器
功能高亮功能（e）{
var层=e.目标；
layer.setStyle({
体重：5，
颜色：'#666'，
dashArray:“”，
填充不透明度：0.7
});
如果（！L.Browser.ie&&！L.Browser.opera）{
层。布氏体（）；
}
信息更新（图层、特征、属性）；
}
var-geojson；
功能重置突出显示（e）{
geojson.resetStyle（e.target）；
info.update（）；
}
函数ZoomTof性质（e）{
fitBounds（e.target.getBounds（））；
}
//设置单击处理程序
功能onEachFeature（功能，图层）{
分层({
鼠标悬停：Highlight功能，
mouseout:resetHighlight，
单击：缩放自然
});
}
geojson=L.geojson（statesData{
风格：风格，
onEachFeature:onEachFeature
}).addTo（地图）；
map.attributecontrol.addAttribute（'Population data©；'）；
var legend=L.control（{position:'bottomright'}）；
legend.onAdd=函数（映射）{
var div=L.DomUtil.create（'div'，'info legend'），
等级=[0,10,20,50,100,200,500,1000]，
标签=[]，
从,到,；
对于（变量i=0；i”）；
返回div；
};
图例。添加到（地图）；
提前谢谢你 那么您想模拟点击事件？为什么不使用传单的
fireventmap.firevent（'click'，{latlng:[x，y]}）请参见添加到@snkashis的：
fireEvent var latlngPoint = new L.LatLng(x, y);
map.fireEvent('click', {
latlng: latlngPoint,
layerPoint: map.latLngToLayerPoint(latlngPoint),
containerPoint: map.latLngToContainerPoint(latlngPoint)
});
您也可以对特定的标记/图层执行此操作，无论它是否添加到地图中。对不起，这是一个3年前的问题，但我将尝试在这里回答它： 首先，更新以下代码： 上面的新行将“指定”geoJSON的“id”作为图层的传单id， 然后创建一个新函数，如下所示： 所以，根本不需要填充任何坐标
希望有帮助 我发现事件参数没有
层//setting click handlers
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
//add this line
layer._leaflet_id = feature.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');
}