如何在开放的街道地图上添加标记而不提及经纬度答案

【问题标题】：How can i add marker on open street map without mentioning lat long如何在开放的街道地图上添加标记而不提及经纬度
【发布时间】：2020-05-12 05:24:10
【问题描述】：

我的代码显示地图，标记仅在代码中提到经纬度的区域弹出，但对于我的 Web 应用程序，我希望用户触摸任何区域，并且标记显示为弹出显示该地点的经纬度和其他属性

【问题讨论】：

到目前为止您尝试过什么？您的问题是关于特定图书馆的吗？ Leaflet 和 OpenLayers 都允许返回 onClick 事件的坐标。
这是我在编码和 Web 应用程序开发方面的第一手经验......到目前为止，我已经使用传单展示了一个简单的开放街道地图。我看过一些教程，但无法理解代码。如果我能得到一个简单的代码来在地图上添加标记并带有 popup.message 以了解目的，那就太好了。
对于传单检查gis.stackexchange.com/a/210102/23837。

标签： openstreetmap marker

【解决方案1】：

<!DOCTYPE html>

<html>
<head>
<title>Inline Map</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body background="G:\Intership\sfedit.jpeg" style="width:100%">


<p style="text-align:centre;">Learn for free</p>
    <!-- To display the map -->
        <div id="map"></div>

    <!-- Map Code -->   
            <script>
    // Create variable to hold map element, give initial settings to map
        var map = L.map('map',{ center: [18.5214280, 73.8544541], zoom: 14});

        // Add OpenStreetMap tile layer to map element
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(map);

       // Create an Empty Popup
        var popup = L.popup();

        // Write function to set Properties of the Popup
        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(map);
        }

        // Listen for a click event on the Map element
        map.on('click', onMapClick);
                  fetch('https://cdn.glitch.com/3b46ae34-c2e2-48fe-b99c-5bb9412d0e1a%2Fpmpml_geojson_busstop.geojson?v=1589713237973')
                .then(function (response){
                return response.json();
                })
                .then(function(data){
                L.geoJson(data,{
                onEachFeature: function (feature, layer) {
                    layer.bindPopup("bus stop name:"+feature.properties['stop_name']+ "<br>stop code:"+feature.properties['stop_code']+ "<br>Latitude:"+feature.properties['stop_lat']+ "<br>Longitude:"+feature.properties['stop_lon']);
                }
                }).addTo(map);
                });

                fetch('https://cdn.glitch.com/3b46ae34-c2e2-48fe-b99c-5bb9412d0e1a%2FPune_streetfile.geojson?v=1589720389890')
                .then(function (response){
                return response.json();
                })
                .then(function(data){
                L.geoJSON(data).addTo(map);
                });


            </script>
</body>
</html>

【讨论】：

我已经使用 fetch 函数在地图上显示我的 geojson 数据并且它工作成功，但唯一的问题是我的地图需要时间来加载。

【解决方案2】：

`//从给定的URL获取geojson数据获取（“https://cdn.glitch.com/3b46ae34-c2e2-48fe-b99c-5bb9412d0e1a%2Fpmpml_surgeon_busstop.geojson?v=1589713237973” ) .then（函数（响应）{ 返回响应.json(); }) .then（函数（数据）{ //为集群添加代码 var clusters = L.markerClusterGroup(); var 事件 = L.geoJson（数据，{ pointToLayer：函数（特征，纬度）{ var 标记 = L.marker(latlng); 标记.bindPopup( "巴士站名：" + feature.properties["stop_name"] + "
停止代码：" + feature.properties["stop_code"] + "
纬度：" + 特征.properties["stop_lat"] + "
经度：" + 特性.properties["stop_lon"]); 返回标记； }, onEachFeature：函数（特征，层）{ layer.addTo(集群); } }); map.addLayer（集群）； });

【讨论】：

此代码似乎不起作用。我想使用标记集群插件为我的标记创建集群。我经历了所有可能的解决方案，但似乎什么也没发生。地图数据正在显示，但是当我添加标记集群时，我的数据消失了