Question

我将带有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>

Answer 1

根据您提供的新信息严重编辑了我的答案。 #map div是否可见？它需要高度和宽度。

我认为Google地图参考不会在下面的Stack Overflow片段中使用，但此代码在本地环境中有效。

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文件？

1 个答案: