Question

我正在尝试在我的MVC 4网页上实现一些基于位置的服务功能。我是使用Javascript和MVC的新手，所以请耐心等待。

这是我目前的网页：

@{
    ViewBag.Title = "OnlineUsers";
}


<html>
<head>
    <title>Online Users</title>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>

</head>
<body>
    <button onclick="showMap()">Show Map</button>
    <button onclick="goToLocation()">My Location</button>
    <div id="locationDetails"></div>
    <div id="map" style="height: 500px; width: 800px"></div>

    <script type="text/javascript">
        **var map = L.map('map');**
        function showMap() {

            var map = L.map('map');
            L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
            }).addTo(map);

            map.locate({ setView: true, maxZoom: 16 });
        }

    </script>
</body>
</html>

在脚本部分的顶部是以下代码：var map = L.map('map');。如果我在函数中包含此代码，则页面加载并调用该函数会创建映射。但是，如果我将此代码（或任何其他JS代码）放在函数之外，则页面根本不会加载。

我使用了Chrome的调试器，控制台显示以下错误：

Uncaught ReferenceError: L is not defined

我没有看到＆＃39; L＆＃39;在任何地方定义，但是为什么在函数内部调用时这是有效的？

Answer 1

它在你的函数中起作用，因为L是leaflet的一部分，在调用函数时没有加载，而在页面加载时不加载。 L是其他东西的缩小表示。

通常会等到文档准备就绪，因此您可以确定已引用的js已加载，例如如果你有jQuery，那么

$(document).ready(function () {
    var map = L.map('map');
}

更新：加载这个js可能会很慢，所以你可以先检查它是否存在，例如。

window.setTimeout(initMap, 100); 

function initMap(){
         //this should check if your leaflet is available or wait if not. 
         if(typeof L=== "undefined"){
                window.setTimeout(initMap, 100);
                return;
         }
         var map = L.map('map');
};

函数外部的Javascript导致未捕获的引用异常

1 个答案: