为什么我无法将纬度和经度传递给 JavaScript 文件？答案

【问题标题】：Why am I not able to pass latitude and longtitude to a JavaScript file?为什么我无法将纬度和经度传递给 JavaScript 文件？
【发布时间】：2017-12-13 23:23:49
【问题描述】：

我将带有 lat 和 long 变量的数据库中的模型传递给视图，然后视图将其传递给 javascript 文件。但是每当我运行该网站时，我都会收到未定义 Lat 和 Lng 的错误。它们不知何故不存在。虽然我可以从视图中访问它们并且值绝对正确，但我检查了它确实被传递给视图。为什么我不能正确地将视图中的变量传递给 JS 文件？

function initMap() {
            var uluru = { lat: Lat, lng: Lng };
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 15,
                center: uluru
            });
            var marker = new google.maps.Marker({
                position: uluru,
                map: map
            });
        }



        using System;
        using System.Collections.Generic;
        using System.Linq;
        using System.Threading.Tasks;

        namespace Google.Models
        {
            public class Marker
            {
                public int MarkerID { get; set; }
                public string Adres { get; set; }
                public float Lat { get; set; }
                public float Lng { get; set; }
            }
        }

    @model Google.Models.Marker


    <!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="~/css/custom.css">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <script src="~/js/googleMap.js"></script>
        <script>
            var Lat = @Model.Lat
            var Lng = @Model.Lng
        </script>
    </head>
    <body>

        <h1>@Lat</h1>
        <div class="container">
            <center><h1>Responsive Google Map</h1></center>
            <div class="row">    
                <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7 top-buffer">
                    <div id="map"></div>
                </div>
                <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5 top-buffer"></div><h1>Contact Informatie</h1></div>
            </div>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUxVA8CRavXv6yP5M4rIuSK9xJt8kgPwg&callback=initMap"></script>
    </body>
    </html>

【问题讨论】：

How do you pass variables from c# to javascript?的可能重复
不，我遇到了麻烦
您遇到问题并不意味着它不是骗子。
真的不一样。他在另一个话题上遇到了麻烦。
使用var Lat = @Html.Raw(Json,Encode(Model.Lat)) 将模型值正确分配给您的变量

标签： javascript html asp.net-mvc

【解决方案1】：

根据您提供的新信息对我的答案进行了大量编辑。 #map div 是否可见？它需要一个高度和宽度。

我不认为 Google 地图参考将在下面的 Stack Overflow sn-p 中工作，但此代码在本地环境中工作。

function initMap() {
      var uluru = { lat: Lat, lng: Lng };
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 15,
        center: uluru
      });
      var marker = new google.maps.Marker({
        position: uluru,
        map: map
      });
      
      console.log(Lat);
      console.log(Lng);
    }

<html>
	<script>
		var Lat = 43.5765631;
		var Lng = -116.274815;
	</script>

	<body>
    <div id="map" style="height: 100%; width: 100%;"></div>
		<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUxVA8CRavXv6yP5M4rIuSK9xJt8kgPwg&callback=initMap"></script>
	</body>
</html>

【讨论】：

我刚才试过了，它给了我同样的错误
您是在 JavaScript 控制台中收到实际的错误消息还是只是无法正常工作？
我修复了错误。分配值时剃刀语法不好，但现在我得到一个空地图。好像变量类型不太好？
是的，这绝对有效。但是我无法使用从数据库中检索到的变量并使用“@Html.Raw(Model.Lng)”，因此无法使用模型。你知道为什么我在 HTML 脚本 var 值赋值中使用变量时得到一个带值的工作图和一个空的灰色不工作图吗？
我不确定，这可能是许多事情之一。你的 ViewModel 在传递给视图时肯定有数据吗？