Question

我想获取传单中点击事件的纬度经度，并在JSON中返回lat long以获取以下代码： - 我必须包含哪些JSON代码才能获得以下格式的结果： -

{
    click_1: {
        lattitude: "bac",
        longtude: "cde"
    }
    click_2: {
        lattitude: "bac",
        longtude: "cde"
    }
}

 <html>
    <head>
    <body>
    <button name="GetJSON" value="OK" type="button" onclick="getJSON()">getJSON</button>  
    </body>
    <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>

        <div id="mapid"></div>
        <style>
        #mapid { height: 180px; }
        </style>

        <script>
        var mymap = L.map('mapid').setView([51.505, -0.09], 13);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicHJpeWFua2FtbWkiLCJhIjoiY2l1amxrOWptMDAwNTJ6cm81NngxbXA3cSJ9.8UCyiu8D0ShQNzEs5ze9dw', {
        attribution: 'Map data &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>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'your.mapbox.access.token'
    }).addTo(mymap);
    function onMapClick(e) {
        // alert("You clicked the map at " + e.latlng);
        // document.write(' <?php insert(e.latlng); ?> ');

    }
    mymap.on('click', onMapClick);

    </script>

    </head>
    </html>

Answer 1

您可以在数组对象中追加数据，而不是将其添加到json

 <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
   integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
   crossorigin=""></script>

    <div id="mapid"></div>
    <style>
    #mapid { height: 180px; }
    </style>

    <script>
     var JsonData = {}; 
     var mymap = L.map('mapid').setView([51.505, -0.09], 13);
     L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoicHJpeWFua2FtbWkiLCJhIjoiY2l1amxrOWptMDAwNTJ6cm81NngxbXA3cSJ9.8UCyiu8D0ShQNzEs5ze9dw', {
     attribution: 'Map data &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>',
     maxZoom: 18,
     id: 'mapbox.streets',
     accessToken: 'your.mapbox.access.token'
  }).addTo(mymap);

  var i =1;   
  function onMapClick(e) {
    // alert("You clicked the map at " + e.latlng);
    // document.write(' <?php insert(e.latlng); ?> ');
   console.log(e.latlng);
   var lat = e.latlng.lat;
   var lng = e.latlng.lng;
   var key = 'click_'+i;
   JsonData[key] = {latitude:lat,longtitude:lng };
   i++;
   console.log(JsonData); 
}
mymap.on('click', onMapClick);

</script>

Answer 2

你做得非常正确，你将通过以下代码获得经纬度。

function onMapClick(e) {

            alert("latitude " + e.latlng.lat);
            alert("longitude " + e.latlng.lng);
        // alert("You clicked the map at " + e.latlng);
        // document.write(' <?php insert(e.latlng); ?> ');

    }

从javascript函数返回JSON

2 个答案: