LocationService ionic google-maps 对象在 ios 中失败，但在 android 中有效答案

【问题标题】：LocationService ionic google-maps object failing for ios, but works in androidLocationService ionic google-maps 对象在 ios 中失败，但在 android 中有效
【发布时间】：2018-07-13 19:04:56
【问题描述】：

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

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

【问题讨论】：

标签： android ios cordova ionic-framework geolocation

【解决方案1】：

该错误似乎只在 Web 浏览器中提供应用程序时显示，Xcode 只需要清理和重建，因此地图现在显示并可以工作。我不相信在运行命令“ionic serve”时它会在浏览器上运行，因为 LocationService 是一个离子原生模块，除非应用安装在 Android 或 iOS 上，否则无法使用。

【讨论】：