왜 lat lang이있는 ionic 3 Google지도가 안드로이드에로드되지 않고

Question

google map이 (가) android 기기에 나타나지 않는 이유는 무엇입니까?

브라우저에서 나는 console.log(); lat, lang입니다. 기기가 위치 액세스 권한을 요청하지만 render map이 아닙니다. 코드 아래

미리 정의 된 lat, lang

ionViewDidLoad() { 
    console.log('ionViewDidLoad GoogleMapTestPage'); 
    this.loadMapHandler();  

    } 

    loadMapHandler() { 

     //console.log(lat,lang); 

    // create a new map by passing HTMLElement 
    let element: HTMLElement = document.getElementById('map'); 

    let map: GoogleMap = this.googleMaps.create(element); 



    // create CameraPosition 
    let position: any = { 
     target: LatLng,  
     zoom: 18, 
     tilt: 30 
    }; 

    map.one(GoogleMapsEvent.MAP_READY).then(() => { 
     console.log('Map is ready!'); 
     // Now you can add elements to the map like the marker 
      map.moveCamera(position); 

     // create new marker 
     let markerOptions:any = { 
      position: LatLng, 
      title: 'Ionic' 
     }; 

     const marker:any = map.addMarker(markerOptions) 
      .then((marker: Marker) => { 
       marker.showInfoWindow(); 
      }); 
     }); 


     } 

내가 사용자의 현재 위치를 얻을과 다른, 위도를 사용하여 lang을 통과 할 때 위의 코드는 안드로이드

에 잘 작동을 위해 잘 작동

기능을 수행하면 작동하지 않습니다.

은 다음과 안드로이드에서 작동하지

코드가 작동하지 않는 내 코드입니다 : 권한을 요청하지만, 사전에

import { Geolocation ,GeolocationOptions } from '@ionic-native/geolocation'; 
    constructor(...,public googleMaps: GoogleMaps,private geolocation : Geolocation) { 
     } 

    ionViewDidLoad() { 

    this.loadMap();  

    } 
    loadMap(){ 

     this.geolocation.getCurrentPosition().then((position) => { 

      this.loadMapHandler(position.coords.latitude,position.coords.longitude);  


     }, (err) => { 
      console.log(err);    
     }); 
    } 

    loadMapHandler(lat,lang) { 

     console.log(lat,lang); // console.log('is giving map co-ordinates'); 

    // create a new map by passing HTMLElement 
    let element: HTMLElement = document.getElementById('map'); 

    let map: GoogleMap = this.googleMaps.create(element); 

    let ionic: LatLng = new LatLng(lat,lang); 

    // create CameraPosition 
    let position: any = { 
     target: LatLng,  
     zoom: 18, 
     tilt: 30 
    }; 

    map.one(GoogleMapsEvent.MAP_READY).then(() => { 
     console.log('Map is ready!'); 
     // Now you can add elements to the map like the marker 
      map.moveCamera(position); 

     // create new marker 
     let markerOptions:any = { 
      position: LatLng, 
      title: 'Ionic' 
     }; 

     const marker:any = map.addMarker(markerOptions) 
      .then((marker: Marker) => { 
       marker.showInfoWindow(); 
      }); 
     }); 

    } 

감사를 작동하지 않습니다! 당신이 Google지도 플러그인을 사용하는 경우

Answer 1

나는 내장 기능을 사용하는 것이 좋습니다 :

this.mapElement = document.getElementById('map'); 
    let mapOptions: GoogleMapOptions = { 
    }; 

    this.map = this.googleMapsService.create(this.mapElement, mapOptions); 

    // Wait the MAP_READY before using any methods. 
    this.map.one(GoogleMapsEvent.MAP_READY) 
     .then(() => { 

this.map.getMyLocation().then((myLocation: MyLocation) => { 
     this.map.setCameraTarget(myLocation.latLng); 
     this.map.setCameraZoom(18); 
    }); 

을 그리고 당신은 정상입니다.

UPDATE :

map.one(GoogleMapsEvent.MAP_READY).then(() => { 
     console.log('Map is ready!'); 
     // Now you can add elements to the map like the marker 
      map.moveCamera(position); 

     // create new marker 
     let markerOptions:any = { 
      position: LatLng, 
      title: 'Ionic' 
     }; 

     const marker:any = map.addMarker(markerOptions) 
      .then((marker: Marker) => { 
       marker.showInfoWindow(); 
      }); 
     }); 


map.getMyLocation().then((myLocation) => { 
     map.setCameraTarget(myLocation.latLng); 
     map.setCameraZoom(18); 
    }); 

     } 

잘 작동해야 map.getMyLocation() 부분을 추가하는 첫 번째 솔루션을 사용.

Answer 2

@ionic-native/core@4.4.0 및

$> npm uninstall @ionic-native/core @ionic-native/google-maps 

$> npm install @ionic-native/core@4.4.0 @ionic-native/google-maps@4.4.0 

@ionic-native/google-maps@4.4.0는 다음과 같은 코드를 대신 사용하십시오 : 두 번째 조각에서 ionViewDidLoad에서 loadMap` 기능`호출 것 같다 당신이 그나마

import { Geolocation ,GeolocationOptions } from '@ionic-native/geolocation'; 

class MapPage { 
    map: GoogleMap; 

    constructor(..., private geolocation : Geolocation) { 
    } 

    ionViewDidLoad() { 

    this.loadMap();  

    } 

    loadMap(){ 

    this.geolocation.getCurrentPosition() 
     .then((position) => { 
     console.log('--->step1 clear'); 

     this.loadMapHandler(position.coords.latitude,position.coords.longitude); 


     }) 
     .catch((err) => { 
     console.log(err); 
     }); 
    } 

    loadMapHandler(lat,lang) { 

    console.log('step2', lat,lang); // console.log('is giving map co-ordinates'); 

    let position: ILatLng = { 
     lat: lat, 
     lng: lang 
    }; 

    this.map = GoogleMaps.create('map', { 
     camera: { 
     target: position, 
     zoom: 18, 
     tilt: 30 
     } 
    }); 

    this.map.one(GoogleMapsEvent.MAP_READY).then(() => { 
     console.log('Map is ready!'); 

     // create new marker 
     let markerOptions: MarkerOptions = { 
     position: position, 
     title: 'Ionic' 
     }; 

     this.map.addMarker(markerOptions) 
     .then((marker: Marker) => { 
      marker.showInfoWindow(); 
     }); 
    }); 
    } 
}