1

MVC 4 Web ページにロケーションベースのサービス機能を実装しようとしています。私は 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 に答える