1

我正在尝试在我的 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

我没有看到在任何地方定义了“L”，但是为什么从函数内部调用它会起作用？

4

1 回答 1

2

它在您的函数中起作用，因为 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');
};
于 2012-11-02T14:36:07.570 回答