我找到了这段代码（单击此处）并进行了编辑以在用户单击地图以添加标记后在文本区域字段中显示标记坐标，但它给出了错误“Uncaught TypeError：document.getElementById（...）是无效的”。我需要有人帮助完成这项工作。谢谢你。
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}
这是 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>
试试这个，我在
alert(newLatLng)undefined备注：
textareaspandivtextarea// 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: '© <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);.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;
}<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/[email protected]/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/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/[email protected]/dist/leaflet.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>