如何将数据从Code Behind传递给JavaScript？

Question

您好我无法将代码从（onLoad）后面的代码传递给javascript。 我能够获得可拖动标记的地址值（如果在javascript上静态声明INITIAL LAT和LONG值）。现在我尝试使用两个隐藏字段加载Code on ON上的ON Load值，问题是不显示地图和标记。这是我的代码

<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

希望得到你的帮助...

Answer 1

最简单的方法是使用 Literal 服务器控件，并传递该值。这有点奇怪，但它确实有效。

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会抱怨语法错误。你可以忽略它。

呈现代码