Question

我正在使用Mapquest API和Leaflet在网页上显示带有标记的地图。传单参考：https://leafletjs.com/examples/quick-start/

单击按钮时，按钮应在指定的坐标处添加一个标记。由于某种原因，它似乎无法正常工作。这是我的脚本：

var L; 
window.onload = function() { //loads map, center etc.
        L.mapquest.key = 'O5L5sKXrVY1AYIpiS2xVMvsLgAxUSw32';
        var map = L.mapquest.map('map', { 
          center: [37.641313, -122.290785],
          layers: L.mapquest.tileLayer('map'),
          zoom: 10
        });

//add markers and other map shapes here.

//trying to get it to add based on input.
    document.getElementById('mrkbtn').onclick = function addMarker() {
    L.marker(document.getElementById('inputText').value).addTo(map); }

    }

这是HTML按钮：

<div class="centerBtn">
<input id="inputText" placeholder="insert coordinates"></input>
<button id="mrkbtn" onclick="addMarker()">Add Marker to Map</button>
</div>

<br>
<div id="map"></div>

当L.marker（）内部有坐标时，该按钮将添加一个标记，如下所示：

L.marker([37.641313, -122.290785]).addTo(map);

但是，当我更改L.marker（）内部的内容以尝试获取输入值时，它不起作用。这是我犯错误的脚本部分：

L.marker(document.getElementById('inputText').value).addTo(map);

我对此很陌生，非常感谢您的协助。

Answer 1

L.marker(...).addTo(map)需要一个数字array。您以错误的方式使用了构造函数。

让我们假装输入中的坐标用逗号分隔，例如：

13.443521,42.112345

您的功能应该是这样的：

document.getElementById('mrkbtn').onclick = function addMarker() {    
    L.marker((document.getElementById('inputText').value).split(',')).addTo(map); }
}

这应该起作用，因为split函数正在返回一个数组。

在点击按钮时向地图添加标记？

1 个答案: