如何将e.latlng存储到数组:传单

时间:2015-09-14 12:21:16

标签: javascript leaflet angular-leaflet-directive

我正在使用传单api,用户可以在地图上放置标记。我已经制作了一个用于放置标记的自定义按钮。

我愿意在这些标记之间画线,即使用 L.polylines()但是我不熟悉javascript和传单 了解如何将这些latlng点传递给稍后将要的数组 用于这些功能。对于初始工作,我已经通过静态 坐标(作为req工作)。

L.easyButton('fa-link', function () {

var secureThisArea = [[-81, 100.75], [-76.50, 245.75], [-145.50, 184.25], [-128, 311.75]];

    map.on('click', function fencePlace(e) {

    L.marker([-81, 100.75], { icon: fenceIcon, draggable: true }).bindPopup("this is first").addTo(map);
    L.marker([-76.50, 245.75], { icon: fenceIcon, draggable: true }).bindPopup("this is second").addTo(map);
    L.marker([-145.50, 184.25], { icon: fenceIcon, draggable: true }).bindPopup("this is third").addTo(map);
    L.marker([-128, 311.75], { icon: fenceIcon, draggable: true }).bindPopup("this is fourth").addTo(map);
    L.polyline(secureThisArea).addTo(map);

});
                }).addTo(map);

2 个答案:

答案 0 :(得分:2)

向数组中添加另一个值很简单,例如:

secureThisArea.push([-81, 100.75]);

您可以在Mozilla Developer Network找到更多详细信息(还有关于JavaScript相关的任何内容)。

如果要使用标记对象中的坐标,可以使用以下内容:

var myMarker = L.marker([-81, 100.75], { icon: fenceIcon, draggable: true }),
    latLng = null;

latLng = myMarker.getLatLng();

另请查看Leaflet documentation

答案 1 :(得分:2)

如果我理解正确,您需要在点击时创建标记并通过折线连接它们。这很容易做到,在代码中有注释解释:

// Create new empty polyline and add it to the map
var polyline = new L.Polyline([]).addTo(map);

// Handle map click event
map.on('click', function(event) {

    // New marker on coordinate, add it to the map
    new L.Marker(event.latlng).addTo(map);

    // Add coordinate to the polyline
    polyline.addLatLng(event.latlng);

});

现在,如果您想要将所有坐标添加到折线,您可以使用getLatLngs L.Polyline方法返回L.LatLng个对象的数组。

参考:http://leafletjs.com/reference.html#polyline

示例:http://plnkr.co/edit/h7aMwc?p=preview