<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入Google Maps API -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

<div id="map" style="width: 100%; height: 500px;"></div>

$(document).ready(function() {
    // 初始化地图
    var mapOptions = {
        center: new google.maps.LatLng(40.7128, -74.0060), // 纽约市坐标
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    
    // 创建可拖动标记
    var marker = new google.maps.Marker({
        position: mapOptions.center,
        map: map,
        draggable: true, // 设置为可拖动
        title: "拖动我!"
    });
    
    // 监听标记拖动事件
    marker.addListener('dragend', function(event) {
        // 获取拖动后的位置
        var newPosition = event.latLng;
        console.log("标记被拖动到: " + newPosition.lat() + ", " + newPosition.lng());
        
        // 可以在这里添加其他逻辑，如更新表单字段等
        $('#latitude').val(newPosition.lat());
        $('#longitude').val(newPosition.lng());
    });
    
    // 可选：添加点击地图放置新标记的功能
    google.maps.event.addListener(map, 'click', function(event) {
        // 移除旧标记
        if (marker) {
            marker.setMap(null);
        }
        
        // 创建新标记
        marker = new google.maps.Marker({
            position: event.latLng,
            map: map,
            draggable: true
        });
        
        // 更新表单字段
        $('#latitude').val(event.latLng.lat());
        $('#longitude').val(event.latLng.lng());
        
        // 重新绑定拖动事件
        marker.addListener('dragend', function(e) {
            $('#latitude').val(e.latLng.lat());
            $('#longitude').val(e.latLng.lng());
        });
    });
});

<form>
    <div>
        <label for="latitude">纬度:</label>
        <input type="text" id="latitude" name="latitude">
    </div>
    <div>
        <label for="longitude">经度:</label>
        <input type="text" id="longitude" name="longitude">
    </div>
</form>