Show/Hide 基于距离的标记（使用 JQuery 滑块）

Question

我正在使用 Gmap3（Google 地图 JQuery），我正在尝试 Show/Hide 根据用户的距离和其他标记（根据滑块值）的标记

我每次都尝试用 computeDistanceBetween() 计算距离，但无法成功。

这里有一个示例代码 (js) 和 jsfiddle link:

$(function(){

     var distance;

    $("#test").gmap3();

      $("#display p").empty();
      var coordinates = $("#geofenceCoords").val();
      var jsonObj = jQuery.parseJSON(coordinates); 

    //user position (Blue marker)
     var markersData = {
                    values: [
                            {
        latLng: [51.506695,-0.147950],
                                    options: {
                                        icon: "http://maps.google.com/mapfiles/kml/paddle/blu-circle.png",
                                    },
                                    data: 'aaabbb'
                                ,tag:"aaa", id:"<?php echo $id; ?>"
                                }
                            ,
                        ],
                    options:{
                        draggable: false
                    }
                };


        $("#test").gmap3({
        getlatlng:{
callback: function(results){
                        //add other markers
              var markers=[];
              $.each(jsonObj, function(i, item) {
              var marker = new Object();
                  marker.lat = jsonObj[i].latitude;
                  marker.lng = jsonObj[i].longitude;
                  marker.options = new Object();
                  marker.options.icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/marker.png");
                  markers.push(marker);
              });

$("#test").gmap3({
                marker:{
                    //add the markers
                  values: markers,
                  options: {draggable: false}
              },
              autofit:{},
            });
          }
        }              
      });

     //add the user position (blue marker)
$("#test").gmap3({
      action: 'addMarker',
      marker: markersData
},"autofit");

//slider to hide/show markers according the distance

   $("#slider").slider(
{
            range: "min",
                value: 500,
                min: 1,
                max: 1000,
            slide: function( event, ui ) {
               computedistance(ui.value);
                $( "#slider-value" ).html( ui.value );
                $( "#slider-distance" ).html( computedistanceAndHideMarkers(ui.value) );
            }
}
);

$( "#slider-value" ).html(  $('#slider').slider('value') );

function computedistanceAndHideMarkers(km){
   // var distance = google.maps.geometry.spherical.computeDistanceBetween(,km);
    //return distance;
} 

  });

这是我目前的情况：jsfiddle

非常感谢你的帮助！

谢谢

伊兰.

Answer 1

您没有在 fiddle 中加载几何库。

shows/hides 标记的函数可能如下所示：

function computedistance(km) {

    var //the markers
        markers = $("#test").gmap3({
          get: {
            name: "marker",

            all: true
          }
        }),
        //location of the blue marker
        user = new google.maps.LatLng(markersData.values[0].latLng[0],
                                      markersData.values[0].latLng[1]),
        //the map
        map = $("#test").gmap3({
                get: {
                  name: 'map'
                }
              });


    //iterate over the markers
    $.each(markers, function (i, m) {
         m.setMap((google.maps.geometry.spherical
                    .computeDistanceBetween(user, m.getPosition()) <= km * 1000) 
                        ? map 
                        : null);
    })

}

演示：http://jsfiddle.net/doktormolle/ahLmdLuf/

Show/Hide 基于距离的标记（使用 JQuery 滑块）

Show/Hide markers based on distance (using JQuery slider)

javascript

jquery

google-maps

google-maps-api-3

jquery-gmap3