谷歌地图标记不会拖动

Question

我一直在试图添加谷歌地图到我的网站，标记将显示用户的当前位置，用户可以拖动标记，位置名称将在文本框中。但是我的标记没有移动，也没有移动文本框中的位置，反之亦然。我想实现这一点：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> 

Answer 1

，如果你想使用监听器，这些应该是找到您创建的标记，而不是功能外..

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()); 
    }); 


}