我知道这可能是一个重复的问题。我是这个领域的新手。我有一张喀拉拉邦的传单 map 。我正在使用 goejson 使用传单来绘制它。所以我的功能是，如果用户单击任何区域，它就会缩放到 map 框。它工作正常。我的问题是我在 map 左侧的 table 上。这是喀拉拉邦所有地区的列表。我想单击表中的此名称，例如，如果用户单击 THIRUVANANTHAPURAM， map 应缩放到 THIRUVANANTHAPURAM。
请看下面的图片。
在这张图片中，图 1 是我创建的喀拉拉邦 map 。在该 map 中，如果单击任何地区(蓝色虚线的所有多边形都是一个地区)，它会缩放以显示具有某些点的地区。图2展示了这个东西。这工作正常。
左侧是喀拉拉邦所有地区名称的目录。如果用户单击左侧表格 map 中的任何名称，我想做的事情应该像图 2 那样进行缩放，作为相应的区域。
请看我下面的代码。 HTML
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<link rel="stylesheet" href="leaflet/leaflet.css"/>
<script src="leaflet/leaflet.js"></script>
<script src="leaflet/leaflet-src.js"></script>
<script src="leaflet/geoGson.js"></script><!-- geo json to draw the map-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="./leaflet/locations/locationGeoGson.js"></script><!-- geo json to draw the points on each district-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCePQZCvtV-rHrEShq2gOaXUvqMn9bUU0" async defer></script>
<script src='https://unpkg.com/leaflet.gridlayer.googlemutant@latest/Leaflet.GoogleMutant.js'></script>
</head>
<body>
<table width="100%" border="1">
<tr>
<td width="20%">
<table width="100%" border="0" id="list">
<tr>
<td colspan="2" style="color: red; font-size: 20px;font-weight: bolder;">DISTRICT</td>
</tr>
<tr style="height: 40px;">
<td width="100%" colspan="2"><a href="#"> <img src="./images/back.png"height="40px" /> </a></td>
</tr>
<tr style="height: 40px;">
<td width="10%">1</td>
<td width="90%"><a href="#" >THIRUVANANTHAPURAM</a></td>
</tr>
<tr style="height: 40px;">
<td>2</td>
<td><a href="#">KOLLAM</a></td>
</tr>
<tr style="height: 40px;">
<td>3</td>
<td><a href="#">PATHANAMTHITTA</a></td>
</tr>
<tr style="height: 40px;">
<td>4</td>
<td><a href="#">ALAPPUZHA</a></td>
</tr>
<tr style="height: 40px;">
<td>5</td>
<td><a href="#">KOTTAYAM</a></td>
</tr>
<tr style="height: 40px;">
<td>6</td>
<td><a href="#">IDUKKI</a></td>
</tr>
<tr style="height: 40px;">
<td>7</td>
<td><a href="#">ERNAKULAM</a></td>
</tr>
<tr style="height: 40px;">
<td>8</td>
<td><a href="#">THRISSUR</a></td>
</tr>
<tr style="height: 40px;">
<td>9</td>
<td><a href="#">PALAKKAD</a></td>
</tr>
<tr style="height: 40px;">
<td>10</td>
<td><a href="#">MALAPPURAM</a></td>
</tr>
<tr style="height: 40px;">
<td>11</td>
<td><a href="#">KOZHIKODE</a></td>
</tr>
<tr style="height: 40px;">
<td>12</td>
<td><a href="#">WAYANAD</a></td>
</tr>
<tr style="height: 40px;">
<td>13</td>
<td><a href="#">KANNUR</a></td>
</tr>
<tr style="height: 40px;">
<td>14</td>
<td><a href="#">KASARAGOD</a></td>
</tr>
</table>
</td>
<td width="30%">
<div id="map" style="border: 1px solid red;height: 670px;width: 100%; " align="center"> </div>
</td>
<td width="25%">
<table width="100%" border="0">
<tr>
<td colspan="2" style="color: red; font-size: 20px;font-weight: bolder;">CATEGORY</td>
</tr>
<tr style="height: 40px;">
<td width="10%">1</td>
<td width="90%">GUEST HOUSES</td>
</tr>
<tr style="height: 40px;">
<td>2</td>
<td>HOTELS</td>
</tr>
<tr style="height: 40px;">
<td>3</td>
<td>MOTELS</td>
</tr>
<tr style="height: 40px;">
<td>4</td>
<td>TAMARINDS</td>
</tr>
<tr style="height: 40px;">
<td>5</td>
<td>PARKS</td>
</tr>
<tr style="height: 40px;">
<td>6</td>
<td>PALACES</td>
</tr>
<tr style="height: 40px;">
<td>7</td>
<td>BOAT CLUBS</td>
</tr>
<tr style="height: 40px;">
<td>8</td>
<td>TOURIST AMENITY CENTERS</td>
</tr>
<tr style="height: 40px;">
<td>9</td>
<td>INFORMATION CENTERS</td>
</tr>
<tr>
<td>
<div id="data"> </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
我的JS
<script type="text/javascript">
var statesData="";
var districtLayer="",Kerala_Layer_Group="";
var pointJson="";
var map = L.map('map');
map.setView([10.54265308,76.13877106], 7);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
L.control.scale().addTo(map);
var customControl = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
container.style.backgroundColor = 'white';
container.style.backgroundImage = "url(./Images/back_multim.jpg)";
container.style.backgroundSize = "30px 30px";
container.style.width = '30px';
container.style.height = '30px';
container.onclick = function(){
console.log('buttonClicked');
map.removeLayer(pointJson);
map.setView([10.54265308,76.13877106], 7);
}
return container;
}
});
map.addControl(new customControl());
// 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>KERALA 2016</h4>' + (props ?
' ' + props.district + ' '
: 'Hover over a district');
};
info.addTo(map);
// get color depending on population density value
function getColor(d) {
return d=="Alappuzha"?'#cb41ea':
d=="Ernakulam"?'#4082ec':
d=="Idukki"?'#5553d4':
d=="Kannur"?'#e04b49':
d=="Kasargod"?'#28edc6':
d=="Kollam"?'#26b5dc':
d=="Kottayam"?'#6316d0':
d=="Kozhikkode"?'#e281a7':
d=="Malappuram"?'#54e254':
d=="Palakkad"?'#6ed095':
d=="Pathanamthitta"?'#dab933':
d=="Thiruvananthapuram"?'#69d91d':
d=="Thrissur"?'#ee40c9':
d=="Wayanad"?'#e99b67':'#000';
}
function style(feature) {
return {
weight: 1.5,
opacity: 1,
//color: 'black',
dashArray: '2',
fillOpacity: 0.0,
//fillColor: getColor(feature.properties.district)
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 1,
//color: '#666',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
var geojson;
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
console.log(e.target);
map.fitBounds(e.target.getBounds());
addGeoJsonToMap(e);
}
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
}
var statesData=GeoDataJson;
geojson = L.geoJson(statesData, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
function addGeoJsonToMap(e){
//alert("im here");
var layerp = e.target;
map.removeLayer(pointJson);
var districtName=layerp.feature.properties.district;//alert(districtName);
console.log(districtName);
switch(districtName){
case 'Thiruvananthapuram':
districtNameJson=Point_Thiruvananthapuram;
break;
case 'Kollam':
districtNameJson=Point_Kollam;
break;
case 'Alappuzha':
districtNameJson=Point_Alappuzha;
break;
case 'Pathanamthitta':
districtNameJson=Point_Pathanamthitta;
break;
}
var dataJson=districtNameJson;
//var dataJson=
pointJson = new L.GeoJSON(dataJson, {
style: stylePoint,
onEachFeature: addClickFeature
});
map.addLayer(pointJson);
}
function stylePoint(feature) {
return {
weight: 1.5,
opacity: 1,
color: 'red',
dashArray: '2',
fillOpacity: 1.0,
fillColor: getColor(feature.properties.district)
};
}
function addClickFeature(feature, layer) {
layer.on({
mouseover: openPopup,
mouseout: closePopup,
click: clickPonit
});
}
function openPopup(e){
var layerp = e.target;
var latLong=layerp.feature.geometry.coordinates;
var HtmlContents="";
HtmlContents+="<a href='#'>"+layerp.feature.properties.category+"<img src='./images/download.png'></a>"
layerp.bindPopup(HtmlContents, {
closeButton: true,
offset: L.point(0, -20)
});
layerp.addTo(map);
var templatlng =new L.LatLng(latLong[1],latLong[0]);
var popup = L.popup()
.setLatLng(templatlng)
.setContent(HtmlContents);
map.openPopup(popup);
}
function clickPonit(e){
var layer = e.target;
info.update = function (props) {
this._div.innerHTML = '<h4>KERALA 2016</h4>' + (layer.feature.properties.category);
};
info.addTo(map);
}
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;
};
</script>
请帮我解决这个问题，我已经用谷歌搜索了，但没有找到这个问题的答案。这就是例子之一。但我不想做我的事情，因为与此完全不同。
最佳答案
我添加了这一行
<table width="100%" border="0" id="list">
并在我的js中添加了
var list = document.getElementById("list");
function onEachFeature(feature, layer) {
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
click: zoomToFeature
});
var li = document.createElement("li"),
a = document.createElement("a"),
content = allProps(feature.properties.district);
// Create the "button".
a.innerHTML = content;
a.href = "#";
a.layer = layer; // Store a reference to the actual layer.
a.addEventListener("click", function (event) {
event.preventDefault(); // Prevent the link from scrolling the page.
map.fitBounds(this.layer.getBounds());
layer.openPopup();
});
li.appendChild(a);
list.appendChild(li);
layer.bindPopup(content);
}
function allProps(props) {
var result = [];
result.push(props);
return result.join(", ");
}
现在我的问题已经解决了。
关于javascript - 单击 map 外部时传单缩放 map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40625383/