getelementbyid无效

时间:2017-05-30 14:40:15

标签: javascript google-maps

我正在尝试编写一个简单的程序,在谷歌地图的帮助下检索用户的位置,并将格式化的地址分配给文本框。但它没有用。 这是我的代码:

   <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="getelementbyidproblemi.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="http://code.jquery.com/jquery-ui-1.12.1.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=MyKEY"></script>



</head>
<body>
    <form id="form1" runat="server">

        <div class="row">
            <asp:TextBox runat="server" ID="Site"></asp:TextBox>
        </div>
        <br />

        <div id="harita" style="width: 900px; height: 400px">
        </div>


        <script src="Scripts/jquery-3.1.1.min.js"></script>

        <script>
            $(document).ready(function () {
                var latlng = new google.maps.LatLng(41.016869, 29.138922);
                var myOptions = {
                    zoom: 10,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("harita"), myOptions);
                function displayLocation(latitude, longitude) {
                    var request = new XMLHttpRequest();
                    var method = 'GET';
                    var url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + ',' + longitude;
                    var async = true;
                    request.open(method, url, async);
                    request.onreadystatechange = function () {
                        if (request.readyState == 4 && request.status == 200) {
                            var data = JSON.parse(request.responseText);
                            var address = data.results[0];
                            console.log(address.formatted_address);
                            console.log(latitude);
                            document.getElementById('Site').innerHTML = address.formatted_address;
                        }
                    };
                    request.send();
                };
                var successCallback = function (position) {
                    var x = position.coords.latitude;
                    var y = position.coords.longitude;
                    displayLocation(x, y);
                };
                var errorCallback = function (error) {
                    var errorMessage = 'Unknown error';
                    switch (error.code) {
                        case 1:
                            errorMessage = 'Permission denied';
                            break;
                        case 2:
                            errorMessage = 'Position unavailable';
                            break;
                        case 3:
                            errorMessage = 'Timeout';
                            break;
                    }
                };
                var options = {
                    enableHighAccuracy: true,
                    timeout: 5000,
                    maximumAge: 0
                };
                navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
            });
        </script>
    </form>
</body>
</html>

感谢任何帮助

1 个答案:

答案 0 :(得分:0)

您需要使用控件ClientId。 Webforms使用复杂的命名方案呈现控件。右键单击元素,然后单击&#34; Inspect Element&#34;查看Webforms呈现的实际 ID。

而不是:

document.getElementById("Site")

使用:

document.getElementById('<%= Site.ClientID %>')