2017-03-02 1 views
0

각도로 ngMaps를 사용하고 있습니다. 지도를 만들고 반지름 값에 따라 조정할 수있는 모양 (원)을 포함 시켰습니다.각도 ng-map 원 반경으로 조정할 setBounds

지도의 경계를 설정하여 전체 원을 포함하도록 조정할 수 있습니까?

<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로 가능합니까?

감사합니다.

답변

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에 의해() 우리는 네 개의 점 '위도와 경도를 찾을 수 있습니다.

Way2 :

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

참고 : 이런 방법으로 원 요소입니다 map.shapes에서 어떤 형태 정확한해야합니다.