无法通过JQuery将Leaflet地图鼠标移动事件坐标渲染到HTML

问题描述 #

我是Leaflet、JavaScript和JQuery的初学者。在index.html页面中展示地图后，希望鼠标在地图上移动时，将鼠标指向的坐标显示在地图下方。为此在地图下方设置了class为"coordinate"的div，想要通过JQuery替换其内容来展示mousemove事件传递的坐标信息。目前控制台能正确打印mousemove事件及坐标数值，但页面div中显示的是硬编码的"Lat: ${e.latlng.lat} Long: ${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/leaflet@1.9.3/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 only 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/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script> -->

<script src="https://unpkg.com/leaflet@1.7.1/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 of the 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的模板字符串（支持${变量}语法）必须使用**反引号（`）**包裹，而你用了单引号，单引号/双引号只会把内容当作普通文本，不会解析其中的变量占位符。

只需要修改这一行代码：

$('.coordinate').html(`Lat: ${e.latlng.lat} Long: ${e.latlng.lng}`);

如果想要让坐标显示更整洁，可以添加精度控制，比如保留6位小数：

$('.coordinate').html(`Lat: ${e.latlng.lat.toFixed(6)} Long: ${e.latlng.lng.toFixed(6)}`);

内容的提问来源于stack exchange，提问作者Tms91