내 마커가 현재 위치를 가리키지 않는 이유

Question

내 Android 기기에 GoogleMap을 가져올 수 있는데 문제가 내 currentlocation을 가리키고 있지 않습니다.

:

아래

$ ionic cordova plugin add cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE" 

$ npm install --save @ionic-native/google-maps 

내 구글지도 내 안드로이드 장치에

아래

내 코드되는 모습입니다 :

나는이 두 패키지를 설치 한

ionViewDidLoad() { 
    console.log('ionViewDidLoad GoogleMapTestPage'); 
    this.loadMap(); 
    } 


ngAfterViewInit() { 
//this.loadMap();   
} 

loadMap() { 

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

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

// listen to MAP_READY event 
// You must wait for this event to fire before adding something to the map or modifying it in anyway 
map.one(GoogleMapsEvent.MAP_READY).then(
    () => { 
    console.log('Map is ready!'); 
    // Now you can add elements to the map like the marker 
    } 
); 

// create LatLng object 
let ionic: LatLng = new LatLng(43.0741904,-89.3809802); 

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

// move the map's camera to position 
map.moveCamera(position); 

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

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

내 HTML 코드

<ion-content>  
     <div #map id="map" style="height:100%;"></div> 
</ion-content> 

내 질문 :

어떻게 위의 코드 내 current location를 가리 키도록!

내가 3 이온에 새로운 오전 나를 도와주세요, 그냥 구글에

위치에 현재 사용자를 가리 키도록 싶어!

Answer 1

마커를 추가하려면지도 객체에 마커를 추가해야합니다 (& lng 및 제목). 살펴보기 :

map.addMarker(new MarkerOptions().position(new LatLng(22.7253, 75.8655)).title("Title")); 

해피 코딩 !!

Answer 2

준비가 완료되면 마커 을 추가하는 것과 같이지도를 변경해야합니다.. 마커 설정 코드를 map.one(GoogleMapsEvent.MAP_READY)으로 이동하십시오.

let ionic: LatLng = new LatLng(43.0741904,-89.3809802); 

// create CameraPosition 
let position: any = { 
    target: ionic, 
    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: MarkerOptions = { 
     position: ionic, 
     title: 'Ionic' 
    }; 

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

Answer 3

첫째 있는지 당신의 API 키가 유효하고이 점을 추가 매니페스트`` 는 그 다음 onMapReady (GoogleMap으로지도) 방법 내부 (참) map.setMyLocationEnabled을 추가 사용합니다. 이

@Override

public void onMapReady(GoogleMap gMap) { 
    mGoogleMap = gMap; 
    mGoogleMap.setMyLocationEnabled(true); 
    buildGoogleApiClient(); 
    mGoogleApiClient.connect(); 

} 

Answer 4

처럼이 시도하고 수업 후 생성자 전에 변수 map:GoogleMap;을 선언합니다. 따라서지도를 렌더링하지 않고지도를 재사용 할 수 있습니다. 모든 단일로드 페이지로 인해 Google지도 API 할당량이 증가하고 있습니다.

나의 제안 : 공급자에 넣어로드 맵

this.map.one(GoogleMapsEvent.MAP_READY).then(()=>{ 
 
     console.log("Map ready"); 
 
     this.map.setMyLocationEnabled(true); 
 
     this.map.getMyLocation({enableHighAccuracy:true}).then(pos=>{ 
 
     this.map.setCameraTarget(pos.latLng); 
 
     this.map.animateCamera({ 
 
      target:pos.latLng 
 
     }); 
 

 
     this.map.addMarker({ 
 
      title: 'You', 
 
      icon: 'pin' 
 
      animation: 'DROP', 
 
      position: pos.latLng 
 
     }).then((marker)=>{ 
 
      this.userMarker = marker; 
 
      marker.setPosition(pos.latLng); 
 

 
      }); 
 
     }); 
 
     });