Как передать данные из кода в JavaScript?

Привет у меня возникли проблемы с передачей значения из кода позади (onLoad) в javascript.
Я могу получить значение для адреса перетаскиваемого маркера (если начальное значение LAT и LONG объявлены статически на javascript). Теперь я попытался загрузить значение on on Load value на код позади с помощью двух скрытых полей проблема не показывает карту и маркер. Вот мой код

<div class="panel-body">

                    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyCPzl7Nmzd71jMSTi46X5tGxpLCuo2n1sy"></script>
<script type="text/javascript">


        var markers = [

            {

                "title": 'Target Location',
                //"lat": '43.7328831',
                //"lng": '-79.6784712',
                "lat": document.getElementById<%= HdLat.ClientID%>.value,
                "lng": document.getElementById<%= HdLng.ClientID%>.value,
                "description": ''
            }
        ];

        window.onload = function () {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var geocoder = geocoder = new google.maps.Geocoder();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            for (var i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title,
                    draggable: true,
                    animation: google.maps.Animation.DROP
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.description);
                        infoWindow.open(map, marker);
                    });
                    google.maps.event.addListener(marker, "dragend", function (e) {
                        var lat, lng, address;
                        geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) {
                            if (status == google.maps.GeocoderStatus.OK) {
                                lat = marker.getPosition().lat();
                                lng = marker.getPosition().lng();
                                address = results[0].formatted_address;
                                document.getElementById("mytext").value = address;

                            }
                        });
                    });
                })(marker, data);
                latlngbounds.extend(marker.position);
            }
            var bounds = new google.maps.LatLngBounds();
            map.setCenter(latlngbounds.getCenter());
            //map.fitBounds(latlngbounds);
        }


</script>
<div id="dvMap" style="width: 500px; height: 500px">
</div>
                   <br />



                    <div class="form-group"><asp:Label ID="Label1" runat="server"></asp:Label><br />
                        <input type="text" id="mytext"  class="form-control" name="Address"/>

             <asp:Button ID="Button1" runat="server" Text="Button" />
                        <%--<asp:ImageButton ID="ImageButton4" runat="server" class="popovers" AlternateText="Point Location" Height="28px" ImageAlign="AbsMiddle" ImageUrl="~/img/maploc.png" Width="28px" data-original-title="Locate" data-content="Locate by means of map " data-placement="right" data-trigger="hover" />--%>
                        <asp:HiddenField ID="HdLat" runat="server" />
                         <asp:HiddenField ID="HdLng" runat="server" />
                    </div>

Код позади

 Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        HdLat.Value = "43.7328831"
        HdLng.Value = "-79.6784712"
    End Sub

Надеюсь на вашу любезную помощь…

1 ответ

  1. Самый простой способ — использовать Литеральный серверный элемент управления и передать значение. Это немного странно, но это работает.

    var markers = [{
       ...
       "lat": <asp:Literal runat="server" ID="LatLiteral" />,
       "lng": <asp:Literal runat="server" ID="LngLiteral" />
    }];
    
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
       LatLiteral.Text = "43.7328831"
       LngLiteral.Text = "-79.6784712"
    End Sub
    

    Visual Studio

    Обратите внимание, что Visual Studio будет жаловаться на синтаксическую ошибку. Вы можете игнорировать его.

    Введите описание изображения здесь

    Отрисованный Код

    Введите описание изображения здесь