在谷歌地图API JS V3上显示距离用户当前位置最近的多个标记,距离30公里

Showing nearest multiple markers on Google Map API JS V3 from current position of users at range of 30kms

本文关键字:距离 最近 30公里 位置 JS API 谷歌地图 V3 用户 显示      更新时间:2023-10-18

我正在创建一个移动应用程序,用户(客户)将在其中看到距离用户当前位置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公里的标记。

否则将不显示。

怎么做?

只有在标记符合您的条件时才将其添加到地图中。请确保包含几何图形库。

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);