LocationService 离子 google-maps 对象在 ios 中失败，但在 android 中有效

Question

我在 android 上发现使用来自 Google 地图 JavaScript API 和 Ionic Framework 的地理定位导致速度非常慢或无法工作的问题全部。然后，我从该文档中找到了 Ionic 的第二个地理定位模块，称为 LocationService：https://github.com/ionic-team/ionic-native-google-maps/blob/master/documents/locationservice/README.md。我遇到的问题是，虽然此 Location 模块适用于 Android，但它不适用于 ios 或通过在本地主机上提供应用程序。以下是我收到的错误以及设置地图中心的代码。我正在编辑这个。

map.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Map
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div id='map'></div>
</ion-content>

map.ts:

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Platform, Navbar } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import {
  LocationService,
  GoogleMap,
  GoogleMapOptions,
  MyLocation,
  GoogleMaps
} from '@ionic-native/google-maps';

declare var google: any;
@Component({
  selector: 'page-map',
  templateUrl: 'map.html',
})
export class OfficeLocatorPage {
  @ViewChild(Navbar) navBar: Navbar;
  map: any;
  mapOptions:any;
  trafficEnabled = false;
  transitEnabled = false;
  bicycleEnabled = false;
  markers = [];
  places = [];
  trafficLayer = new google.maps.TrafficLayer();
  transitLayer = new google.maps.TransitLayer();
  bicycleLayer = new google.maps.BicyclingLayer();
  myLocation: any;
  infoWindow: any;
  isInfoWindowShown: boolean = false;

  constructor(private navCtrl: NavController, private platform: Platform, private geolocation: Geolocation) {
  }

  ionViewDidLoad() {
    this.navBar.backButtonClick = (e:UIEvent)=>{
      this.navCtrl.pop({animate: true, animation: "transition", direction: "left", duration: 300});
    };
 }
  ionViewDidEnter() {
      this.platform.ready().then(() => {
        this.places = [];
        this.initMap(this);
    });
  }
  initMap(scopeObj) {
    LocationService.getMyLocation({enableHighAccuracy: true}).then((location: MyLocation) => {
      this.setLocation(location.latLng);
    }).catch((error: any) => {
      // Can not get location, permission refused, and so on...
      console.log(error);
    });
  }

  setLocation(location) {
      this.map = new google.maps.Map(document.getElementById('map'), {
          center: location,
          zoom: 10,
          disableDefaultUI: true
      });
      let image = {
        url: "assets/icon/blue_dot.png", // url
        scaledSize: new google.maps.Size(25, 33), // scaled size
        origin: new google.maps.Point(0,0), // origin
        anchor: new google.maps.Point(0, 0) // ancho
      };
      let marker = new google.maps.Marker({
        position: location,
        map: this.map,
        icon: image
      });
      this.myLocation = new google.maps.LatLng(location.lat, location.lng);
    }

错误日志：

Error: Uncaught (in promise): TypeError: Cannot read property 'LocationService' of null
TypeError: Cannot read property 'LocationService' of null
    at http://localhost:8100/build/vendor.js:78338:35
    at new t (http://localhost:8100/build/polyfills.js:3:21506)
    at Function.LocationService.getMyLocation

Answer 1

错误似乎只在网络浏览器中提供应用程序时显示，Xcode 只需要清理和重建，所以地图现在显示并可以使用。我不相信它会在运行命令 "ionic serve" 时在浏览器上运行，因为 LocationService 是一个离子原生模块，除非应用程序安装在 Android 上才能使用或 iOS.

LocationService 离子 google-maps 对象在 ios 中失败，但在 android 中有效

LocationService ionic google-maps object failing for ios, but works in android

android

geolocation

ios

cordova

ionic-framework