离子2谷歌地图不在Android设备上工作,但适用于浏览器

时间:2017-01-24 21:06:58

标签: cordova ionic-framework ionic2

首先,我检查了所有现有的答案,但没有人工作,这就是我再次提出这个问题的原因。

import {
  CameraPosition,
  Geolocation,
  GoogleMap,
  GoogleMapsEvent,
  GoogleMapsLatLng,
  GoogleMapsMarker,
  GoogleMapsMarkerOptions,
} from 'ionic-native';
import { Component, ElementRef, ViewChild } from '@angular/core';

import { NavController } from 'ionic-angular';
import { Platform } from 'ionic-angular';

declare var google;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('map') mapElement: ElementRef;
  map: any;
  public lat: any;
  public long: any;

  constructor(public navCtrl: NavController,
    public Geolocation: Geolocation,
    public platform: Platform
  ) {
    this.platform.ready().then((ready) => {
      console.log("ready");
      this.loadMap();
      //get user location

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

  loadMap() {
    let im: any = '../../assets/icon/pointer18.png';
    let latLng: any;
    Geolocation.getCurrentPosition().then((position) => {

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

      let mapOptions = {
        center: latLng,
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,

      }

      this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
      var userMarker = new google.maps.Marker({
        position: latLng,
        map: this.map,
        animation: google.maps.Animation.DROP,
        icon: im
      });

      var x = document.querySelector('#map');

    }, (err) => {
      var x = document.querySelector('#map');
      x.innerHTML = err;
      console.log(err);
    });
  }
}

config.xml

    <access origin="*"/>


    <allow-navigation href="http://ionic.local/*"/>


    <allow-navigation href="https://maps.googleapis.com/*"/>
    <allow-intent href="http://*/*"/>
    <allow-intent href="https://*/*"/>
    <allow-intent href="tel:*"/>
    <allow-intent href="sms:*"/>
    <allow-intent href="mailto:*"/>
    <allow-intent href="geo:*"/>
    <access origin="*" />
    <allow-intent href="*" />
    <allow-navigation href="*" />
    <!-- Allow images, xhrs, etc. to google.com -->
    <access origin="http://google.com" />
    <access origin="https://google.com" />

    <!-- Access to the subdomain maps.google.com -->
    <access origin="http://maps.google.com" />

    <!-- Access to all the subdomains on google.com -->
    <access origin="http://*.google.com" />

    <!-- Enable requests to content: URLs -->
    <access origin="content:///*" />

androidmanifest.xml
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />


    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />


    <uses-feature android:name="android.hardware.location.gps" />


    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

安装了cordova白名单地理位置和谷歌地图插件。 它在桌面浏览器中运行良好但在Android设备中没有,当我尝试离子运行android - 设备应用程序打开时,它要求允许地理定位并显示空白屏幕。还为map api生成了google密钥,并在andorid的script标签中提供了该密钥。 我很了解离子的任何帮助。

0 个答案:

没有答案