maplacejs改变地图半径

Question

我将这个库用于谷歌地图maplacejs，我正在使用圈子地图。我想根据具有距离的HTML选择表单来更改圆半径。在加载地图后，我首先尝试使用代码更改为半径！但是当我在更改时添加select的事件并且我执行相同的代码。它不再起作用了。我会提前感谢任何帮助。

＆＃13;

＆＃13;

<script>
  $(function() {
  //Map config
  var LocsA = [
    {
      lat: 45.9,
      lon: 10.9,
      title: 'Title A1',
      html: '<h3>Content A1</h3>',
      icon: 'http://maps.google.com/mapfiles/markerA.png',
      animation: google.maps.Animation.DROP
    }
  ];

  var map = new Maplace({
    locations: LocsA,
    map_div: '#gmap-circles',
    start: 16,
    type: 'circle',
    shared: {
      zoom: 16,
      html: '%index'
    },
    circle_options: {
      radius: 10,  
    },
    circleRadiusChanged: function(index, point, marker) {
      $('#radiusInfo').text(
        ' - point #' + (index+1) + ' size: ' + parseInt(marker.getRadius()) + 'mt.'
      );
    }
  });
  map.Load();

  map.circles["0"].radius = 100; //Changing the radius work here !

  //Select event
  $('select').on('change', function() {
    var value = this.value;
    map.circles["0"].radius = value; //Changing the radius doesn't work anymore, here is my problem.
  });

});
</script>

＆＃13;

<div id="gmap-circles" style="width: 600px; height: 400px"></div>
    
<select id="distance">
  <option value="100">100 Km</option>
  <option value="500">500 Km</option>
  <option value="1000">1000 Km</option>
  <option value="2000">2000 Km</option>
</select> 

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用.setRadius更改半径：

map.circles["0"].setRadius(parseFloat(value));

proof of concept fiddle

代码段

＆＃13;

＆＃13;

$(function() {
  //Map config
  var LocsA = [{
    lat: 45.9,
    lon: 10.9,
    title: 'Title A1',
    html: '<h3>Content A1</h3>',
    icon: 'http://maps.google.com/mapfiles/markerA.png',
    animation: google.maps.Animation.DROP
  }];

  var map = new Maplace({
    locations: LocsA,
    map_div: '#gmap-circles',
    start: 16,
    type: 'circle',
    shared: {
      zoom: 16,
      html: '%index'
    },
    circle_options: {
      radius: 10,
    },
    circleRadiusChanged: function(index, point, marker) {
      $('#radiusInfo').text(
        ' - point #' + (index + 1) + ' size: ' + parseInt(marker.getRadius()) + 'mt.'
      );
    }
  });
  map.Load();

  map.circles["0"].setRadius(100); //Changing the radius work here !

  //Select event
  $('select').on('change', function() {
    var value = this.value;
    map.circles["0"].setRadius(parseFloat(value)); //Changing the radius doesn't work anymore, here is my problem.
  });

});

＆＃13;

html,
body,
#gmap-circles {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://maplacejs.com/dist/maplace.js"></script>
<select id="distance">
  <option value="100">100 Km</option>
  <option value="500">500 Km</option>
  <option value="1000">1000 Km</option>
  <option value="2000">2000 Km</option>
</select>
<div id="gmap-circles"></div>

＆＃13;

＆＃13;

＆＃13;