2017-02-21 9 views
6

szukam sposobu korzystania z nieruchomości dostępne zoomControlOptiions w regularnych google maps, jak tak:Moving Kontrole Mapa Na kątowe 2 Google Maps

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

Niestety, don nie widzisz tej opcji w Mapach Google 2 w Angular 2 API Docs. Czy jest jakiś sposób na zrobienie tego? Czy istnieje sposób korzystania z pełnej funkcjonalności pomimo użycia opakowania Angular 2?

enter image description here

Zauważ, że tak działa ten kod działa poprawnie:

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

    console.log(map.getZoom()); 

jestem w stanie uzyskać natywną obiekt Mapach Google i działają metody/set właściwości na nim. Problem pojawia się, gdy próbuję użyć zoomControlOptions, który nadchodzi bezpośrednio z docs


EDIT: Tak, to faktycznie działa, problem jest teraz poruszanie się po kompilator maszynopis sędzią.

Edycja 2: Naprawiłem problem, ale jeśli ktoś chce otrzymać nagrodę - proszę wyjaśnić, dlaczego zoomControlOptions nie są dostępne natywnie.

Odpowiedz

1

Możesz uzyskać odwołanie do natywnego obiektu mapy, a następnie dodać zoomControlOptions. Pełną przykładem coraz odniesienie mapa znajduje się na 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 
     }); 


     }); 

    } 

} 
+0

Dzięki, próbuję teraz. – VSO

1

Więc widocznie wszystko, co potrzebne do zrobienia było upewnić się, że kompilator nie skarżą się, tworząc interfejs:

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

i następnie używając go podczas ustawiania opcji mapy:

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 
    }); 

ja właściwie nie wiem, dlaczego niektóre rekwizyty są na obiekcie mapy, a niektóre nie są jednak, ale to działa bez błędów.