Moving Controls Bản đồ trên góc 2 Google Maps

Question

Tôi đang tìm kiếm một cách để sử dụng các tài sản có sẵn zoomControlOptiions trong các bản đồ google thông thường, như vậy:

zoomControlOptions: { 
    style: google.maps.ZoomControlStyle.SMALL, 
    position: google.maps.ControlPosition.LEFT_CENTER 
}, 

Stackoverflow example showing code above
Same thing in the official google maps docs

Thật không may, tôi don Không thấy tùy chọn này trong Angular 2 Google Maps API Docs. Có cách nào để làm điều đó? Có cách nào để sử dụng chức năng đầy đủ mặc dù sử dụng trình bao bọc Angular 2 không?

Lưu ý rằng chỉ chạy mã này hoạt động tốt:

map.setOptions({ 
     zoom: 1, 
     center: position, 
     zoomControl: true 
    }); 

    console.log(map.getZoom()); 

tôi có thể có được các đối tượng bản đồ google bản địa và các phương pháp chạy/thiết lập các thuộc vào nó. Vấn đề xảy ra khi tôi cố gắng sử dụng zoomControlOptions, mà là đến trực tiếp từ docs

---

Edit: Vì vậy, nó thực sự hoạt động, vấn đề bây giờ là nhận được xung quanh các trình biên dịch nguyên cảo phàn nàn.

Chỉnh sửa 2: Tôi đã khắc phục sự cố, nhưng nếu có ai muốn tiền thưởng - vui lòng giải thích lý do tại sao zoomControlOptions không có sẵn.

Answer 1

Bạn có thể lấy tham chiếu đến đối tượng bản đồ gốc và sau đó thêm zoomControlOptions. Một ví dụ đầy đủ để nhận tài liệu tham khảo bản đồ được tìm thấy ở https://github.com/philipbrack/example-angular2-google-maps-getNativeMap:

import {Component, OnInit} from '@angular/core'; 

import {GoogleMapsAPIWrapper} from 'angular2-google-maps/core'; 

declare var google:any; 

@Component({ 
    selector: 'app-map-content', 
    template: '' 
}) 
export class MapContentComponent implements OnInit { 

    constructor(public mapApiWrapper:GoogleMapsAPIWrapper) { 

    } 

    ngOnInit() { 

    this.mapApiWrapper.getNativeMap() 
     .then((map)=> { 

     // I have been manually updating core/services/google-maps-types.d.ts to include things they didn't include. 
     console.log(map.getZoom()); 

     let position = new google.maps.LatLng(45.521, -122.677); 

     var cityCircle = new google.maps.Circle({ 
      strokeColor: '#FF0000', 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: '#FF0000', 
      fillOpacity: 0.35, 
      map: map, 
      center: position, 
      radius: 10000 
     }); 


     }); 

    } 

} 

Answer 2

Vì vậy, rõ ràng là tất cả những gì cần làm là đảm bảo trình biên dịch không phàn nàn bằng cách tạo ra một giao diện:

interface NativeGoogMapProps { 
    zoomControlOptions?: any; 
    streetViewControlOptions?: any; 
} 

và sau đó sử dụng nó khi đặt tùy chọn bản đồ:

let zoomControlOptions: any = { 
     style: google.maps.ControlPosition.small, 
     position: google.maps.ControlPosition.RIGHT_CENTER 
    }; 

    let streetViewControlOptions: any = { 
     position: google.maps.ControlPosition.RIGHT_CENTER 
    }; 

    map.setOptions(<NativeGoogMapProps>{ 
     zoomControlOptions: zoomControlOptions, 
     streetViewControlOptions: streetViewControlOptions 
    }); 

Tôi thực sự không biết tại sao một số đạo cụ ở trên bản đồ và một số thì không mặc dù, nhưng điều này không có lỗi.