英文:
Reading and getting Folium Marker coordinates once the user clicks on the map
问题
我找到了这段代码 点击这里 并编辑以在用户点击地图以添加标记时在文本区域字段中显示标记坐标，但出现错误 Uncaught TypeError: document.getElementById(...) is null。
我需要有人帮助使这个功能正常工作。谢谢。
map = folium.Map(location=[lat, lng], zoom_start=20)
marker = folium.Marker(
[lat, lng],
zoom_start=20,
tooltip=tooltip,
width=100,
height=70,
icon=folium.Icon(color="red", icon=""),
popup=site,
).add_to(map)
map.add_child(folium.LatLngPopup())
mapJsVar = map.get_name()
map.get_root().html.add_child(
folium.Element(
"""
<script type="text/javascript">
$(document).ready(function () {
{map}.on("click", addMarker);
function addMarker(e) {
const marker = new L.marker(e.latlng, {
draggable: true,
}).addTo({map});
document.getElementById('clk_lat1').innerHTML = marker.getLatLng().lat;
document.getElementById('clk_lng1').innerHTML = marker.getLatLng().lng;
}
});
</script>
""".replace(
"{map}", mapJsVar
)
)
)
map = map._repr_html_()
context = {"map": map}
这是 HTML 代码：
<div align="center" class="form-group"></div>
<p style="font-size:18px; color:blue;">Marker Location:</p>
<div>
Lat:
<text-area name="clk_lat1" id="clk_lat1"></text-area>
Lng:
<text-area name="clk_lng1" id="clk_lng1"></text-area>
</div>
</div>
英文:
I found this code click here and edited to show the marker coordinates in textarea field once the user clicks on the map to add a marker but it gave an error Uncaught TypeError: document.getElementById(...) is null.
I need someone to help making this works. thank you.
map = folium.Map(location=[lat, lng], zoom_start=20)
# country = location.country
marker = folium.Marker(
[lat, lng],
zoom_start=20,
tooltip=tooltip,
width=100,
height=70,
icon=folium.Icon(color="red", icon=""),
popup=site,
).add_to(map)
map.add_child(folium.LatLngPopup())
mapJsVar = map.get_name()
map.get_root().html.add_child(
folium.Element(
"""
<script type="text/javascript">
$(document).ready(function () {
{map}.on("click", addMarker);
function addMarker(e) {
// ustawiamy aby marker był przesuwalny
const marker = new L.marker(e.latlng, {
draggable: true,
}).addTo({map});
document.getElementById('clk_lat1').innerHTML = marker.getLatLng().lat;
document.getElementById('clk_lng1').innerHTML = marker.getLatLng().lng;
}
});
</script>
""".replace(
"{map}", mapJsVar
)
)
)
map = map._repr_html_()
context = {"map": map}
this is the HTML code:
<div align="center" class="form-group"></div>
<p style="font-size:18px; color:blue;">Marker Location:</p>
<div >
Lat:
<text-area name="clk_lat1" id = "clk_lat1" >
</text-area>
Lng:
<text-area name="clk_lng1" id = "clk_lng1" ></text-area>
</div>
</div>
答案1
得分: 2
以下是您要翻译的内容：
尝试这个，我已经注释掉了alert(newLatLng)中的警告。顺便说一下，您的代码确实可以工作，但由于将脚本不正确地放在JavaScript文件中而出现了一些错误，脚本标签应该放在HTML文件中（最好放在body底部，这样它们在DOM加载后访问DOM之前工作，否则脚本将在DOM文档加载之前工作，并且querySelector和findbyid将返回undefined）。
注意：
- 不建议使用
textarea来显示输出，您可以使用span或div并根据需要自定义它。HTML元素，如textarea，用于输入字段。
如果您需要任何进一步的帮助，请告诉我。
英文:
Try this, I commented out the alert in alert(newLatLng). Your code did work by the way, but there was some errors due to putting incorrectly scripts in javascript file, script tags should be in the html file (preferably at the bottom of the body, so they access the dom after it's loaded, otherwise the script would work before the dom document is loaded and querySelector and findbyid would return undefined).
Notes:
- It's not recommended to use
textareato display an output, you can usespanordivand customize it as you like. HTML elements such astextareaare used as input fields.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// Map initialization
var map = L.map("map").setView([23.8859, 45.0792], 6);
//osm layer
var osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
});
osm.addTo(map);
function onMapClick(e) {
map.on("click", addMarker);
function addMarker(e) {
// ustawiamy aby marker był przesuwalny
const marker = new L.marker(e.latlng, {
//draggable: true,
}).addTo(map);
var lat = (e.latlng.lat);
var lng = (e.latlng.lng);
var newLatLng = new L.LatLng(lat, lng);
// alert(newLatLng);
document.getElementById('clk_lat1').innerHTML = lat;
document.getElementById('clk_lng1').innerHTML = lng;
}
}
map.on('click', onMapClick);
<!-- language: lang-css -->
.page{
display: flex;
height: 100vh;
width: 100vw;
padding: 0;
}
.divmap {
flex: 2;
}
.map{
height: 100%;
width: 100%;
}
.form-group {
flex: 1;
padding: 1rem;
}
div.overlay {
position: absolute;
left: 100px;
float: right;
clear: both;
}
#overlay {
position: absolute;
width: 20%;
height: 100%;
left: 0;
top: 0;
float: left;
clear: left;
}
form.myform {
position: absolute;
left: 15px;
margin-top: -1px;
width: 20%;
height: 30%;
float: left;
clear: left;
}
div.markers {
margin-top: -1px;
float: left;
width: 15%;
margin-left: 390px;
text-align: center;
}
div.card {
float: left;
width: 250px;
margin-top: -1px;
border-width: 1px;
border-radius: 0rem;
padding: 0rem;
margin-left: 350px;
}
<!-- language: lang-html -->
<head align="center">
<!--<meta http-equiv="refresh" content="120">-->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1, user-scalable=no, shrink-to-fit=no" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
<!-- leaflet css -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
</head>
<div class="page">
<div class="form-group">
<p style="font-size:18px; color:blue;">Marker Location:</p>
<div>
<div>Lat: </div>
<textarea rows="1" class="coord-result" name="clk_lat1" id="clk_lat1">
</textarea>
<div>Lng: </div>
<textarea rows="1" class="coord-result" name="clk_lng1" id="clk_lng1"></textarea>
</div>
</div>
<div class="divmap">
<div class="map" id="map"></div>
</div>
</div>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论