2017-11-08 9 views
-1

私は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 

は私のGoogleマップは、Androidデバイス上で

以下

enter image description here

が私のコードされてどのように見えるかです:

私はこれらの2つのパッケージがインストールされています

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をイオン性に新しいですと

はちょうど私がユーザーにGoogleで現在

場所を指すように望んでいた、私を助けてください!

答えて

0

マーカーを追加するには、マップオブジェクトにマーカー&とタイトルを追加する必要があります。 見てください:

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

ハッピーコーディング!

+0

このコードを追加するに 入れロードマップ?それはGoogleマップの現在の位置を与えるでしょう。 –

+0

私はまた、現在の場所へのポインタを取得したい。 –

+0

現在の位置については、地理位置から緯度および経度を取得し、それを上記のコードに設定する必要があります。上記の行を追加するために、コード内にマップオブジェクトを作成しました。 –

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

まず ` が続いonMapReady(Googleマップマップ)メソッド内でmap.setMyLocationEnabled(true)を追加使用`あなたのAPIキーが有効であることを確認し、マニフェストにこれを追加します。この

@Override

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

} 
+0

私はこれがネイティブのアンドロイドだと思いますか? OPはハイブリッドであるイオンをタグ付けしています... –

1

のようにこれを試してみて、クラスの後、コンストラクタの前に変数を宣言map:GoogleMap;。だから、レンダリングマップを使わずにマップを再利用することができます.1つのロードページごとに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); 
 

 
      }); 
 
     }); 
 
     });

+0

Reza、cordova-plugin-googlemaps(@ ionic-native/google-maps)は、JavaScript APIではなくネイティブのGoogle Maps APIを使用しています。 Googleは、ネイティブGoogle Maps APIのクォータを設定していません。 – wf9a5m75

+0

@ wf9a5m75うわー!グーグルマップの割り当てを使用して請求されていないことがわかっているときはうれしい – Reza

関連する問題