Question

我没有google map ionic 3使用普通javascript，所以我认为它没有显示在我的手机中。

这是我的代码

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

   }

这是在线演示：how to get current postion name using google map api

我试图将其转换为离子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);             
    });

  }

问题我想用离子3获得相同的结果：how to get current postion name using google map api

Answer 1

首先使用此

安装Google地图库

npm install @types/googlemaps --save-dev

现在转到node_modules然后转到@types并在googlemaps文件夹中添加以下行，

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>

谢谢，

我无法获得离子3中的当前位置

1 个答案: