Fatal编程技术网

将MSSQL表值传递给javascript

javascript sql-server asp.net-mvc google-maps google-maps-api-3

将MSSQL表值传递给javascript,javascript,sql-server,asp.net-mvc,google-maps,google-maps-api-3,Javascript,Sql Server,Asp.net Mvc,Google Maps,Google Maps Api 3,我正在尝试使用asp.NETMVC4和EF6创建一个网站，在这里我希望将值从MSSQL表传递到javascript。到目前为止，一切正常，除非我为谷歌地图api函数传递纬度和经度值，否则地图不会显示在我的视图中。我使用Html.HiddenForhelper从传递值。这是我的密码 <script> function initialize() { var marker; var Lat = parseFloat(document.getEleme

我正在尝试使用asp.NETMVC4和EF6创建一个网站，在这里我希望将值从MSSQL表传递到javascript。到目前为止，一切正常，除非我为
谷歌地图api
函数传递
纬度
和
经度
值，否则地图不会显示在我的视图中。我使用
Html.HiddenFor
helper从
传递值。这是我的密码

<script>
    function initialize() {
        var marker;
        var Lat = parseFloat(document.getElementById("Lat").value);
        var Lng = parseFloat(document.getElementById("Lng").value);
        var mapProp = {
            center: new google.maps.LatLng(Lat, Lng),
            zoom: 18,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(Lat, Lng),
            animation: google.maps.Animation.BOUNCE
        });

        marker.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
    <div id="googleMap"></div>
    @Html.HiddenFor(model => model.Latitude, new { id = "Lat" })
    @Html.HiddenFor(model => model.Longitude, new { id = "Lng" })
</body>
控制器

public ActionResult BranchDetails(int BrId)
    {
        Branch branchDetails = abdb.Branches.Find(BrId);
        return View(branchDetails);
    }
查看

<script>
    function initialize() {
        var marker;
        var LatTag = document.getElementById("Lat");
        var Lat = LatTag.getElementsByTagName("span");
        var LngTag = document.getElementById("Lng");
        var Lng = LngTag.getElementsByTagName("span");
        var mapProp = {
            center: new google.maps.LatLng(LatTag, LngTag),
            zoom: 18,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(Lat, Lng),
            animation: google.maps.Animation.BOUNCE
        });

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

<body>
    <div class="container well" style="min-width: 100%; padding-right: 5px;">        
        <div id="googleMap"></div>
        <span id="Lat">@Html.HiddenFor(model => model.Latitude)</span>
        <span id="Lng">@Html.HiddenFor(model => model.Longitude)</span>
        <h4><b>@Html.DisplayFor(model => model.Title)</b></h4>
        <p><strong>Address:</strong> @Html.DisplayFor(model => model.Address)</p>
        <p><strong>Contact No. :</strong> @Html.DisplayFor(model => model.ContactNo)</p>
        <p><strong>Contact Person(s):</strong> @Html.DisplayFor(model => model.ContactPerson)</p>
    </div>
</body>


函数初始化（）{
var标记；
var LatTag=document.getElementById（“Lat”）；
var Lat=LatTag.getElementsByTagName（“span”）；
var LngTag=document.getElementById（“Lng”）；
var Lng=LngTag.getElementsByTagName（“span”）；
var mapProp={
中心：新google.maps.LatLng（LatTag，LngTag），
缩放：18，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
marker=新的google.maps.marker({
位置：新google.maps.LatLng（Lat，Lng），
动画：google.maps.animation.BOUNCE
});
marker.setMap（map）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
@Html.HiddenFor（model=>model.Latitude）
@Html.HiddenFor（model=>model.Longitude）
@DisplayFor（model=>model.Title）
地址：@Html.DisplayFor（model=>model.Address）

联系人号码：@Html.DisplayFor（model=>model.ContactNo）

联系人：@Html.DisplayFor（model=>model.ContactPerson）
需要注意的是，MSSQL中的my
经度
和
纬度
字段设置为
varchar
模式。我不确定这是否是导致问题的原因，但我觉得有必要告知。我怎样才能解决这个问题？我非常需要这个帮助。Tnx.

别担心，我找到了自己的解决方案。这对我来说很有效，我没有给span id，而是给
Html.HiddenFor
helper id。出于某种原因，我猜javascript没有选择span的id。这是我的密码

<script>
    function initialize() {
        var marker;
        var Lat = parseFloat(document.getElementById("Lat").value);
        var Lng = parseFloat(document.getElementById("Lng").value);
        var mapProp = {
            center: new google.maps.LatLng(Lat, Lng),
            zoom: 18,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

        marker = new google.maps.Marker({
            position: new google.maps.LatLng(Lat, Lng),
            animation: google.maps.Animation.BOUNCE
        });

        marker.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<body>
    <div id="googleMap"></div>
    @Html.HiddenFor(model => model.Latitude, new { id = "Lat" })
    @Html.HiddenFor(model => model.Longitude, new { id = "Lng" })
</body>


函数初始化（）{
var标记；
var Lat=parseFloat（document.getElementById（“Lat”）.value）；
var Lng=parseFloat（document.getElementById（“Lng”）.value）；
var mapProp={
中心：新google.maps.LatLng（Lat，Lng），
缩放：18，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
marker=新的google.maps.marker({
位置：新google.maps.LatLng（Lat，Lng），
动画：google.maps.animation.BOUNCE
});
marker.setMap（map）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
@Html.HiddenFor（model=>model.Latitude，new{id=“Lat”}）
@Html.HiddenFor（model=>model.Longitude，新的{id=“Lng”}）