- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试使用传单进行地理围栏,并且我有一个可以移动的标记和 map 上的一个圆圈。
这里是完整的代码:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<head>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/css/font-awesome.min.css' rel='stylesheet' />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
</head>
<body>
<div id="mapid" style="height: 600px"></div>
<script>
var mymap = L.map('mapid', {
center: [50.897819, -1.150189],
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.898422, -1.148444],{
draggable: true,
autoPan: true
}).addTo(mymap);
var circle = L.circle([50.895763, -1.150556], {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5,
radius: 200
}).addTo(mymap);
</script>
</body>
</body>
</html>
我需要检测标记何时进出圆圈。
我该怎么做?
最佳答案
有点像
marker.on('drag', function(e) {
// distance between the current position of the marker and the center of the circle
var d = mymap.distance(e.latlng, circle.getLatLng());
// the marker is inside the circle when the distance is inferior to the radius
var isInside = d < circle.getRadius();
// let's manifest this by toggling the color
circle.setStyle({
fillColor: isInside ? 'green' : '#f03'
})
});
还有一个演示
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'
})
});
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-locatecontrol/v0.43.0/css/font-awesome.min.css' rel='stylesheet' />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@turf/turf@5/turf.min.js"></script>
<div id="mapid" style="height: 180px"></div>
关于javascript - 传单检测标记何时进出圆圈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57384822/
我是 Java 新手。我在学校有这个练习来创建一个 BasicIO 类和 Main 类来读取和写入文件。 但是我的代码只读取第一句并在无限循环中打印它。 基本IO.java import java.i
我在处理几个正则表达式时遇到了一些麻烦,我之前差点就开始工作了。我基本上需要删除特定 两边的 HTML 注释标签。 这是我目前所拥有的: .replace(/-->/, 'oncl
我正在使用下面的代码将一个 div 部分切换出屏幕,然后完全切换回屏幕。此代码告诉“侧边栏”要移出屏幕多远。但在我的例子中,由于媒体查询应用于侧边栏宽度,此功能存在问题。因此,我需要的代码不是说明侧边
我找不到有关在一段时间内(例如一秒)应向 Firebase 数据库(或类似数据库)发送的最大消息数以及应用程序可以处理接收的最大消息数的最佳实践文档没有显着放缓。例如: //send updated
我在使我的 div 从右侧 float 到屏幕的 50% 时遇到问题,我似乎无法弄清楚为什么它不起作用。 myFunction = function() { var divPosition = $
我们如何知道 cocoapods 是否已安装?在我们的 MAC 中?安装时我将其输出到终端: ERROR: While executing gem ... (NoMethodError) undefi
我正在我的 ubuntu 系统上使用 anaconda 构建深度学习环境。 我对 Anaconda 完全陌生。 我创造了一个环境 conda create -n darkflow python=3.6
是否有可能有效地向 CUDA 设备或从 CUDA 设备复制以恒定(甚至非常量)值跨越的数据? 我想对角化一个大的对称矩阵。 使用 jacobi 算法,在每次迭代中有一堆使用两行和两列的操作。 由于 M
如果我想将数据发送给所有连接的人,是否应该将 redis 订阅事件放在 io.connect 回调之外?或者像这样将它放在 io.connect 中更好: io.on('connection'
我有一些正在序列化的数据。我需要在 .Net 3.5(还不是 4.0)下使用 ADO.NET(也使用企业库)从 VarBinary 列保存和恢复它。 我似乎能够找到并开始工作的唯一接口(interfa
我是一名优秀的程序员,十分优秀!