在 Google Map API JS V3 上显示距离用户当前位置最近的多个标记，范围为 30 公里

Question

我正在创建一个移动应用程序，用户（客户）将在其中看到距用户当前位置 30 公里范围内的多个驾驶员标记。

我能够显示多个标记，这些标记使用 JSON 和 JQuery 存储在数据库中。

function multimarker(map)
{
        jQuery.ajax({                              
    url: baseurl +  "getdriverlocation.php",
    type: "JSON",
    async: true,
    success: function(data){
       var myArray = jQuery.parseJSON(data);// instead of JSON.parse(data)

        jQuery(myArray).each(function( index, element ) {     
        driverlat = element.driver_lat;
        driverlng = element.driver_lng;
        locations.push([driverlat , driverlng])
});
    var bounds = new google.maps.LatLngBounds();
 for (i  = 0; i < locations.length; i++)
                 { 

                var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]);
            drivermarker=new google.maps.Marker({position:latlng1});
            drivermarker.setMap(map);
           var infowindow = new google.maps.InfoWindow();
           google.maps.event.addListener(drivermarker, 'click', (function(marker, i) {
            return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, drivermarker);

        }
      })(drivermarker, i));
                         bounds.extend(latlng1);
                 }
        map.fitBounds(bounds);
} 
});

}

还可以在同一张地图上绘制当前位置

function currentpostionmap()
{
     if ( navigator.geolocation ) {


        function success(pos) 
         {
             var latlng = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
             var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map"), myOptions);
          var image123 = 'https:///developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';

        marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: image123
        
        });
             multimarker(map);

        }
        function fail(error) {
           var latlng = new google.maps.LatLng(18.5204, 73.8567);
             var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
            map = new google.maps.Map(document.getElementById("map"), myOptions);
      
            marker = new google.maps.Marker({
            position: latlng,
            map: map
           
            });


        }
        // Find the users current position.  Cache the location for 5 minutes, timeout after 6 seconds
        navigator.geolocation.getCurrentPosition(success, fail, {maximumAge: 500000, enableHighAccuracy:true, timeout: 6000});
    } 
}

现在我只想显示距离当前位置 30 公里的标记。

否则不会显示。

怎么做？

Answer 1

仅当标记符合您的条件时才将它们添加到地图中。请务必包含geometry library。

for (i  = 0; i < locations.length; i++) { 
  var latlng1 = new google.maps.LatLng(locations[i][0], locations[i][1]);
  if (google.maps.geometry.spherical.computeDistanceBetween(latlng1,map.getCenter()) < 30000) {
    drivermarker=new google.maps.Marker({position:latlng1});
    drivermarker.setMap(map);
    var infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(drivermarker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(locations[i][0]);
        infowindow.open(map, drivermarker);
      }
    })(drivermarker, i));
    bounds.extend(latlng1);
  }
}
map.fitBounds(bounds);