谷歌地图标记不会拖动
问题描述:
我一直在试图添加谷歌地图到我的网站,标记将显示用户的当前位置,用户可以拖动标记,位置名称将在文本框中。但是我的标记没有移动,也没有移动文本框中的位置,反之亦然。我想实现这一点: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());
});
}
任何日志或信息你遇到的错误? – goblin
没有。我可以查看地图和标记。但标记不动。 – Ash
您应该在创建标记后立即添加侦听器。 – goblin