使用变量设置传单圈 LatLng答案

【问题标题】：Set leaflet circle LatLng with variable使用变量设置传单圈 LatLng
【发布时间】：2019-05-14 13:25:41
【问题描述】：

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

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

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

但是，我明白了

未捕获的类型错误：无法读取 null 的属性“lng”

【问题讨论】：

标签： javascript jquery leaflet leaflet.draw

【解决方案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);

【讨论】：

【解决方案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

【讨论】：