MaplaceJS更改地图半径

maplacejs change map radius

本文关键字：地图 MaplaceJS      更新时间：2023-09-26

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

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

使用 .setRadius 更改半径：

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

概念验证小提琴

代码片段：

$(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.
  });
});
html,
body,
#gmap-circles {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<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>

相关文章：