Font

Font

关注
发信
关注(28)粉丝(399)

计算圆圈中的标记

本文介绍了计算圆圈中的标记的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

根据此例如，但圆圈中的标记不准确，当标记在圆圈附近并且接近圆圈时，可以考虑在不需要的圆圈内。

有没有其他想法？



代码片段（来自链接的小提琴）：
$ b 

  window.onload = function init（）{var contentCenter ='< span class =infowin> Center Marker（draggable）< / span>'，contentA ='< span class =infowin >标记A（可拖动）< / span>'，contentB ='< span class =infowin>标记B（可拖动）< / span>'; var latLngCenter = new google.maps.LatLng（37.081476，-94.510574），latLngCMarker = new google.maps.LatLng（37.0814，-94.5105），latLngA = new google.maps.LatLng（37.2，-94.1），latLngB = new google .maps.LatLng（38，-93），map = new google.maps.Map（document.getElementById（'map'），{zoom：7，center：latLngCenter，mapTypeId：google.maps.MapTypeId.ROADMAP，mapTypeControl：假设}），markerCenter = new google.maps.Marker（{position：latLngCMarker，title：'Location'，map：map，draggable：true}），infoCenter = new google.maps.InfoWindow（{content：contentCenter}）， markerA = new google.maps.Marker（{position：latLngA，title：'Location'，map：map，draggable：true}），infoA = new google.maps.InfoWindow（{content：contentA}），markerB = new google .maps.Marker（{position：latLngB，title：'Location'，map：map，draggable：true}），infoB = new google.ma ps.InfoWindow（{content：contentB}）//示例性设置：//假设您的地图被签名为varmap//同时假定您的标记被命名为marker，circle = new google.maps.Circle （{map：map，clickable：false，// meters radius：100000，fillColor：'#fff'，fillOpacity：.6，strokeColor：'＃313131'，strokeOpacity：.4，strokeWeight：.8}）; //将圆圈附加到标记circle.bindTo（'center'，markerCenter，'position'）; var //获取圆的界限bounds = circle.getBounds（）//注意跨度，noteA = jQuery（'.bool＃a'），noteB = jQuery（'.bool＃b'）; noteA.text（bounds.contains（latLngA））; noteB.text（bounds.contains（latLngB））; //获取一些latLng对象，并且问题是否包含在圆圈中：google.maps.event.addListener（markerCenter，'dragend'，function（）{latLngCenter = new google.maps.LatLng（markerCenter.position.lat（）， markerCenter.position.lng（））; bounds = circle.getBounds（）; noteA.text（bounds.contains（latLngA））; noteB.text（bounds.contains（latLngB））;}）; google.maps.event.addListener（markerA，'dragend'，function（）{latLngA = new google.maps.LatLng（markerA.position.lat（），markerA.position.lng（））; noteA.text（bounds。 contains（latLngA））;}）; google.maps.event.addListener（markerB，'dragend'，function（）{latLngB = new google.maps.LatLng（markerB.position.lat（），markerB.position.lng（））; noteB.text（bounds。 contains（latLngB））;}）; google.maps.event.addListener（markerCenter，'click'，function（）{infoCenter.open（map，markerCenter）;}）; google.maps.event.addListener（markerA，'click'，function（）{infoA.open（map，markerA）;}）; google.maps.event.addListener（markerB，'click'，function（）{infoB.open（map，markerB）;}）; google.maps.event.addListener（markerCenter，'drag'，function（）{infoCenter.close（）; noteA.html（draggin& hellip;）; noteB.html（draggin& hellip;）;}） ; google.maps.event.addListener（markerA，'drag'，function（）{infoA.close（）; noteA.html（draggin& hellip;）;}）; google.maps.event.addListener（markerB，'drag'，function（）{infoB.close（）; noteB.html（draggin& hellip;）;}）;};
body {margin：0; padding：0} html，body，＃map {height：100％; font-family：Arial，sans-serif; font-size：.9em;颜色：#fff;}＃note {text-align：center;填充：.3em; 10px的;背景：＃009ee0;}。bool {font-style：italic;颜色：＃313131;}。info {display：inline-block;宽度：40％; text-align：center;}。infowin {color：＃313131;}＃title，.bool {font-weight：bold;} 

 < script src =http://maps.googleapis.com/maps/api/js>< / script>< div id =note>< span id =title>& raquo;圆圈内&<< / span> < hr />< span class =info> Marker< strong> A< / strong> ;:< span id =aclass =bool>< / span><跨度>&安培; larr;&安培; DIAMS;&安培; RARR; < span class =info> Marker< strong> B< / strong> ;:< span id =bclass =bool>< / span>< / span>< / div> ;< div id =map> test< / div>

h2_lin>解决方案

google.maps.LatLngBounds是一个矩形。你需要一个多边形包含功能。对于一个圆圈，这可以被缩减为测试该点是否小于远离中心的半径。



代码段： b 

  window.onload = function init（）{var contentCenter ='< span class =infowin>中心标记（可拖动）< / span>'，contentA ='< span class =infowin>标记A（可拖动）< / span>'，contentB ='< span class =infowin>标记B（可拖动）< / span>'; var latLngCenter = new google.maps.LatLng（37.081476，-94.510574），latLngCMarker = new google.maps.LatLng（37.0814，-94.5105），latLngA = new google.maps.LatLng（37.2，-94.1），latLngB = new google .maps.LatLng（38，-93），map = new google.maps.Map（document.getElementById（'map'），{zoom：7，center：latLngCenter，mapTypeId：google.maps.MapTypeId.ROADMAP，mapTypeControl： false}），markerCenter = new google.maps.Marker（{position：latLngCMarker，title：'Center of Circle'，map：map，draggable：true}），infoCenter = new google.maps.InfoWindow（{content：contentCenter} ），markerA = new google.maps.Marker（{position：latLngA，title：'A'，map：map，label：A，draggable：true}），infoA = new google.maps.InfoWindow（{content： contentA}），markerB = new google.maps.Marker（{position：latLngB，title：'B'，map：map，label：B，draggable：true }），infoB = new google.maps.InfoWindow（{content：contentB}）//示例设置：//假设你的地图被签名为varmap//还假定你的标记被命名为marker， circle = new google.maps.Circle（{map：map，clickable：false，// meters radius：100000，fillColor：'#fff'，fillOpacity：.6，strokeColor：'＃313131'，strokeOpacity：.4，strokeWeight ：.8}）; //将圆圈附加到标记circle.bindTo（'center'，markerCenter，'position'）; var //获取圆的界限bounds = circle.getBounds（）//注意跨度，noteA = jQuery（'.bool＃a'），noteB = jQuery（'.bool＃b'）; noteA.text（（100000> google.maps.geometry.spherical.computeDistanceBetween（markerA.getPosition（），markerCenter.getPosition（））））; noteB.text（（100000> google.maps.geometry.spherical.computeDistanceBetween（markerB.getPosition（），markerCenter.getPosition（））））; //获取一些latLng对象，并且如果它包含在圆圈中，则问题：google.maps.event.addListener（markerCenter，'dragend'，function（）{latLngCenter = markerCenter.position; noteA.text（（100000> google.maps （（100000> google.maps.geometry.spherical.computeDistanceBetween（markerB.getPosition（），markerCenter.getPosition（））.battery.spherical.computeDistanceBetween（markerA.getPosition（），markerCenter.getPosition（））））; ））））;}）; google.maps.event.addListener（markerA，'dragend'，function（）{latLngA = markerA.position; noteA.text（（100000> google.maps.geometry.spherical.computeDistanceBetween（markerA.getPosition（），markerCenter。 getPosition（））））;}）; google.maps.event.addListener（markerB，'dragend'，function（）{latLngB = markerB.position; noteB.text（（100000> google.maps.geometry.spherical.computeDistanceBetween（markerB.getPosition（），markerCenter。 getPosition（））））;}）; google.maps.event.addListener（markerCenter，'click'，function（）{infoCenter.open（map，markerCenter）;}）; google.maps.event.addListener（markerA，'click'，function（）{infoA.open（map，markerA）;}）; google.maps.event.addListener（markerB，'click'，function（）{infoB.open（map，markerB）;}）; google.maps.event.addListener（markerCenter，'drag'，function（）{infoCenter.close（）; noteA.html（draggin& hellip;）; noteB.html（draggin& hellip;）;}） ; google.maps.event.addListener（markerA，'drag'，function（）{infoA.close（）; noteA.html（draggin& hellip;）;}）; google.maps.event.addListener（markerB，'drag'，function（）{infoB.close（）; noteB.html（draggin& hellip;）;}）;};
body {margin：0; padding：0} html，body，＃map {height：100％; font-family：Arial，sans-serif; font-size：.9em;颜色：#fff;}＃note {text-align：center;填充：.3em; 10px的;背景：＃009ee0;}。bool {font-style：italic;颜色：＃313131;}。info {display：inline-block;宽度：40％; text-align：center;}。infowin {color：＃313131;}＃title，.bool {font-weight：bold;} 

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js> ;< / script>< script src =http://maps.googleapis.com/maps/api/js?libraries=geometry>< / script>< div id =note><<< ; span id =title>& raquo;在圈子里面&<< / span> < hr />< span class =info> Marker< strong> A< / strong> ;:< span id =aclass =bool>< / span><跨度>&安培; larr;&安培; DIAMS;&安培; RARR; < span class =info> Marker< strong> B< / strong> ;:< span id =bclass =bool>< / span>< / span>< / div> ;< div id =map> test< / div>

Base on this http://jsfiddle.net/kaiser/wzcst/light/ example, but the marker in circle is not accurate, when the marker is outside circle and near to circle it is consider inside the circle which is not wanted.

Is there any other idea?

code snippet (from linked fiddle):

window.onload = function init() {
  var
    contentCenter = '<span class="infowin">Center Marker (draggable)</span>',
    contentA = '<span class="infowin">Marker A (draggable)</span>',
    contentB = '<span class="infowin">Marker B (draggable)</span>';
  var
    latLngCenter = new google.maps.LatLng(37.081476, -94.510574),
    latLngCMarker = new google.maps.LatLng(37.0814, -94.5105),
    latLngA = new google.maps.LatLng(37.2, -94.1),
    latLngB = new google.maps.LatLng(38, -93),
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: latLngCenter,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false
    }),
    markerCenter = new google.maps.Marker({
      position: latLngCMarker,
      title: 'Location',
      map: map,
      draggable: true
    }),
    infoCenter = new google.maps.InfoWindow({
      content: contentCenter
    }),
    markerA = new google.maps.Marker({
      position: latLngA,
      title: 'Location',
      map: map,
      draggable: true
    }),
    infoA = new google.maps.InfoWindow({
      content: contentA
    }),
    markerB = new google.maps.Marker({
      position: latLngB,
      title: 'Location',
      map: map,
      draggable: true
    }),
    infoB = new google.maps.InfoWindow({
      content: contentB
    })
    // exemplary setup: 
    // Assumes that your map is signed to the var "map"
    // Also assumes that your marker is named "marker"
    ,
    circle = new google.maps.Circle({
      map: map,
      clickable: false,
      // metres
      radius: 100000,
      fillColor: '#fff',
      fillOpacity: .6,
      strokeColor: '#313131',
      strokeOpacity: .4,
      strokeWeight: .8
    });
  // attach circle to marker
  circle.bindTo('center', markerCenter, 'position');

  var
  // get the Bounds of the circle
    bounds = circle.getBounds()
    // Note spans
    ,
    noteA = jQuery('.bool#a'),
    noteB = jQuery('.bool#b');

  noteA.text(bounds.contains(latLngA));
  noteB.text(bounds.contains(latLngB));

  // get some latLng object and Question if it's contained in the circle:
  google.maps.event.addListener(markerCenter, 'dragend', function() {
    latLngCenter = new google.maps.LatLng(markerCenter.position.lat(), markerCenter.position.lng());
    bounds = circle.getBounds();
    noteA.text(bounds.contains(latLngA));
    noteB.text(bounds.contains(latLngB));
  });

  google.maps.event.addListener(markerA, 'dragend', function() {
    latLngA = new google.maps.LatLng(markerA.position.lat(), markerA.position.lng());
    noteA.text(bounds.contains(latLngA));
  });

  google.maps.event.addListener(markerB, 'dragend', function() {
    latLngB = new google.maps.LatLng(markerB.position.lat(), markerB.position.lng());
    noteB.text(bounds.contains(latLngB));
  });

  google.maps.event.addListener(markerCenter, 'click', function() {
    infoCenter.open(map, markerCenter);
  });

  google.maps.event.addListener(markerA, 'click', function() {
    infoA.open(map, markerA);
  });

  google.maps.event.addListener(markerB, 'click', function() {
    infoB.open(map, markerB);
  });

  google.maps.event.addListener(markerCenter, 'drag', function() {
    infoCenter.close();
    noteA.html("draggin&hellip;");
    noteB.html("draggin&hellip;");
  });

  google.maps.event.addListener(markerA, 'drag', function() {
    infoA.close();
    noteA.html("draggin&hellip;");
  });

  google.maps.event.addListener(markerB, 'drag', function() {
    infoB.close();
    noteB.html("draggin&hellip;");
  });
};
body {
  margin: 0;
  padding: 0
}
html,
body,
#map {
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: .9em;
  color: #fff;
}
#note {
  text-align: center;
  padding: .3em;
  10px;
  background: #009ee0;
}
.bool {
  font-style: italic;
  color: #313131;
}
.info {
  display: inline-block;
  width: 40%;
  text-align: center;
}
.infowin {
  color: #313131;
}
#title,
.bool {
  font-weight: bold;
}
<script src="http://maps.googleapis.com/maps/api/js"></script>
<div id="note"><span id="title">&raquo;Inside the circle?&laquo;</span>
  <hr /><span class="info">Marker <strong>A</strong>: <span id="a" class="bool"></span></span>&larr;&diams;&rarr; <span class="info">Marker <strong>B</strong>: <span id="b" class="bool"></span></span>
</div>
<div id="map">test</div>

解决方案

A google.maps.LatLngBounds is a rectangle. You need a polygon "contains" function. For a circle this can be reduced to testing whether the point is less than the radius away from the center.

Example

code snippet:

window.onload = function init() {
  var
    contentCenter = '<span class="infowin">Center Marker (draggable)</span>',
    contentA = '<span class="infowin">Marker A (draggable)</span>',
    contentB = '<span class="infowin">Marker B (draggable)</span>';
  var
    latLngCenter = new google.maps.LatLng(37.081476, -94.510574),
    latLngCMarker = new google.maps.LatLng(37.0814, -94.5105),
    latLngA = new google.maps.LatLng(37.2, -94.1),
    latLngB = new google.maps.LatLng(38, -93),
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: latLngCenter,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false
    }),
    markerCenter = new google.maps.Marker({
      position: latLngCMarker,
      title: 'Center of Circle',
      map: map,
      draggable: true
    }),
    infoCenter = new google.maps.InfoWindow({
      content: contentCenter
    }),
    markerA = new google.maps.Marker({
      position: latLngA,
      title: 'A',
      map: map,
      label: "A",
      draggable: true
    }),
    infoA = new google.maps.InfoWindow({
      content: contentA
    }),
    markerB = new google.maps.Marker({
      position: latLngB,
      title: 'B',
      map: map,
      label: "B",
      draggable: true
    }),
    infoB = new google.maps.InfoWindow({
      content: contentB
    })
    // exemplary setup: 
    // Assumes that your map is signed to the var "map"
    // Also assumes that your marker is named "marker"
    ,
    circle = new google.maps.Circle({
      map: map,
      clickable: false,
      // metres
      radius: 100000,
      fillColor: '#fff',
      fillOpacity: .6,
      strokeColor: '#313131',
      strokeOpacity: .4,
      strokeWeight: .8
    });
  // attach circle to marker
  circle.bindTo('center', markerCenter, 'position');

  var
  // get the Bounds of the circle
    bounds = circle.getBounds()
    // Note spans
    ,
    noteA = jQuery('.bool#a'),
    noteB = jQuery('.bool#b');

  noteA.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerA.getPosition(), markerCenter.getPosition())));
  noteB.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerB.getPosition(), markerCenter.getPosition())));

  // get some latLng object and Question if it's contained in the circle:
  google.maps.event.addListener(markerCenter, 'dragend', function() {
    latLngCenter = markerCenter.position;
    noteA.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerA.getPosition(), markerCenter.getPosition())));
    noteB.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerB.getPosition(), markerCenter.getPosition())));
  });

  google.maps.event.addListener(markerA, 'dragend', function() {
    latLngA = markerA.position;
    noteA.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerA.getPosition(), markerCenter.getPosition())));
  });

  google.maps.event.addListener(markerB, 'dragend', function() {
    latLngB = markerB.position;
    noteB.text((100000 > google.maps.geometry.spherical.computeDistanceBetween(markerB.getPosition(), markerCenter.getPosition())));
  });

  google.maps.event.addListener(markerCenter, 'click', function() {
    infoCenter.open(map, markerCenter);
  });

  google.maps.event.addListener(markerA, 'click', function() {
    infoA.open(map, markerA);
  });

  google.maps.event.addListener(markerB, 'click', function() {
    infoB.open(map, markerB);
  });

  google.maps.event.addListener(markerCenter, 'drag', function() {
    infoCenter.close();
    noteA.html("draggin&hellip;");
    noteB.html("draggin&hellip;");
  });

  google.maps.event.addListener(markerA, 'drag', function() {
    infoA.close();
    noteA.html("draggin&hellip;");
  });

  google.maps.event.addListener(markerB, 'drag', function() {
    infoB.close();
    noteB.html("draggin&hellip;");
  });
};
body {
  margin: 0;
  padding: 0
}
html,
body,
#map {
  height: 100%;
  font-family: Arial, sans-serif;
  font-size: .9em;
  color: #fff;
}
#note {
  text-align: center;
  padding: .3em;
  10px;
  background: #009ee0;
}
.bool {
  font-style: italic;
  color: #313131;
}
.info {
  display: inline-block;
  width: 40%;
  text-align: center;
}
.infowin {
  color: #313131;
}
#title,
.bool {
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="note"><span id="title">&raquo;Inside the circle?&laquo;</span>
  <hr /><span class="info">Marker <strong>A</strong>: <span id="a" class="bool"></span></span>&larr;&diams;&rarr; <span class="info">Marker <strong>B</strong>: <span id="b" class="bool"></span></span>
</div>
<div id="map">test</div>

这篇关于计算圆圈中的标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

11-01 00:34
Powered by LMLPHP ©2024 Font 0.005666