Question

我想显示最接近的标记（最远100米）并显示为红色圆圈，直到现在我的代码仍显示所有标记。

所以基本上，我想显示与我指定的位置最接近的标记，并显示在红色圆圈内，而不会显示红色圆圈外的标记。

如果有人能帮助我解决问题，我感到非常高兴

function createMarker() {
    var bounds = new google.maps.LatLngBounds(); // diluar looping

    for (i = 0; i < markers.length; i++) { 

      pos = new google.maps.LatLng(markers[i][3], markers[i][4]);
      bounds.extend(pos); // di dalam looping    
      gambar = image2;    
      marker = new google.maps.Marker({
        position: pos,
        map: map,
        title: markers[i][0],
        icon: gambar
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          var dataoutlet = "cek";    
          infowindow.setContent(dataoutlet);
          infowindow.open(map, marker, dataoutlet);
        }
      })(marker, i));
      map.fitBounds(bounds); // setelah looping
    }
  }

var markers = [
        ["Cemerlang Kemindo Abadi. PT", "Kota Kosong", "Jl. Taman Siswa No.35/43, Wirogunan, Mergangsan, Kota Yogyakarta, Daerah Istimewa Yogyakarta 55111, Indonesia", -7.8066567, 110.3778149],["Transportasi Sari Rejeki", "Kota Kosong", "Jl. Dr. Soeradji Tirtonegoro No.190, Punden, Sumberejo, Klaten Sel., Kabupaten Klaten, Jawa Tengah 57424, Indonesia", -7.7172799, 110.5841084],["RENTAL ALAT BERAT(DTS)", "Kota Kosong", "Dusun DADIREJO, Dusun II, Tlingsing, Cawas, Kabupaten Klaten, Jawa Tengah, Indonesia", -7.750473, 110.744113],["RENTAL FORKLIFT 24 JAM JOGJA - YOGYAKARTA", "Kota Kosong", "Jl. Imogiri Barat KM 4,5 No. 42, Tanjung, Bangunharjo, Sewon, Bantul, Daerah Istimewa Yogyakarta 55188, Indonesia https://mitrakaryaforklift.co.id/", -7.8342519, 110.3743642],  
      ];
      
      var map;
      var infowindow;
      var image = '1.png';
      var image2= '0.png';
 
      function initialize() {
        var pusatRadius = new google.maps.LatLng(-7.805817, 110.377857);         
        map = new google.maps.Map(document.getElementById('map'), {
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: pusatRadius,
          zoom: 17        
        });
 
        var PusatMarker = new google.maps.Marker({
          position: pusatRadius,
          map: map,
          icon: image,
          title:'Lokasi Properti'
        });

        var circle = new google.maps.Circle({
          map: map,
          radius: 100,    // in metres
          fillColor: '#AA0000'
        });
        circle.bindTo('center', PusatMarker, 'position');

        var request = {
          location: pusatRadius,
          radius: 100 /* jarak meter */
        };

        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.search(request, callback);
      }
 
      function callback(results, status) {
        if (status == google.maps.places.PlacesServiceStatus.OK) {
          for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
          }
        }
      }
 
      function createMarker() {
        var bounds = new google.maps.LatLngBounds(); // diluar looping

        for (i = 0; i < markers.length; i++) { 
          
          pos = new google.maps.LatLng(markers[i][3], markers[i][4]);
          bounds.extend(pos); // di dalam looping    
          gambar = image2;    
          marker = new google.maps.Marker({
            position: pos,
            map: map,
            title: markers[i][0],
            icon: gambar
          });
    
          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              var dataoutlet = "cek";    
              infowindow.setContent(dataoutlet);
              infowindow.open(map, marker, dataoutlet);
            }
          })(marker, i));
          map.fitBounds(bounds); // setelah looping
        }
      }
 
      google.maps.event.addDomListener(window, 'load', initialize);

#map {
        height: 600px;
        width: 100%;
        border: 1px solid #333;
        margin-top: 0.6em;
      }

<!doctype html>
<html>
    <head>
        <title>"Auto Detect" Lokasi Sekitar Google Maps</title>
       <script src="https://maps.googleapis.com/maps/api/js?key="></script>

   </head>
    <body>
  <div id="map"></div> 
  </body>
</html>

Answer 1

不确定您要使用places服务的内容，不是使用返回的结果
要确定标记是否在圆圈中，请使用geometry library computeDistanceBetween方法：

> sys_which(c("python", "python2.7", "python3", "asdf"))
#>            python                python2.7                  python3        asdf 
#> "/usr/bin/python"     "/usr/bin/python2.7" "/usr/local/bin/python3"          ""

相关问题：Google maps JS API v3: get markers in circle with containsLocation() doesn't work - why?

proof of concept fiddle

代码段：

for (i = 0; i < markers.length; i++) {
  pos = new google.maps.LatLng(markers[i][3], markers[i][4]);
  if (google.maps.geometry.spherical.computeDistanceBetween(pos, circle.getCenter()) < circle.getRadius()) {

var markers = [
  ["Cemerlang Kemindo Abadi. PT", "Kota Kosong", "Jl. Taman Siswa No.35/43, Wirogunan, Mergangsan, Kota Yogyakarta, Daerah Istimewa Yogyakarta 55111, Indonesia", -7.8066567, 110.3778149],
  ["Transportasi Sari Rejeki", "Kota Kosong", "Jl. Dr. Soeradji Tirtonegoro No.190, Punden, Sumberejo, Klaten Sel., Kabupaten Klaten, Jawa Tengah 57424, Indonesia", -7.7172799, 110.5841084],
  ["RENTAL ALAT BERAT(DTS)", "Kota Kosong", "Dusun DADIREJO, Dusun II, Tlingsing, Cawas, Kabupaten Klaten, Jawa Tengah, Indonesia", -7.750473, 110.744113],
  ["RENTAL FORKLIFT 24 JAM JOGJA - YOGYAKARTA", "Kota Kosong", "Jl. Imogiri Barat KM 4,5 No. 42, Tanjung, Bangunharjo, Sewon, Bantul, Daerah Istimewa Yogyakarta 55188, Indonesia https://mitrakaryaforklift.co.id/", -7.8342519, 110.3743642],
];

var map;
var infowindow;
var image = '1.png';
var image2 = '0.png';

function initialize() {
  var pusatRadius = new google.maps.LatLng(-7.805817, 110.377857);
  map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: pusatRadius,
    zoom: 17
  });

  var PusatMarker = new google.maps.Marker({
    position: pusatRadius,
    map: map,
    // icon: image,
    title: 'Lokasi Properti'
  });

  var circle = new google.maps.Circle({
    map: map,
    radius: 100, // in metres
    fillColor: '#AA0000'
  });
  circle.bindTo('center', PusatMarker, 'position');

  var request = {
    location: pusatRadius,
    radius: 100 /* jarak meter */
  };

  infowindow = new google.maps.InfoWindow();
  createMarker(circle);
}

function createMarker(circle) {
  var bounds = new google.maps.LatLngBounds(); // diluar looping

  for (i = 0; i < markers.length; i++) {
    pos = new google.maps.LatLng(markers[i][3], markers[i][4]);
    if (google.maps.geometry.spherical.computeDistanceBetween(pos, circle.getCenter()) < circle.getRadius()) {
      bounds.extend(pos); // di dalam looping    
      gambar = image2;
      marker = new google.maps.Marker({
        position: pos,
        map: map,
        title: markers[i][0],
        icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          var dataoutlet = "cek";
          infowindow.setContent(dataoutlet);
          infowindow.open(map, marker, dataoutlet);
        }
      })(marker, i));
    }
  }
  map.fitBounds(circle.getBounds()); // setelah looping
}

google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
  border: 1px solid #333;
  margin: 0;
  padding: 0;
}

如何显示可以显示为红色圆圈的最近的标记？

1 个答案: