Question

下面是我使用的代码。我可以改变它的位置和半径..我只想让圆圈在地图的视口中。通过自动调整缩放级别.. 请帮我解决问题



 function load() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(12, 77.345),
        zoom: 10,
        mapTypeId: 'roadmap',
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
    });

        var distanceWidget = new DistanceWidget(map);
}
     function DistanceWidget(map) {
            this.set('map', map);
            this.set('position', map.getCenter());

            var marker = new google.maps.Marker({
              draggable: true,
              title: 'Move me!',
              icon:'human.png'
            });

            // Bind the marker map property to the DistanceWidget map property
            marker.bindTo('map', this);

            // Bind the marker position property to the DistanceWidget position
            // property
            marker.bindTo('position', this);

            // Create a new radius widget
            var radiusWidget = new RadiusWidget();

            // Bind the radiusWidget map to the DistanceWidget map
            radiusWidget.bindTo('map', this);

            // Bind the radiusWidget center to the DistanceWidget position
            radiusWidget.bindTo('center', this, 'position');

            // Bind to the radiusWidgets' distance property
            this.bindTo('distance', radiusWidget);

            // Bind to the radiusWidgets' bounds property
            this.bindTo('bounds', radiusWidget);
          }
          DistanceWidget.prototype = new google.maps.MVCObject();


          /**
           * A radius widget that add a circle to a map and centers on a marker.
           *
           * @constructor
           */
          function RadiusWidget() {
            var circle = new google.maps.Circle({
              strokeWeight: 1,
              clickable:false,
              draggable:false,
               strokeColor: "#3c4a64",
              strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: "#dcd2f4",
            fillOpacity: 0.5,
            });

            // Set the distance property value, default to 5km.
            this.set('distance', 5);

            // Bind the RadiusWidget bounds property to the circle bounds property.
            this.bindTo('bounds', circle);

            // Bind the circle center to the RadiusWidget center property
            circle.bindTo('center', this);

            // Bind the circle map to the RadiusWidget map
            circle.bindTo('map', this);

            // Bind the circle radius property to the RadiusWidget radius property
            circle.bindTo('radius', this);

            // Add the sizer marker
            this.addSizer_();
          }
          RadiusWidget.prototype = new google.maps.MVCObject();

          /**
           * Update the radius when the distance has changed.
           */
          RadiusWidget.prototype.distance_changed = function() {
            this.set('radius', this.get('distance') * 1000);
          };


          /**
           * Add the sizer marker to the map.
           *
           * @private
           */
          RadiusWidget.prototype.addSizer_ = function() {
            var sizer = new google.maps.Marker({
              draggable: true,
              title: 'Drag me!',
              icon:'blue.png',
              crossOnDrag:false
            });

            sizer.bindTo('map', this);
            sizer.bindTo('position', this, 'sizer_position');

            var me = this;
            google.maps.event.addListener(sizer, 'drag', function() {
              // Set the circle distance (radius)
              me.setDistance();
            });
          };


          /**
           * Update the center of the circle and position the sizer back on the line.
           *
           * Position is bound to the DistanceWidget so this is expected to change when
           * the position of the distance widget is changed.
           */
          RadiusWidget.prototype.center_changed = function() {
            var bounds = this.get('bounds');

            // Bounds might not always be set so check that it exists first.
            if (bounds) {
              var lng = bounds.getNorthEast().lng();

              // Put the sizer at center, right on the circle.
              var position = new google.maps.LatLng(this.get('center').lat(), lng);
              this.set('sizer_position', position);
            }
          };

Answer 1

获取圆圈的界限：

google.maps.Circle.getBounds()

使用google.maps.Map.fitBounds()缩放地图以使地图居中以适合圆圈

如何在半径变化或位置变化的谷歌地图内拟合一个圆圈？

1 个答案: