Question

我在Angular中使用ngMaps。我创建了一个地图，其中包含一个可以根据我的半径值进行调整的形状（圆圈）。

是否可以设置地图的边界以进行调整以包含整个圆圈？

以下是我的观点：

<ng-map class="bu-map"
                default-style="false"
                scrollwheel="false"
                style="margin: 0 -15px"
                data-ng-style="{'height': appCtrl.windowHeight - 81 + 'px'}"
                map-type-control="false"
        >

            <shape id="circle"
                   name="circle"
                   centered="true"
                   stroke-color='#FF0000'
                   stroke-opacity="0.8"
                   stroke-weight="1"
                   center="{{listCtrl.queryBounds.centerPoint}}"
                   radius="{{listCtrl.queryBounds.radius}}"
                   editable="false"></shape>
</ng-map>

和我的控制员：

        NgMap.getMap().then((map) => {
            bu.map = map;
            map.setCenter(centerPoint);
            bu.queryBounds = {
                centerPoint: [centerPoint.lat, centerPoint.lng],
                // miles to meters conversion
                radius: (parseFloat(searchQuery.radius) || 1) * 1600,
            };
            map.setZoom(10);
        });
    });

在这种情况下，可以调整searchQuery.radius来调整在地图上绘制的圆圈，但是有时它对于地图太大而且缩放不会调整。

我在setZoom上进行了计算，但是setZoom值的多样性不足以完美地包含圆圈。

这可以用setBounds吗？

谢谢！

Answer 1

这是原生方式。在圆圈上找到4个坐标（名称：东，西，北，南）。

NgMap.getMap().then((map) => {
    let bounds = new google.maps.LatLngBounds();
    bounds.extend(east);
    bounds.extend(west);
    bounds.extend(north);
    bounds.extend(south);

    map.fitBounds(bounds);   // fit the zoom to show all the four cordinates
    map.setCenter(bounfd.getCenter());  // set the circle to the map center.
}

UPD：对于上述方式，通过google.maps.geometry.spherical.computeOffset（），我们可以找到四个点'latlng。

<强> Way2：

NgMap.getMap().then((map) => {
    map.fitBounds(map.shapes[0].getBounds());   // fit the zoom to the circle.
}

注意：通过这种方式，您必须确定map.shapes中的哪个形状是圆形元素。

angular ng-Map setBounds用圆半径调整

1 个答案: