Question

的index.html

<!DOCTYPE html>

    <title>BookSmart</title>
    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

</head>

<body>
    <h1>BookSmart</h1>

    <p>Here's a new BookSmart</p> 

  <div class="map-wrap">
    <div id="map" style="height: 440px; width: 1325px; border: 1px solid #AAA;"></div>
        </div>
    <div class="col-lg-6">
        <div class="input-group">
            <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Category</button>
            <input type="text" class="form-control" size="192" placeholder="Search a desired services...">
                <span class="input-group-btn">
                    <button class="btn btn-default" type="button">Search!</button>
                </span>
             </span>
         </div>
     </div>



    <script>
        var map = L.map('map').setView([51.505, -0.09], 13);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '$copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            maxZoom: 18
        }).addTo(map);.

    </script>


    <script type="text/javascript">
    map.locate({setView: true ,maxZoom: 16});

    function onLocationFound(e) {
        var radius = e.accuracy / 2;

        L.marker(e.latlng, radius).addTo(map);
            .bindPopup("You are within " + radius + " meters from this point").openPopup();

        L.circle(e.latlng, radius).addTo(map);
    }

    map.on('locationfound', onLocationFound);

    function onLocationError(e) {
        alert(e.message);
    }

    map.on('locationerror', onLocationError);


    </script>

    <script type='text/javascript' src="leaflet/leafletembed.js"></script>
    <script type="text/javascript" src="maps/marker.json"></script>


    <script type='text/javascript' src="../marker/marker.js"></script>
    <script type='text/javascript' src="../map/maps.js"></script>


 </body>

我几乎测试了所有东西。当我只创建一个只包含div id和tile图层的简单代码时，它确实有效，但是当我开始自定义代码以变得更具交互性时，什么都没有出现。这就是我几乎所有的时间

This is the only result get. Could someone help me on this?

Answer 1

您的第一个内联script块中存在多个语法错误：

在归因字符串后缺少逗号（,）。
tileLayer语句末尾的额外点（.）（在addTo(map);.之后）

在下一个内联script块中：

标记语句第一行末尾但在bindPopup（;）

addTo(map);.bindPopup

正如@Jason所建议的那样，浏览器控制台是第一个调试工具之一（在大多数浏览器上点击F12打开开发人员面板）。

传单地图根本没有出现

1 个答案: