2017-10-31 22 views
0

google mapionic 3私はプレーンjavascriptを使用していますので、私の携帯に表示されていないと思います。 how to get current postion name using google map apiイオンの現在の位置を取得できません3

私は同じ達成したい3

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


loadMap(){ 


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

     let latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 


    // don't know further steps 

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

    } 

質問をイオン性に変換しようとした:ここ

は私のコードはここに

 geocodeLatLng(lat, lng) { 
     var geocoder = new google.maps.Geocoder; 


     var latlng = { 
      lat: lat, 
      lng: lng 
      }; 


     geocoder.geocode({ 
     'location': latlng 
     }, (results, status) => { 
     if (status === 'OK') { 
      if (results[0]) { 

      console.log(results[0].formatted_address); 

      } else { 
      window.alert('No results found'); 
      } 
     } else { 
      window.alert('Geocoder failed due to: ' + status); 
     } 
     }); 

    } 

デモオンラインですこの結果はイオン性である3:how to get current postion name using google map api

+0

あなたが が含まれていたん '' <スクリプトは、非同期= "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" SRCを延期>? –

+0

はい私はこれを 'index.html' – EaB

+0

に含めました。あなたはapp.module.tsファイルにジオロケーションモジュールをインポートしましたか? –

答えて

1

まず、これを使用して、Googleマップのライブラリをインストール

npm install @types/googlemaps --save-dev 

今すぐnode_modulesに移動して@typesとそのGoogleマップのフォルダ内と線の下に追加し、

declare module 'googlemaps'; 

次にインポートグーグル・マップ・モジュールコンポーネントファイルに

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

    export class HomePage { 

     @ViewChild('map') mapElement: ElementRef; 

    map:any; 
    latLng:any; 
    mapOptions:any; 

    constructor(private geolocation : Geolocation){ } 

    ionViewDidLoad(){ 
     this.loadMap(); 
    } 
     loadMap(){ 

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

      this.latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

      console.log('latLng',this.latLng); 

      this.mapOptions = { 
      center: this.latLng, 
      zoom: 14, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 

      this.map = new google.maps.Map(this.mapElement.nativeElement, this.mapOptions); 

     }, (err) => { 
      alert('err '+err); 
     }); 

     } 
    } 

このコードをHTMLファイル

に追加します
<div #map id="map"></div> 

おかげで、

+0

Oh ... Ionicを新しいバージョンに更新するとどうなりますか? 'node_modules'フォルダを削除する必要があります。これは毎回、手動で更新する必要があるのですか?ああ :( – Sampath

関連する問題