geolocation - 多个圆圈上的传单地理围栏......检测内部/外部标记
问题描述
我有一些代码可以检测市场何时被拖动到圆圈内外。
这很好用,但我只是想知道如何才能检测到一个市场和多个圈子,而不仅仅是一个。
这是当前代码:
var mymap = L.map('mapid', {
center: [50.895763, -1.150556],
zoom: 16
});
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic3RldmVuc2F0Y2giLCJhIjoiY2p5eDR6MWgzMHRvbjNocnJkN2d2MjRwaSJ9.wd0OtBUQQfUtNxdduQA3lg', {
maxZoom: 18,
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 marker = new L.marker([50.896422, -1.148444],{
draggable: true,
autoPan: true
}).addTo(mymap);
var circle = L.circle([50.895763, -1.150556], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 100
}).addTo(mymap);
marker.on('drag', function(e) {
var d = mymap.distance(e.latlng, circle.getLatLng());
var isInside = d < circle.getRadius();
circle.setStyle({
fillColor: isInside ? 'green' : '#f03'
})
});
但我想添加多个圆圈而不是一个。
我怎样才能做到这一点?
解决方案
将圆圈放在一个数组中,forEach()
并用半径测试覆盖它们 - 像这样(替换你自己的设置圆圈的方法)
var mymap = L.map("mapid", {
center: [50.895763, -1.150556],
zoom: 16
});
L.tileLayer(
"https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic3RldmVuc2F0Y2giLCJhIjoiY2p5eDR6MWgzMHRvbjNocnJkN2d2MjRwaSJ9.wd0OtBUQQfUtNxdduQA3lg",
{
maxZoom: 18,
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 marker = new L.marker([50.896422, -1.148444], {
draggable: true,
autoPan: true
}).addTo(mymap);
var circles = [];
circles[0] = L.circle([50.895763, -1.150556], {
color: "red",
fillColor: "#f03",
fillOpacity: 0.5,
radius: 100
}).addTo(mymap);
circles[1] = L.circle([some - other - coordinates], {
color: "red",
fillColor: "#f03",
fillOpacity: 0.5,
radius: 100
}).addTo(mymap);
marker.on("drag", function(e) {
circles.forEach(function(circle) {
var d = mymap.distance(e.latlng, circle.getLatLng());
var isInside = d < circle.getRadius();
circle.setStyle({
fillColor: isInside ? "green" : "#f03"
});
});
});
推荐阅读
- sql-server - 如何根据其他行插入行?
- excel - Excel - 条件格式:如果上面的单元格不同,请更改填充颜色
- arrays - 如何在不使用 for 循环的情况下将列表项复制到数组
- c# - 我可以从 Xamarin 应用程序创建公共/永久文件吗?
- python - 为 tf.nn.conv1d 添加了无意的维度
- java - 为什么 HAPI 解析器在将 XML 转换为 HL7 时只占用最后一段?
- javascript - 我正在寻找一种方法来根据其他数组的值从我的选择数组中删除项目
- python - 将 hausdorff.distances 作为距离导入 ImportError:没有名为距离的模块
- c++ - 椭圆的透明边界框
- android - 找不到要加载的 DSO:libjscexecutor.so