Question

我一直在尝试向我的网页添加一个Leaflet映射，但是无法正确呈现。加载页面时，页面仅显示为灰色框，直到开始缩小后我才能看到任何内容。我可能找不到我无法找到的基本东西。

我在新西兰添加了较长的经纬度坐标，但没有用，所以我改了纬度顺序，只要其他人建议也行不通。我还添加了一个标记来测试显示的位置，该标记应该在新西兰惠灵顿，但它似乎显示在海洋中的某个地方。我也不确定我应该使用什么变焦，我尝试了各种不同的数字，但是它看起来总是一样的，直到我立即变焦到距离我的目标新西兰都不远时，那里什么都没有。

JS：

def flatten(d):
    res = []  # type:list  # Result list
    if isinstance(d, dict):
        for key, val in d.items():
            res.extend(flatten(val))
    elif isinstance(d, list):
        for val in d:
            res.extend(flatten(val))
    elif isinstance(d, float):
        res = [d]  # type: List[float]
    elif isinstance(d, str):
        res = [d]  # type: List[str]
    elif isinstance(d, int):
        res = [d]  # type: List[int]
    else:
        raise TypeError("Undefined type for flatten: %s" % type(d))
    return res

HTML：

// initialize the map on the "map" div with a given center and zoom
var mymap = L.map('mapContainer').setView([40.9006, 174.8860], 5);

var Esri_WorldGrayCanvas = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
    maxZoom: 18
}).addTo(mymap);

var marker = L.marker([41.2784, 174.7767]).addTo(mymap)
.bindPopup('The Beehive Wellington, house of Parliament')

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <!--CSS STYLE SHEET REFERENCE-->
    <link rel="stylesheet" href="ass

<!--SCRIPTS-->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
    <script type="text/javascript" src="https://cdn.emailjs.com/sdk/2.3.2/email.min.js"></script>
    <script type="text/javascript">
        (function() {
        emailjs.init("user_6IJi6iUGTMBKBwowkfsSh");
        })();
    </script>
    <script src="assets/js/sendEmail.js"></script>
    <script type="text/javascript" src="assets/js/script.js"></script>

我希望在页面渲染后能自己看到一张新西兰地图，并在北岛底部的惠灵顿上看到一个标记。当它完成渲染时，它已经放大到最大，我看不到任何东西，我必须缩小到远方，但是在新西兰附近就没有了，惠灵顿的标记位于太平洋的顶部。

Answer 1

您为新西兰和[lat, lng]使用了错误的Wellington。

应该是

var mymap = L.map('mapContainer').setView([-40.9006, 174.8860], 5);

var marker = L.marker([-41.2784, 174.7767]).addTo(mymap)

传单地图无法正确呈现

1 个答案: