使用变量设置传单圆 LatLng

Question

我在使用变量作为 latlng 的 Leaflet 地图上创建新圆时遇到问题。

我有一个包含和输入半径的表单和一个 select 框，其中包含一些位置和如下所示的选项：

<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 变量确实包含来自 select 框的正确信息。

但是，我得到

Uncaught TypeError: Cannot read property 'lng' of null

Answer 1

你从var latlng = e.options[e.selectedIndex].value;得到的值是一个字符串，而不是一对坐标。

Split 此字符串用于获取数组中的坐标，将值转换为数字，并将其提供给 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);

Answer 2

在您的代码中，变量 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 Documentation

使用变量设置传单圆 LatLng

Set leaflet circle LatLng with variable

javascript

jquery

leaflet

leaflet.draw