在地图上绘制多边形时地图不显示答案

【问题标题】：Map not display when draw the polygon over the map在地图上绘制多边形时地图不显示
【发布时间】：2018-07-20 11:02:33
【问题描述】：

我正在努力显示距给定点最近的标记。在我的示例中，我的起点是用户位置，从这一点开始，我需要在数组列表中找到最近的标记。我找到了一个教程并开始研究它。但是当我尝试向其中添加地图时，地图没有显示，当我尝试放大或缩小时，标记也消失了。

这是迄今为止我今天尝试过的代码。谁能帮我看看这段代码有什么问题。

    var userLocation = new L.LatLng(13.7563, 100.5018);
    var map = L.map('map').setView(userLocation, 6);

    L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
    {
        attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
        maxZoom: 17,
        minZoom: 9
    }).addTo(map);

    var greenIcon = L.icon({
        iconUrl: 'icon/icon.png',
        iconSize: [64, 64]
    });

    //random locations around the world
    var items = [{
        //china
        lat: "7.9519",
        lon: "98.3381"
    }, {
        //colombia
        lat: "19.9105",
        lon: "99.8406"
    }, {
        //libya
        lat: "14.9930",
        lon: "103.1029"
    }];

    drawData();

    //draw all the data on the map
    function drawData() {
        var item, o;
        //draw markers for all items
        for (item in items) {
            o = items[item];
            var loc = new L.LatLng(o.lat, o.lon);
            createPolyLine(loc, userLocation);
        }
    }

    //draw polyline
    function createPolyLine(loc1, loc2) {

        var latlongs = [loc1, loc2];
        var polyline = new L.Polyline(latlongs, {
            color: 'green',
            opacity: 1,
            weight: 1,
            clickable: false
        }).addTo(map);

        //distance
        var s = 'About ' + (loc1.distanceTo(loc2) / 1000).toFixed(0) + 'km away from you.</p>';

        var marker = L.marker(loc1).addTo(map);
        if (marker) {
            marker.bindPopup(s);
        }
    }

【问题讨论】：

如果您检查您的 JS 控制台，您会看到磁贴服务器返回 403（禁止）错误。您访问的服务是否需要身份验证？
无需认证

标签： javascript leaflet

【解决方案1】：

这些图块仅限于Commonwealth of Massachusetts，因此您在随机位置的点不会显示。将积分更改为英联邦内部可以解决此问题：

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
    integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
    crossorigin=""/>
     <!-- Make sure you put this AFTER Leaflet's CSS -->
   <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>
</head>
<body>
<div id="map" style="width: 1366px; height: 720px;"></div>
<script>


var userLocation = new L.LatLng(42.237, -71.96);
    var map = L.map('map').setView(userLocation, 6);

    L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
    {
        attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
        maxZoom: 17,
        minZoom: 9
    }).addTo(map);

    var greenIcon = L.icon({
        iconUrl: 'icon/icon.png',
        iconSize: [64, 64]
    });

    //random locations around the Commonwealth
    var items = [{
        //Georgetown
        lat: "42.703",
        lon: "-70.98"
    }, {
        //Mattapoisett
        lat: "41.6577",
        lon: "-70.807"
    }, {
        //Otis
        lat: "42.1915",
        lon: "-73.08"
    }];

    drawData();

    //draw all the data on the map
    function drawData() {
        var item, o;
        //draw markers for all items
        for (item in items) {
            o = items[item];
            var loc = new L.LatLng(o.lat, o.lon);
            createPolyLine(loc, userLocation);
        }
    }

    //draw polyline
    function createPolyLine(loc1, loc2) {

        var latlongs = [loc1, loc2];
        var polyline = new L.Polyline(latlongs, {
            color: 'green',
            opacity: 1,
            weight: 1,
            clickable: false
        }).addTo(map);

        //distance
        var s = 'About ' + (loc1.distanceTo(loc2) / 1000).toFixed(0) + 'km away from you.</p>';

        var marker = L.marker(loc1).addTo(map);
        if (marker) {
            marker.bindPopup(s);
        }
    }
</script>
</html>

产生所需的输出：

【讨论】：

我添加了完整的代码，但我注意到当我尝试制作 Stack Snippet 时，地图没有加载。当我尝试一些平铺视图 URL 时，例如：tiles.mapc.org/#9/42.3565/-71.0623，它看起来不错。也许在我没有看到的地方存在权限问题？另一种选择是在此页面联系 MAPC：mapc.org/learn/data-tools