2023年4月13日 15:03:10go评论124阅读模式

英文:

Reading and getting Folium Marker coordinates once the user clicks on the map

问题

我找到了这段代码点击这里并编辑以在用户点击地图以添加标记时在文本区域字段中显示标记坐标，但出现错误 Uncaught TypeError: document.getElementById(...) is null。

我需要有人帮助使这个功能正常工作。谢谢。

map = folium.Map(location=[lat, lng], zoom_start=20)
marker = folium.Marker(
    [lat, lng],
    zoom_start=20,
    tooltip=tooltip,
    width=100,
    height=70,
    icon=folium.Icon(color="red", icon=""),
    popup=site,
).add_to(map)
map.add_child(folium.LatLngPopup())

mapJsVar = map.get_name()

map.get_root().html.add_child(
    folium.Element(
        """
    <script type="text/javascript">

    $(document).ready(function () {
    {map}.on("click", addMarker);

    function addMarker(e) {
        const marker = new L.marker(e.latlng, {
        draggable: true,
        }).addTo({map});
        document.getElementById('clk_lat1').innerHTML = marker.getLatLng().lat;
        document.getElementById('clk_lng1').innerHTML = marker.getLatLng().lng;
    }
    });

    </script>
    """.replace(
            "{map}", mapJsVar
        )
    )
)
map = map._repr_html_()
context = {"map": map}

这是 HTML 代码：

<div align="center" class="form-group"></div>
<p style="font-size:18px; color:blue;">Marker Location:</p>
<div>
   Lat:  
   <text-area name="clk_lat1" id="clk_lat1"></text-area>
   Lng: 
   <text-area name="clk_lng1" id="clk_lng1"></text-area>
</div>
</div>

英文:

I found this code click here and edited to show the marker coordinates in textarea field once the user clicks on the map to add a marker but it gave an error Uncaught TypeError: document.getElementById(...) is null.

I need someone to help making this works. thank you.

map = folium.Map(location=[lat, lng], zoom_start=20)
# country = location.country
marker = folium.Marker(
    [lat, lng],
    zoom_start=20,
    tooltip=tooltip,
    width=100,
    height=70,
    icon=folium.Icon(color=&quot;red&quot;, icon=&quot;&quot;),
    popup=site,
).add_to(map)
map.add_child(folium.LatLngPopup())

mapJsVar = map.get_name()

map.get_root().html.add_child(
    folium.Element(
        &quot;&quot;&quot;
&lt;script type=&quot;text/javascript&quot;&gt;

$(document).ready(function () {
{map}.on(&quot;click&quot;, addMarker);

function addMarker(e) {
    // ustawiamy aby marker był przesuwalny
    const marker = new L.marker(e.latlng, {
    draggable: true,
    }).addTo({map});
    document.getElementById(&#39;clk_lat1&#39;).innerHTML = marker.getLatLng().lat;
    document.getElementById(&#39;clk_lng1&#39;).innerHTML = marker.getLatLng().lng;
}
});

&lt;/script&gt;
&quot;&quot;&quot;.replace(
            &quot;{map}&quot;, mapJsVar
        )
    )
)
map = map._repr_html_()
context = {&quot;map&quot;: map}

this is the HTML code:

&lt;div align=&quot;center&quot; class=&quot;form-group&quot;&gt;&lt;/div&gt;
&lt;p style=&quot;font-size:18px; color:blue;&quot;&gt;Marker Location:&lt;/p&gt;
&lt;div &gt;
   Lat:  
   &lt;text-area name=&quot;clk_lat1&quot; id = &quot;clk_lat1&quot; &gt;
   &lt;/text-area&gt;
   Lng: 
   &lt;text-area name=&quot;clk_lng1&quot; id = &quot;clk_lng1&quot; &gt;&lt;/text-area&gt;
&lt;/div&gt;
&lt;/div&gt;

答案1

得分: 2

以下是您要翻译的内容：

尝试这个，我已经注释掉了alert(newLatLng)中的警告。顺便说一下，您的代码确实可以工作，但由于将脚本不正确地放在JavaScript文件中而出现了一些错误，脚本标签应该放在HTML文件中（最好放在body底部，这样它们在DOM加载后访问DOM之前工作，否则脚本将在DOM文档加载之前工作，并且querySelector和findbyid将返回undefined）。

注意：

不建议使用textarea来显示输出，您可以使用span或div并根据需要自定义它。HTML元素，如textarea，用于输入字段。

如果您需要任何进一步的帮助，请告诉我。

英文:

Try this, I commented out the alert in alert(newLatLng). Your code did work by the way, but there was some errors due to putting incorrectly scripts in javascript file, script tags should be in the html file (preferably at the bottom of the body, so they access the dom after it's loaded, otherwise the script would work before the dom document is loaded and querySelector and findbyid would return undefined).

Notes:

It's not recommended to use textarea to display an output, you can use span or div and customize it as you like. HTML elements such as textarea are used as input fields.

// Map initialization
var map = L.map(&quot;map&quot;).setView([23.8859, 45.0792], 6);

//osm layer
var osm = L.tileLayer(&quot;https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png&quot;, {
  attribution: &#39;&amp;copy; &lt;a href=&quot;https://www.openstreetmap.org/copyright&quot;&gt;OpenStreetMap&lt;/a&gt; contributors&#39;,
});
osm.addTo(map);

function onMapClick(e) {
  map.on(&quot;click&quot;, addMarker);

  function addMarker(e) {
    // ustawiamy aby marker był przesuwalny
    const marker = new L.marker(e.latlng, {
      //draggable: true,
    }).addTo(map);

    var lat = (e.latlng.lat);
    var lng = (e.latlng.lng);
    var newLatLng = new L.LatLng(lat, lng);
    // alert(newLatLng);
    document.getElementById(&#39;clk_lat1&#39;).innerHTML = lat;
    document.getElementById(&#39;clk_lng1&#39;).innerHTML = lng;
  }

}
map.on(&#39;click&#39;, onMapClick);

.page{ 
 display: flex; 
 height: 100vh;
 width: 100vw;
 padding: 0;
 
}
.divmap {
  flex: 2;
}
.map{
 height: 100%;
 width: 100%;
}

.form-group {
  flex: 1;
  padding: 1rem;
}

div.overlay {
  position: absolute;
  left: 100px;
  float: right;
  clear: both;
}

#overlay {
  position: absolute;
  width: 20%;
  height: 100%;
  left: 0;
  top: 0;
  float: left;
  clear: left;
}

form.myform {
  position: absolute;
  left: 15px;
  margin-top: -1px;
  width: 20%;
  height: 30%;
  float: left;
  clear: left;
}

div.markers {
  margin-top: -1px;
  float: left;
  width: 15%;
  margin-left: 390px;
  text-align: center;
}

div.card {
  float: left;
  width: 250px;
  margin-top: -1px;
  border-width: 1px;
  border-radius: 0rem;
  padding: 0rem;
  margin-left: 350px;
}

&lt;head align=&quot;center&quot;&gt;


  &lt;!--&lt;meta http-equiv=&quot;refresh&quot; content=&quot;120&quot;&gt;--&gt;
  &lt;meta charset=&quot;UTF-8&quot; /&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1, user-scalable=no, shrink-to-fit=no&quot; /&gt;


  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css&quot; /&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.css&quot; /&gt;

  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css&quot; /&gt;

  &lt;!-- leaflet css  --&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.css&quot; /&gt;

&lt;/head&gt;

&lt;div class=&quot;page&quot;&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;p style=&quot;font-size:18px; color:blue;&quot;&gt;Marker Location:&lt;/p&gt;
    &lt;div&gt;
     &lt;div&gt;Lat: &lt;/div&gt;
    &lt;textarea rows=&quot;1&quot; class=&quot;coord-result&quot; name=&quot;clk_lat1&quot; id=&quot;clk_lat1&quot;&gt;
    &lt;/textarea&gt;
     &lt;div&gt;Lng: &lt;/div&gt;
      &lt;textarea rows=&quot;1&quot; class=&quot;coord-result&quot; name=&quot;clk_lng1&quot; id=&quot;clk_lng1&quot;&gt;&lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;divmap&quot;&gt;
    &lt;div class=&quot;map&quot; id=&quot;map&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;

&lt;/div&gt;

&lt;script src=&quot;https://unpkg.com/leaflet@1.7.1/dist/leaflet.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&quot;&gt;&lt;/script&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

点击地图时读取并获取Folium标记坐标

问题

答案1

实现删除元素树元素的功能

在`code`标签内添加制表符（Angular-typescript）

在单个 details 标签中可以使用两个 summary 标签吗？

两个叠加的热图，使用Plotly.JS设置不透明度。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论