Установить LatLng круга листовки с переменной

У меня проблемы с созданием нового круга на карте Leaflet с переменной latlng.

У меня есть форма, содержащая и вводимая для радиуса, и поле выбора, содержащее несколько местоположений с параметрами, выглядящими следующим образом:

<option value="52.10953576, -0.498735399999987">Place Name</option>

При нажатии кнопки сохранения запускается следующий код:

$('#drawcircle').click(function() {
  var radius = document.getElementById("circleRadius").value;
  var e = document.getElementById("locationcoord");
  var latlng = e.options[e.selectedIndex].value;
  var radiusinmeters = cr * 1609.344;
  var circle = L.circle([latlng], radiusnmeters).addTo(map);
  drawnItems.addLayer(circle);
});

Я выполнил некоторую отладку с помощью console.log и вижу, что переменная latlng действительно содержит правильную информацию из поля выбора.

Однако я получаю

Uncaught TypeError: невозможно прочитать свойство lng, равное нулю.


javascript jquery leaflet leaflet.draw
person Jakob    schedule 14.05.2019    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Значение, которое вы получаете от var latlng = e.options[e.selectedIndex].value;, является строкой, а не парой координат.

Разделите эту строку, чтобы получить свои координаты в массив, преобразовать значения в числа и передать их в L.circle. Например,

var radiusinmeters = cr * 1609.344;
var latlng_string = e.options[e.selectedIndex].value;
var latlng_array = latlng_string
                      .split(/,\s*/) // split the value
                      .map(function(v) { return +v; }); // cast to numbers

var circle = L.circle(latlng_array, radiusnmeters).addTo(map);
person nikoshr    schedule 14.05.2019

arrow_upward
0
arrow_downward

В вашем коде переменная latlng является строкой, а L.circle принимает объект LatLng, то есть один из них:

L.latLng(<Number> latitude, <Number> longitude)
L.latLng(<Array> coords)    // [Number, Number]
L.latLng(<Object> coords)   // {lat: Number, lng: Number}

Ваша переменная latlng - ["52.10953576, -0.498735399999987"]. Вам необходимо проанализировать вашу строку, чтобы получить правильные значения.

дополнительная информация в документации Circle

person aleberguer    schedule 14.05.2019