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

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 函数正在返回一个数组。