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


      }

以上代码适用于Android

当我尝试获取用户的当前位置并将lat，lang传递给另一个

时

功能然后我将无法工作

下面是我的代码无效

代码无法在Android上运行：请求权限但不起作用

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

    }

提前致谢!!!

Answer 1

如果您使用的是GoogleMaps插件，我建议您使用内置功能：

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

你没事。

更新：

    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和@ionic-native/google-maps@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

然后替换你的代码：

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

为什么离子3谷歌地图与拉郎不在Android上加载

2 个答案: