gpt4 book ai didi

html - 谷歌地图标记不拖动

转载 作者:行者123 更新时间:2023-11-28 01:18:41 25 4
gpt4 key购买 nike

我一直在尝试将谷歌地图添加到我的网站,其中标记将显示用户的当前位置,用户可以拖动标记,位置名称将显示在文本框中。但是我的标记没有移动,还有如何获取文本框中的位置,反之亦然文本框在 map 上的位置。我想实现这个:enter link description here

    function initMap() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}

function showPosition(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon)
mapholder = document.getElementById('map')

var myOptions = {
center: latlon, zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControlOptions:
{ style:google.maps.NavigationControlStyle.SMALL }
}

var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: latlon,
map: map,
title: "Choose",
draggable: true
});


}

function showError(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}

updateMarkerPosition(latlon);
geocodePosition(latlon);

// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function () {
updateMarkerAddress('Dragging...');
});

google.maps.event.addListener(marker, 'drag', function () {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});

google.maps.event.addListener(marker, 'dragend', function () {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});



</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer>
</script>

最佳答案

如果你想使用监听器,这些应该位于你创建标记的地方,而不是在函数之外..

function showPosition(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon)
mapholder = document.getElementById('map')

var myOptions = {
center: latlon,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
navigationControlOptions:
{ style:google.maps.NavigationControlStyle.SMALL }
}

var map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: latlon,
map: map,
title: "Choose",
draggable: true
});

// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function () {
updateMarkerAddress('Dragging...');
});

google.maps.event.addListener(marker, 'drag', function () {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker.getPosition());
});

google.maps.event.addListener(marker, 'dragend', function () {
updateMarkerStatus('Drag ended');
geocodePosition(marker.getPosition());
});


}

关于html - 谷歌地图标记不拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34636675/

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