Question

我试图用地图api制作地图，用户可以在那里插入地址并设置地点的通知半径。
我使用了Google开发者页面中的places-searchbox示例并进行了一些修改。

我不知道如何获得圆弧半径的活动和更改的rangelider值。

我在Plunker上做了一个例子： https://plnkr.co/edit/91FAbWgULMXmUSvcSkwt?p=preview

JS ：

            var inputradius = document.getElementById('myRange').value;
         $("#rangeValue").text($("#myRange").val())

      $("#myRange").on("input change", function() {
          $("#rangeValue").text($("#myRange").val())

          var inputradius = document.getElementById('myRange').value;


     });




 function initAutocomplete() {
        var CenterToCountry = {lat: 50.9725, lng: 11.4804};
        var map = new google.maps.Map(document.getElementById('map'), {
          center: CenterToCountry,
          zoom: 6,
          mapTypeId: 'roadmap',
              streetViewControl: false,
              mapTypeControl: false
        });

        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          markers.forEach(function(marker) {
            marker.setMap(null);
          });
          markers = [];

          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }


           markers.push(new google.maps.Marker({
              map: map,
              title: place.name,
              position: place.geometry.location
            }));

            var location = place.geometry.location;
            var lat = location.lat();
            var lng = location.lng();

            document.getElementById("lat").value = lat;
            document.getElementById("lng").value = lng;





            var notifyrange = new google.maps.Circle({
            strokeColor: '#ff9600',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FFAB00 ',
            fillOpacity: 0.35,
            map: map,
            center: place.geometry.location,
            radius: inputradius
          });


          console.log(inputradius)



            if (place.geometry.viewport) {
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);



        });

      }

编辑：更新的代码，现在我能够获得实时值，但我不知道如何在地图api中设置。得到像“inputradius”这样的错误并不是一个数字等

EDIT2：
目前正在$("#myRange").on("input change", function()内部使用以下内容更改圆半径：

    var inputradius = document.getElementById('myRange').value;

     $("#rangeValue").text($("#myRange").val())

  $("#myRange").on("input change", function() {
      $("#rangeValue").text($("#myRange").val())

      var inputradius = document.getElementById('myRange').value;

      function updateRadius(circle, inputradius) {
    circle.setRadius(inputradius * 1000);
    map.fitBounds(circle.getBounds());
    }

 });

但是行不通......

Answer 1

检查此工作输出：http://jsbin.com/gisoyay/1/edit?js,output

用于设置半径的滑块功能现在正在运行。

这是更新的JS：

var inputradius = document.getElementById('myRange');
var notifyrange;

$("#rangeValue").text($("#myRange").val())

$("#myRange").on("input change", function() {
    $("#rangeValue").text($("#myRange").val());

    if(notifyrange)
      updateRadius(notifyrange, parseFloat(inputradius.value));
});

function updateRadius(circle, radius) {
    var map = circle.getMap();   
    circle.setRadius(radius * 1000);
    map.fitBounds(circle.getBounds());
}

function initAutocomplete() {

    var CenterToCountry = {lat: 50.9725, lng: 11.4804};

    var map = new google.maps.Map(document.getElementById('map'), {
        center: CenterToCountry,
        zoom: 6,
        mapTypeId: 'roadmap',
        streetViewControl: false,
        mapTypeControl: false
    });

    var input = document.getElementById('pac-input');
    var searchBox = new google.maps.places.SearchBox(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

    map.addListener('bounds_changed', function() {
       searchBox.setBounds(map.getBounds());
    });

    var markers = [];

    searchBox.addListener('places_changed', function() {
       var places = searchBox.getPlaces();

       if (places.length === 0) {
         return;
       }

      markers.forEach(function(marker) {
        marker.setMap(null);
      });

    markers = [];

    var bounds = new google.maps.LatLngBounds();

    places.forEach(function(place) {
         if (!place.geometry) {
            console.log("Returned place contains no geometry");
            return;
         }

         markers.push(new google.maps.Marker({
             map: map,
             title: place.name,
             position: place.geometry.location
         }));

         var location = place.geometry.location;
         var lat = location.lat();
         var lng = location.lng();

         document.getElementById("lat").value = lat;
         document.getElementById("lng").value = lng;

         notifyrange = new google.maps.Circle({
              strokeColor: '#ff9600',
              strokeOpacity: 0.8,
              strokeWeight: 2,
              fillColor: '#FFAB00 ',
              fillOpacity: 0.35,
              map: map,
              center: place.geometry.location,
              radius: parseFloat(inputradius.value) * 1000
         });

         if (place.geometry.viewport) {
              bounds.union(place.geometry.viewport);
         } else {
              bounds.extend(place.geometry.location);
         }
     });
     map.fitBounds(bounds);
  });
}

Maps v3 API Searchbox - 使用rangelider更改圆的半径

1 个答案: