在Google地图上绘制圆圈并显示缩放级别问题

时间:2014-03-28 00:51:36

标签: javascript google-maps google-maps-api-3

我正在使用圈子API https://developers.google.com/maps/documentation/javascript/examples/circle-simple

在Google地图上绘制一些点

我遇到的问题是并非所有的点都显示在地图上,预定义的缩放级别为4,如果我只放大一个级别,那么它们会显示出来。反正有没有让他们出现在远处变焦?

以下是我将代码添加到地图的代码:

addMarker: function(opts) {
  var gLatLng = this.gLatLng(opts);
  var radius = opts.population / 20;
  var self = this;

  this._configure_circle(radius);

  var circle = {
      strokeColor: this.color,
      strokeOpacity: 0.8,
      strokeWeight: this.stroke,
      fillColor: this.color,
      fillOpactiy: 1,
      map: this.map,
      center: gLatLng,
      radius: this.radius
  }
  var gCirle = new google.maps.Circle(circle);
  gCirle.setValues({_id: opts._id});
  this.markers.push(gCirle);

  google.maps.event.addListener(gCirle, 'click', function(event){
    self.map.setZoom(8);
    self.map.setCenter(new google.maps.LatLng(gCirle.getCenter().lat(), gCirle.getCenter().lng()));
    Session.set('currentMapArea', gCirle.get('_id'));
  });

  return gCirle;
},
_configure_circle: function(num) {
    if(num > 4000) {
        this.stroke = 50;
        this.color = '#66FF00'
        this.radius = num + 300;
    } else if(num <= 4000 && num > 3400) {
        this.stroke = 25;
        this.color = '#44E030';
        this.radius = num + 200;
    } else {
        this.stroke = 15;
        this.color = '#22DD60';
        this.radius = num;
    }
}

1 个答案:

答案 0 :(得分:0)

创建一个LatLngBounds - 对象,使用每个圆的边界扩展这些LatLngBounds,当您完成圆的创建时,通过将LatLngBounds作为参数传递来调用地图的fitBounds - 方法