拖放后，将Google地图标记的新经度和经度保存到文本框中

Question

我一直在努力解决这个问题，我的问题是：

我在我的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>

Answer 1

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

标记拖动时会获得纬度和经度。您可以尝试所需的活动。

有关此内容的更多信息，请参阅Here

Answer 2

以下是http://jsfiddle.net/Blunk/x8dSP/8/中 Google Map API 3 的演示。

注意： 我在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>