将标记添加到传单中的用户位置

Question

我对传单还很陌生，只是在尝试让这个标记起作用时遇到了困难。

到目前为止，我有以下代码，但是当我在浏览器中检查控制台时，它抛出了错误

Uncaught ReferenceError: position is not defined at mappage.html:153

mappage 是 html 文件的名称。

    <div id="mapid"></div>

    <script>
        var mymap = L.map('mapid').setView([57.149860, -2.102930], 13);
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(mymap);

        //var to capture user position
        var userPosition = position.coords.latitude + "," + position.coords.longitude;


        var marker = L.marker([userPosition]).addTo(mymap);
    <script>

我还在我的 js 文件中使用了以下代码来查看地理定位 api 是否正常工作以及它是否在控制台日志中正确显示了所有请求的详细信息。

navigator.geolocation.getCurrentPosition(function (position) {
console.log(position);
console.log(position.coords.latitude)
console.log(position.coords.longitude)})

Answer 1

您必须在 getCurrentPosition 函数中设置标记：

navigator.geolocation.getCurrentPosition(function (position) {
console.log(position);
console.log(position.coords.latitude)
console.log(position.coords.longitude)
var marker = L.marker([position.coords.latitude,position.coords.longitude]).addTo(mymap);
})

将标记添加到传单中的用户位置

Adding marker to user's location in leaflet

html

javascript

geolocation

leaflet