gpt4 book ai didi

javascript - 在 Javascript 中保存 Google map 坐标

转载 作者:行者123 更新时间:2023-12-03 02:45:52 24 4
gpt4 key购买 nike

您好,我有一个简单的问题!我想要一个带有谷歌地图的标记,我将移动它,并且坐标(lan,lon)将使用 Jsfiddle (Javascript)保存在两个变量中。我找到了一个代码(带有 HTML 和 CSS),但它不是我需要的,因为它有两个标记并且不同......提前非常感谢!

https://jsfiddle.net/irinikonsta/ryvpo5ux/

<!DOCTYPE html>
<title>Street View side-by-side</title>

<body>
<div id="map"></div>
<div id="pano"></div>
<div id="floating-panel">
Origin:
<input type="text" readonly id="origin"> Destination:
<input type="text" readonly id="destination">
<br> Heading:
<input type="text" readonly id="heading"> degrees
</div>
<script>
var marker1, marker2;
var poly, geodesicPoly;

function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: {
lat: 37.983810,
lng: 23.727539
}
});
map.controls[google.maps.ControlPosition.TOP_CENTER].push(
document.getElementById('info'));
marker1 = new google.maps.Marker({
map: map,
draggable: true,
position: {
lat: 38.017973,
lng: 23.694077
}
});
marker2 = new google.maps.Marker({
map: map,
draggable: true,
position: {
lat: 37.990920,
lng: 23.751755
}
});
var bounds = new google.maps.LatLngBounds(
marker1.getPosition(), marker2.getPosition());
map.fitBounds(bounds);
google.maps.event.addListener(marker1, 'position_changed', update);
google.maps.event.addListener(marker2, 'position_changed', update);
poly = new google.maps.Polyline({
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 3,
map: map,
});
geodesicPoly = new google.maps.Polyline({
strokeColor: '#CC0099',
strokeOpacity: 1.0,
strokeWeight: 3,
geodesic: true,
map: map
});
update();
}

function update() {
var path = [marker1.getPosition(), marker2.getPosition()];
poly.setPath(path);
geodesicPoly.setPath(path);
var heading = google.maps.geometry.spherical.computeHeading(path[0],
path[1]);
document.getElementById('heading').value = heading;
document.getElementById('origin').value = path[0].toString();
document.getElementById('destination').value = path[1].toString();
}

</script>
<script src="https://maps.googleapis.com/maps/api/jskey=AIzaSyBojvE89boyOqT01eKQd-UV_Dc4dpLRpzw&libraries=geometry&callback=initMap" async defer></script>
</body>

最佳答案

你的问题不太清楚……但是……你需要的是这样的http://jsfiddle.net/yorch/z67mxhbu/1/

只需将 markerlatlng 保留为全局变量,并在必要时存储它们(在本例中我选择了 Dragend 事件,但您可以 check all events here )

google.maps.event.addListener(marker, 'dragend', update);

然后在更新方法中发挥你的魔力,在我的例子中:

function update() {
var path = marker.getPosition();
lat = path.lat();
lng = path.lng()
alert("Lat: " + lat + "\nLon: " + lng);
}
<小时/>

注意: jsfiddle 基于 http://thinkingstiff.com/ 中的示例在this answer

关于javascript - 在 Javascript 中保存 Google map 坐标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48095949/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com