javascript - How to store e.latlng into array : leaflet - Stack Overflow

admin管理员组

文章数量:1022712

I am working with leaflet api where user can put markers on map. I have made a custom button for putting marker.

I am willing to draw line between those markers i.e. using L.polylines() but as I am new to javascript and leaflet I can't understand how to pass those latlng point to array which will later be used in these functions. For initial working I have passed static coordinates(working as 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);

I am working with leaflet api where user can put markers on map. I have made a custom button for putting marker.

I am willing to draw line between those markers i.e. using L.polylines() but as I am new to javascript and leaflet I can't understand how to pass those latlng point to array which will later be used in these functions. For initial working I have passed static coordinates(working as 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);

• javascript
• leaflet
• angular-leaflet-directive

Share Improve this question Follow edited Sep 15, 2015 at 13:34 user229044♦ 240k4141 gold badges344344 silver badges347347 bronze badges asked Sep 14, 2015 at 12:21 Suhail Mumtaz AwanSuhail Mumtaz Awan 3,48388 gold badges4747 silver badges7777 bronze badges 2

• 1 Please stop using .... and ,,,, - these are not real forms of punctuation, they are noise with no semantic meaning. – user229044 ♦ Commented Sep 15, 2015 at 13:35
• @meagar ok sir...i won't – Suhail Mumtaz Awan Commented Sep 15, 2015 at 13:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Adding another value to an array is easy, e.g.:

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

You can find more details (also about anything else JavaScript related) at Mozilla Developer Network.

If you want to use the coordinates from the marker objects, you can get those with:

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

latLng = myMarker.getLatLng();

Also take a look at the Leaflet documentation.

If i understand you correctly you want to create markers on click and connect them via polylines. That's easy to do, in code with ments to explain:

// 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);

});

Now afterwards if you want to get all the coordinates added to the polyline you can use the getLatLngs method of L.Polyline which returns an array of L.LatLng objects.

Reference: http://leafletjs./reference.html#polyline

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

I am working with leaflet api where user can put markers on map. I have made a custom button for putting marker.

I am willing to draw line between those markers i.e. using L.polylines() but as I am new to javascript and leaflet I can't understand how to pass those latlng point to array which will later be used in these functions. For initial working I have passed static coordinates(working as 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);

I am working with leaflet api where user can put markers on map. I have made a custom button for putting marker.

I am willing to draw line between those markers i.e. using L.polylines() but as I am new to javascript and leaflet I can't understand how to pass those latlng point to array which will later be used in these functions. For initial working I have passed static coordinates(working as 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);

• javascript
• leaflet
• angular-leaflet-directive

Share Improve this question Follow edited Sep 15, 2015 at 13:34 user229044♦ 240k4141 gold badges344344 silver badges347347 bronze badges asked Sep 14, 2015 at 12:21 Suhail Mumtaz AwanSuhail Mumtaz Awan 3,48388 gold badges4747 silver badges7777 bronze badges 2

• 1 Please stop using .... and ,,,, - these are not real forms of punctuation, they are noise with no semantic meaning. – user229044 ♦ Commented Sep 15, 2015 at 13:35
• @meagar ok sir...i won't – Suhail Mumtaz Awan Commented Sep 15, 2015 at 13:42

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Adding another value to an array is easy, e.g.:

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

You can find more details (also about anything else JavaScript related) at Mozilla Developer Network.

If you want to use the coordinates from the marker objects, you can get those with:

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

latLng = myMarker.getLatLng();

Also take a look at the Leaflet documentation.

If i understand you correctly you want to create markers on click and connect them via polylines. That's easy to do, in code with ments to explain:

// 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);

});

Now afterwards if you want to get all the coordinates added to the polyline you can use the getLatLngs method of L.Polyline which returns an array of L.LatLng objects.

Reference: http://leafletjs./reference.html#polyline

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

本文标签： javascriptHow to store elatlng into arrayleafletStack Overflow