[英]angular ng-Map setBounds to adjust with circle radius
我在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個坐標(名稱:東,西,北,南)。
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中的哪個形狀是圓元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.