传单- geoJSON集成(从GeoJSON创建按钮)
提问于 2020-02-21 11:13:01
(不适用于HW)嗨，我正在运行下面的代码，不知道为什么我的按钮不能创建。而不是按钮应该在哪里，有一些代码片段。我添加了一个javascript函数来为GeoJSON中的每个特性创建按钮，但是看起来该按钮似乎不能正常工作。任何帮助都会很好。我的问题特别提到了从var = geoJSONLayer new开始的代码行。geoJSON层与索引HTML存在于同一个文件夹中。会显示标记，但不能创建按钮。下面的草坪功能也不起作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>First Map</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.1/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="leaflet-ajax-gh-pages/dist/leaflet.ajax.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<style>
#header {
height: 75px;
background-color: honeydew;
}
#mapdiv {
height: 850px;
background-color: gainsboro;
}
#side_panel {
height: 850px;
background-color: powderblue;
}
#footer {
height: 90px;
background-color: wheat;
}
.attraction{
margin-bottom: 5px;
background-color: azure;
}
</style>
</head>
<body>
<div id="header" class="col-md-12">
<hl class="text center">Mexico City</hl>
</div>
<div id="side_panel" class="col-md-3">
<hl class="text center">Attractions</hl>
<button id="zoomToZocalo" class="form-control btn-primary">Zocalo</button>
<button id="btnBuffer" class="form-control btn-warning">Buffer</button>
</div>
<div id="mapdiv" class="col-md-9"></div>
<div id="footer" class="col-md-12">
<h4 id="map_coords" class="text-center">Latitude: 19.4 longitude: -99.1 Zoom Level: 11</h4>
<h4 class="text-center">©2016 <a href="http://millermountain.com">Miller Mountain LLC</a></h4>
</div>
<script>
var mymap = L.map("mapdiv")
mymap.setView([19.4, -99.1], 12);
var backgroundLayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png");
mymap.addLayer(backgroundLayer);
// var zocaloMarker = L.marker([19.43278, -99.13333]).addTo(mymap).bindPopup("<h3 class='text-center '>Zocalo</h3><a href='https://momento360.com/e/u/f427867d9e6a456a98d614d7e9f5c1ab?utm_campaign=embed&utm_source=other&utm_medium=other&heading=78.71035983306334&pitch=-41.283278407523014&field-of-view=75' target='blank'><img src='https://marriott-hotels.marriott.com/wp-content/uploads/sites/9/2019/08/Marriott_Logo.png' width='100px'></a>");
$("#zoomToZocalo").click(function(){
mymap.setView([19.43278, -99.13333], 17);
});
var geojsonLayer = new L.GeoJSON.AJAX('GeoJSON/attractions.geojson', {pointToLayer: function(feature, latlng) {
var string = "<button id = 'zoomTo"+feature.properties.name.replace(/ /g, '');
str += "' class='form-control btn btn-primary attraction'>";
str += feature.properties.name+"</button>";
$("#side_panel").append(str);
$("zoomTo"+feature.properties.name.replace(/ /g, '')).click(function(e){
mymap.setView([latlng.lat, latlng.lng], 17);
});
var str = "<h4>"+feature.properties.name+"</h4><hr>";
str += "<a href='"+feature.properties.web+"' target='blank'>";
str += "img src='img/"+feature.properties.image+"' width='200px'>";
str += "</a>";
return L.marker(latlng).bindPopup(str);
}});
geojsonLayer.addTo(mymap);
var bufferLayer;
$("#btnBuffer").click(function(){
if ($("#btnBuffer").html()=='Buffer'){
var bufferedAttractions = turf.buffer(geojsonLayer.toGeoJSON(), 1, 'miles');
bufferLayer = L.geoJSON(bufferedAttractions).addTo(mymap);
$("#btnBuffer").html("Remove Buffer");
} else {
mymap.removeLayer(bufferLayer);
$("#btnBuffer").html("Buffer");
}
});
// 74-79 is a way to add an event handler to the map using a 'mousemove' event //----
mymap.on('mousemove', function(e){var str = "Latitude:"+e.latlng.lat.toFixed(5)+" Longitude: "+e.latlng.lng.toFixed(5)+" Zoom Level: "+mymap.getZoom();
$("#map_coords").html(str);
});
</script>
</body>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-02-21 11:38:32
到leaflet.ajax.js的Src链接中断。你必须把它连接到一个工作的链接上。
替换此标记
<script src="leaflet-ajax-gh-pages/dist/leaflet.ajax.js"></script>在这方面：
<script src="https://calvinmetcalf.github.io/leaflet-ajax/dist/leaflet.ajax.js"></script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60344928
复制
腾讯云开发者
