Question

我的JavaScript知识非常有限。我正在尝试使用“获取”从Spring Boot后端获取JSON文档，提取Lat和Lng并从JSON数据中将标记添加到Leaflet映射中。

以前，我设法做到了这一点，因为鼠标向上滚动和平移地图似乎无处不在。

Firefox调试器抱怨

TypeError: t is undefined和 TypeError: t is null

暂停暂停提供了更多详细信息，

inline.js 742：

SyntaxError：“ x / deep / x”不是有效的选择器

leaflet.js 5309：

TypeError：document.namespaces未定义

jquery-3.4.1.js 1336：

SyntaxError：'* ,: x'不是有效的选择器

jquery-3.4.1.js 1354：

SyntaxError：'[s！='']：x'不是有效的选择器

content.js 161：

TypeError：选项未定义

在 leaflet.js

中

这是我的 map.js 代码


    // set up map with centering coordinates
    var mymap = L.map('map').setView([48.4284, -123.3656], 2);

    // build Leaflet map using example from http://leafletjs.com/
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        zoomDelta: 0.25,
        minZoom: 2,
        maxZoom: 19,
        zoom: 5,
        attribution: 'Palantir relies on &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://mapbox.com">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);

    let conflictsJson;
    fetch('Conflicts').then(
        function (u) {
            return u.json();
        }
    ).then(
        function (json) {
            conflictsJson = json;
            var conflictMarkers = (function () {
                for (let index = 0; index < conflictsJson.length; index++) {

                    L.circleMarker([conflictsJson[index].latitude, conflictsJson[index].longitude], //προσθέτει συντεταγμένες στον χάρτη
                        {
                            radius: setRadius(conflictsJson, conflictsJson[index].location),
                            color: '#FF0000',
                            weight: 4,
                            opacity: 0.5,
                            fillOpacity: 0.25
                        }).bindPopup(conflictsJson[index].embeddedHtml, {maxWidth: 220})//Προσθέτει το link για το tweet στο popup παράθυρο
                        .addTo(mymap);
                }
            })();
        }
    );


    function setRadius(Conflicts, name) {
        let radius = 1;

        for (let index = 0; index < Conflicts.length; index++) {
            if (Conflicts[index].location === name) {
                radius++;
            }
        }
        return radius * 5;
    }

和 map.html


    <!DOCTYPE html>
    <html lang="en" xmlns:mvc="http://www.springframework.org/schema/mvc">
    <head>
        <meta charset="utf-8">
        <title>Palantir</title>
        <!-- LeafletJS Styles -->
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
              integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
              crossorigin=""/>
        <!-- LeafletJS API -->
        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
                integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
                crossorigin=""></script>
        <link rel="stylesheet" href="css/style.css">
        <mvc:resources location="/static/" mapping="/static/**"/>
    </head>
    <body>
    <div class="container">
        <!--Navigation-->
        <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky=top" id="navbar">
            <div class="container-fluid">
                <a class="navbar-brand" href="index.html"> <img alt="logo"
                                                                src="images/palantirlogo300.png"
                                                                style="width:4.5cm; height:2.5cm"> </a>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="index.html">Home</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="navbarDropdown">
                                Connect
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item" href="login.html">Log in</a>
                                <a class="dropdown-item" href="registerform.html">Register</a>
                                <div class="dropdown-divider"></div>
                            </div>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contact.html">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>
    <p>Interactive map of conflicts around the world</p>
    <div id="map"></div>
    <script
            src="https://code.jquery.com/jquery-3.4.1.js"
            integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
            crossorigin="anonymous"></script>
    <script type="text/javascript" src="map/map.js"></script>
    </body>
    </html>

Answer 1

原来，这是一个数据库问题。自上一个版本以来，JSON格式已更改。

宣传单：TypeError：t未定义

1 个答案: