无法通过 jQuery 将事件中的数据获取到 HTML 中 [duplicate]-解网

问：

这个问题在这里已经有答案了：

像“some ${string}”或“some ${string}”这样的模板文字不起作用（8 个答案）

11个月前关闭。

我是传单和javascript，jquery的初学者。

我有一个 index.html 页面，我在其中显示地图，然后我希望当用户将鼠标移到地图上时，鼠标指向的坐标会打印在地图下方。

为了做到这一点，我在地图下有一个 div 元素，其 id 为“coordinate”，我想用 jquery 替换它，其中包含来自事件“mousemove”的信息，当鼠标在地图上移动时触发。

下面是我的代码。

一切正常，并且正确地将mousemove事件和两个坐标编号打印到我的控制台中，除了要重新放置的html文本被硬编码为div asconsole.log(...)

经度：${e.latlng.lat} 多头：${e.latlng.lng}

并且来自事件的信息不会被替换。

就像它不能解释为变量一样。${...}

怎么了？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>leaflet geoproject</title>

    <style>
        #map{
            width: 100%;
            height: 700px;
        }
    </style>

    <!-- Include Leaflet CSS file in the head section of your document: -->
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
     integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI="
     crossorigin=""/>



</head>

<body>
    <!--  this is where i want my map to be -->
    <div style="height: 500px; width: 90%;" id="map"></div>
    <!-- set this style onòy to fit the screen where i am developing -->

    <button onclick=fullScreenview()>View in full screen</button>
    <!-- this is a user defined function -->

    <div class="coordinate">void</div>

</body>

</html>

<!-- Include Leaflet JavaScript file after Leaflet’s CSS: -->
<!-- Make sure you put this AFTER Leaflet's CSS -->
<!-- <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script> -->

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<!-- load jquery. I put this after leaflet -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 

<script>
    // initializig the class map
    var map = L.map('map').setView([44.8683931,9.2651729], 15);
    map.zoomControl.setPosition('topright');

    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    L.marker([44.8683931,9.2651729]).addTo(map)
        .bindPopup('lable on my pointer.')
        .openPopup();

    // add map scale
    L.control.scale().addTo(map);

    // full sreeen function
    var mapId = document.getElementById('map');

    function fullScreenview() {
        mapId.requestFullscreen();
    }

    // display the coordinates of the point pf hte map where the mouse is
    // i need jquery for this

    // when the mouse is over the map - when the map fires the event mousemove
    map.on('mousemove', function(e) {


        // this is a nice way to chek if the info I want is got correctly
        console.log(e);
        console.log(e.latlng.lat);
        console.log(e.latlng.lng);

        // replace the content of the element having class coordinate with the html
        $('.coordinate').html('Lat: ${e.latlng.lat} Long: ${e.latlng.lng}');
    })

</script>

JavaScript jQuery 活动宣传册 jquery-events

无法通过 jQuery 将事件中的数据获取到 HTML 中 [duplicate]

cannot get and data from an event into html via jquery [duplicate]

评论

评论