我正在尝试根据一组坐标在传单地图上绘制点。但是,虽然显示地图,但当前没有点。我认为L.latLng
函数出了一些问题,因为尽管明确定义了它,但它在终端中显示为null。
任何人都可以提供任何原因说明发生这种情况以及我做错了什么吗?
代码:
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
</head>
<body>
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
crossorigin=""></script>
<div id="mapid"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 5,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(mymap);
var latLong = L.latLng([{"lat": 23.59, "lng": 85.56}, {"lat": 9.19, "lng": 92.77}, {"lat": -4.18, "lng": 37.83}, {"lat": 4.73, "lng": 11.1}, {"lat": null, "lng": null}, {"lat": 5.49, "lng": 10.85}, {"lat": 1.4, "lng": 9.51}, {"lat": -10.61, "lng": 29.3}, {"lat": -9.27, "lng": 35.04}, {"lat": -6.22, "lng": 30.59}, {"lat": 1.5, "lng": 30.03}, {"lat": 1.17, "lng": 28.76}, {"lat": null, "lng": null}, {"lat": 1.71, "lng": 15.95}, {"lat": 2.2, "lng": 22.61}, {"lat": 0.679, "lng": 34.77}])
var circle = L.circle(latLong, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 5000000
}).addTo(mymap);
</script>
</body>
答案 0 :(得分:1)
绘制圆到坐标的方式有两个问题。我将同时解决这两个问题,因此您将了解如何更正此问题。
设置坐标
.latLng
函数可以采用:
在数组或对象中,可以提供纬度(以度为单位),经度(以度为单位)以及可选的以米为单位的高度值。 Source
画一个圆
使用以下语法。请注意,圆如何仅采用一个坐标而不是坐标数组。 (docs)
.circle({'lat': 50.5, 'lng': 30.5}, {radius: 200}).addTo(map);
知道这一点,我们需要创建一个坐标数组。然后,对它们进行迭代,并为每个点绘制一个圆。这是执行此操作的代码。
var myMap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 5,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(myMap);
var latLong = [{
"lat": 23.59,
"lng": 85.56
}, {
"lat": 9.19,
"lng": 92.77
}, {
"lat": -4.18,
"lng": 37.83
}, {
"lat": 4.73,
"lng": 11.1
}, {
"lat": null,
"lng": null
}, {
"lat": 5.49,
"lng": 10.85
}, {
"lat": 1.4,
"lng": 9.51
}, {
"lat": -10.61,
"lng": 29.3
}, {
"lat": -9.27,
"lng": 35.04
}, {
"lat": -6.22,
"lng": 30.59
}, {
"lat": 1.5,
"lng": 30.03
}, {
"lat": 1.17,
"lng": 28.76
}, {
"lat": null,
"lng": null
}, {
"lat": 1.71,
"lng": 15.95
}, {
"lat": 2.2,
"lng": 22.61
}, {
"lat": 0.679,
"lng": 34.77
}];
// Here's where you iterate over the array of coordinate objects.
latLong.forEach(function(coord) {
var circle = L.circle(coord, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 50000
}).addTo(myMap);
});
// Set the view to where some of the circles are drawn.
myMap.panTo([2, 22]);
#mapid {
height: 180px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js" integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q==" crossorigin=""></script>
<div id="mapid"></div>