0

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 で可能ですか?

ありがとう！

4

1 に答える 1

0

これがネイティブな方法です。円の 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() によって、4 つのポイントの緯度を見つけることができました。

方法 2:

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

注: このようにして、map.shapes 内のどの形状が円要素であるかを正確に特定する必要があります。

于 2017-03-03T07:03:11.013 に答える