拖放后将 Google Map Marker 的新纬度和经度保存到文本框

Posted 2023-02-22

【中文标题】拖放后将 Google Map Marker 的新纬度和经度保存到文本框

【英文标题】：Save Google Map Marker's new latitude and longitude to textboxes after drag-and-drop

【发布时间】：2013-10-11 13:55:17

【问题描述】：

我已经为此苦苦挣扎了几个小时，我的问题是：

我在我的 asp 页面中创建了一个谷歌地图，我想通过点击地图在文本框中显示 lat 和 lng。

这里是代码。

javascript：

    var map;
    var marker = null;
    var latitudeTextBox = $("#<%= LatitudeTextBox.ClientID %>");
    var longitudeTextBox = $("#<%= LongitudeTextBox.ClientID %>");

function initialize() 

    var myCenter = new google.maps.LatLng(-33, 150.75);


    var mapOption =
    
        center: myCenter,
        zoom: 7,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    ;

    map = new google.maps.Map(document.getElementById("googleMap"), mapOption);

    google.maps.event.addListener(map, 'click', function (event) 
        createNewMarker(event.LatLng,map);
    );

    google.maps.event.addDomListener(window, 'load', initialize);


function createNewMarker(location,map) 
    if (marker != null)
        marker.setMap(null);
    marker = new google.maps.Marker(
        position: location,
        animation: google.maps.Animation.BOUNCE,
        map: map,
    );

    var infowindow = new google.maps.InfoWindow(
        content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
    );

    infowindow.open(map, marker);

    latitudeTextBox.val(location.lat());
    longitudeTextBox.val(location.lng());

asp:

<asp:TextBox id="LatitudeBox" runat="server" text=""></asp:TextBox>

<asp:TextBox id="LongitudeBox" runat="server" text=""></asp:TextBox>

【问题讨论】：

需要更多代码才能弄清楚

【参考方案1】：

这是 Google Map API 3 的演示，http://jsfiddle.net/Blunk/x8dSP/8/。

注意：我在 jsfiddle 中使用 jQuery(document).ready 来初始化地图。

<table>
    <tr>
        <td>Latitude:</td>
        <td>Longitude:</td>
    </tr>
    <tr>
        <td>
            <asp:TextBox runat="server" ID="LatitudeTextBox" Text="33.976222" /></td>
        <td>
            <asp:TextBox runat="server" ID="LongitudeTextBox" Text="-118.281698" /></td>
    </tr>
</table>
<div id="map_canvas" style="width: 300px; height: 300px">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">

    var map;
    var marker;
    var latitudeTextBox = $("#<%= LatitudeTextBox.ClientID %>");
    var longitudeTextBox = $("#<%= LongitudeTextBox.ClientID %>");

    function initialize() 

        var centerLatlng = new google.maps.LatLng(latitudeTextBox.val(), longitudeTextBox.val());

        var mapOptions = 
            zoom: 10,
            center: centerLatlng,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            mapTypeControl: true,
            mapTypeControlOptions:  style: google.maps.MapTypeControlStyle.DEFAULT ,
            navigationControl: true,
            navigationControlOptions:  style: google.maps.NavigationControlStyle.DEFAULT 
        ;

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        marker = new google.maps.Marker(
            draggable: true,
            map: map,
            position: centerLatlng
        );

        google.maps.event.addListener(marker, 'dragend', function() 
            var curLatLng = marker.getPosition();
            latitudeTextBox.val(curLatLng.lat());
            longitudeTextBox.val(curLatLng.lng());
        );

        google.maps.event.trigger(marker, "click");

    

    google.maps.event.addDomListener(window, 'load', initialize);

</script>

【讨论】：

我试图在 jsfiddle 上运行代码，它工作，但是当我通过我的 Visual Studio 运行它时它没有工作。

你成功了吗？如果没有，创建一个新的 ASPX 页面（没有母版页），并复制上面的代码进行测试。上面的代码我已经测试过了。

不，它没有用，我猜问题是点击事件，当我用 'myCenter' 替换 'event' 参数时，它会显示标记，但我期望的是我在任何地方点击地图。应该删除一个标记并显示一个信息窗口。请帮帮我

好吧，我完成了标记。但现在新问题来了，我无法将当前的 latlng 更新到我的文本框。如果可能，请提供帮助

@RunningDonkey 您的问题与原始帖子不同。 SO 并非旨在像论坛一样来回聊天。请用代码创建一个新问题，并解释你卡在哪里。

【参考方案2】：

google.maps.event.addListener(marker, "drag", function()
    document.getElementById("LatitudeBox").value=marker.getPosition().lat();
    document.getElementById("LongiitudeBox").value=marker.getPosition().lng();
);

标记拖动时会得到纬度和经度。你可以试试你需要的事件。

请参阅Here了解更多信息

【讨论】：

这也不考虑生成的客户端 ID。