如何让谷歌地图标记的坐标，并使用asp.net C＃将其存储在文本框或标签 [英] how to get the coordinates of google maps marker and store it in textbox or label using asp.net c#

问题描述

我试图获得标记的坐标和标记的经度和纬度存储到两个单独的标签。有越来越坐标并设置标签，以显示他们的可能途径？谢谢你。

I'm trying to get the marker's coordinates and store the latitude and longitude of the marker to two separate labels. Is there a possible way of getting the coordinates and setting the labels to display them? Thank you.

这里的code我尝试使用，但它不张贴坐标

Here's the code I tried to use but it doesn't post the coordinates

<asp:Label ID="lblLongitude" runat="server" Text="Longitude: "></asp:Label>
<asp:Label ID="lblLong" runat="server" Text="Label"></asp:Label>
<asp:Label ID="lblLatitude" runat="server" Text="Latitude: "></asp:Label>
<asp:Label ID="lblLat" runat="server" Text="Label"></asp:Label>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBXs9W71W5gGrizWme0rLZ7xS69_deZP6I"></script>
<script type="text/javascript">
    function updateLatPosition(latLng) {
        var lat = document.getElementById('HiddenLat');
        HiddenLat.value = event.latLng.lat();
    }

    function updateLongPosition(latLng) {
        document.getElementById('HiddenLong').innerHTML = event.latLng.lng();
    }

    function initialize() {
        var latLng = new google.maps.LatLng(14.581, 120.976);
        var map = new google.maps.Map(document.getElementById('map-canvas'),  
        {
            zoom: 12,
            center: latLng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var marker = new google.maps.Marker({
            position: latLng,
            title: 'Landmark Coordinates',
            map: map,
            draggable: true
        });

        google.maps.event.addListener(marker, 'drag', function () {                                    
            updateLatPosition(marker.getPosition());
            updateLongPosition(marker.getPosition());
        });

        google.maps.event.addListener(marker, 'dragend', function (event) {                                    
            updateLatPosition(marker.getPosition());
            updateLongPosition(marker.getPosition());
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

这里的codebehind：

Here's the codebehind:

lblLat.Text = HiddenLat.Value.ToString();
lblLong.Text = HiddenLong.Value.ToString();

谢谢，兰兹Bituin

Thanks, Lanz Bituin

推荐答案

你将不得不使用JavaScript / jQuery来做到这一点。

You're going to have to use javascript / jquery to do this.

在codebehind的code（例如 lblLat.Text = HiddenLat.Value.ToString（）; ）的服务器，在那里上运行网页被组装并随后提供给客户端。

The code in the codebehind (ex. lblLat.Text = HiddenLat.Value.ToString();) runs on the server, where the web page gets assembled and is subsequently served to the client.

一旦页面浏览器，你必须使用JavaScript / jQuery来操纵页面（例如，标签上的设定值）。

Once the page is on the browser, you have to use javascript / jquery to manipulate the page (ex. set values on labels).

如果纬度标签上有HiddenLat的ID，如果您有jQuery的，你可以用它来设置标签上的值：

If the latitude label has an id of 'HiddenLat', and if you have jquery, you can use this to set the value on the label:

修改

如果你没有的jQuery，无论是下载或从CDN引用它：

If you do not have jquery, either download it or reference it from a cdn:

<!-- Place this before any other <script> tags -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

我不是那熟悉的谷歌地图API，但尝试这种替换您updateLatPosition功能：

I'm not that familiar with the Google Maps API, but try replacing your updateLatPosition function with this:

function updateLatPosition(latLng) {
    var newLatValue = latLng.lat(); // get the latitude value from the latLng object
    console.log(newLatValue); // sanity check
    $('#HiddenLat').text(newLatValue ); // set the label value, assuming that the label has an id of 'HiddenLat'
}

和同样的updateLngPosition功能。

And similarly for the updateLngPosition function.

function updateLngPosition(latLng) {
    var newLngValue = latLng.lng(); // get the longitude value from the latLng object
    console.log(newLngValue); // sanity check
    $('#HiddenLng').text(newLngValue); // set the label value, assuming that the label has an id of 'HiddenLng'
}

这篇关于如何让谷歌地图标记的坐标，并使用asp.net C＃将其存储在文本框或标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！