Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/ionic-framework/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何检查标记是否为';t在特定圆的内部_Javascript_Ionic Framework_Leaflet_Maps_Angular8 - Fatal编程技术网

Javascript 如何检查标记是否为';t在特定圆的内部

Javascript 如何检查标记是否为';t在特定圆的内部,javascript,ionic-framework,leaflet,maps,angular8,Javascript,Ionic Framework,Leaflet,Maps,Angular8,我需要帮助检查标记是否在特定的圆圈内。 我有一个圆圈数组,我必须检查标记是否在里面,并获得目标圆圈的信息。 我试着打电话给distanceTo 有人能帮我吗 ... export class PlacesPage { map: Map; placesList = []; ionViewDidEnter() { this.map = new Map("mapId2").setView([41.694941, -8.821054], 13); tileLayer("h

我需要帮助检查标记是否在特定的圆圈内。 我有一个圆圈数组,我必须检查标记是否在里面,并获得目标圆圈的信息。 我试着打电话给distanceTo 有人能帮我吗

...
export class PlacesPage {
  map: Map;
  placesList = [];

  ionViewDidEnter() {
    this.map = new Map("mapId2").setView([41.694941, -8.821054], 13);

    tileLayer("http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png", {
      attribution: "cityt3ip.com"
    }).addTo(this.map);

    fetch("./assets/data.json")
      .then(res => res.json())
      .then(json => {
        this.placesList = json.places;
        this.leafletMap();
      });
  }

  leafletMap() {
    for (const place of this.placesList) {
      circle([place.latitude, place.longitude], {
        color: "red",
        fillColor: "#f03",
        fillOpacity: 0.5,
        radius: 100
      }).addTo(this.map);
    }

    marker([41.692135, -8.831127], {
      draggable: true,
      autoPan: true
    })
      .addTo(this.map).on('drag', this.masterClick, this);
  }

  masterClick(e: any) {
    console.log(e)
    var d = this.map.distanceTo(e.latlng, circle.getLatLng());
    var isInside = d < circle.getRadius();
    console.log(isInside)
    circle.setStyle({
      fillColor: isInside ? "green" : "#f03"
    });
  }

  ionViewWillLeave() {
    this.map.remove();
  }
}



```
。。。
出口类货位{
地图:地图;
placesList=[];
ionViewDidEnter(){
this.map=newmap(“mapId2”).setView([41.694941,-8.821054],13);
tileLayer(“http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png”{
署名:“cityt3ip.com”
}).addTo(此.map);
获取(“./assets/data.json”)
.then(res=>res.json())
。然后(json=>{
this.placesList=json.places;
这个.map();
});
}
单张地图(){
for(此的const place.placesList){
圆([地点.纬度,地点.经度]{
颜色:“红色”,
填充颜色:“f03”,
填充不透明度:0.5,
半径:100
}).addTo(此.map);
}
标记([41.692135,-8.831127]{
真的,
自动扫描:对
})
.addTo(this.map).on('drag',this.masterClick,this);
}
masterClick(e:任意){
控制台日志(e)
var d=this.map.distanceTo(e.latlng,circle.getLatLng());
var isInside=d
传单中没有检测标记是否位于圆圈内的功能。相反,您可以使用
distanceTo
方法来测试点是否在圆中心的某个半径内,这具有相同的结果

isMarkerInsideCircle(markerLatLng, circleCenterLatLng, circleRadius){
    // markerLatLng and circleCenterLatLng must be instance of L.latlng class.
    // you can create an instance like this L.latLng(lat, lng);
    if (markerLatLng.distanceTo(circleCenterLatLng) <= circleRadius){
        return true;
    } else {
        return false;
    }
}
isMarkerInsideCircle(标记标记、圈中心、圈中心){
//markerLatLng和circleCenterLatLng必须是L.latlng类的实例。
//您可以创建这样的实例:L.latLng(lat,lng);

如果(markerLatLng.distanceTo(CircleCenter Latlings)将标记拖动到圆上时,看起来您正试图更改圆的样式

我做了一个演示,我的策略是当标记移动到任何一个圆圈上时,存储当前圆圈

function createCircles() {
  circleCoords.forEach(circ => {
    const ll = L.latLng(circ[0], circ[1]);
    let curCirc = L.circle(ll, {
      radius: 100
    }).addTo(map);
    curCirc.on('mouseover', (evt) => {
      myCircle = evt.target;
    })
  })
}
然后我修改了masterClick函数,如下所示:

function masterClick(e) {
  var d = e.latlng.distanceTo(myCircle.getLatLng());
  var isInside = d < myCircle.getRadius();
  myCircle.setStyle({
    fillColor: isInside ? "green" : "#f03"
  });
}
功能主控点击(e){
var d=e.latlng.distanceTo(myCircle.getLatLng());
var isInside=d
这是我的解决方案!谢谢大家

  async isMarkerInsideCircle() {
    try {
      this.currentLayer = null;

      this.map.eachLayer(layer => {
        if (layer instanceof L.Circle) {
          this.circleCenterLatLng = layer.getLatLng();
          this.circleRadius = layer.getRadius();
          layer.setStyle({
            color: 'red',
            fillColor: '#f03'
          });

          if (
            this.markerLatLng.distanceTo(this.circleCenterLatLng) <=
            this.circleRadius
          ) {
            this.currentLayer = layer;
          } else {
          }
        }
      });
    } catch (e) {
      console.log(e);
    }

    if (this.currentLayer !== null) {
      console.log(this.currentLayer);
      for (const pl of this.places) {
        if (
          pl.latitude == this.currentLayer.getLatLng().lat &&
          pl.longitude == this.currentLayer.getLatLng().lng
        ) {
          console.log(pl.title);

          this.spotVisited = pl.id;
          this.isLoading = true;
        }
      }

      this.currentLayer.setStyle({
        color: 'green',
        fillColor: '#ddd'
      });
    }
  }
async isMarkerInsideCircle(){
试一试{
this.currentLayer=null;
this.map.eachLayer(层=>{
if(L.Circle的图层实例){
this.circlecenteralng=layer.getLatLng();
this.circleRadius=layer.getRadius();
layer.setStyle({
颜色:“红色”,
填充颜色:'#f03'
});
如果(
this.markerLatLng.distanceTo(this.CircleCenter Latlatlng)