Ionic 3 谷歌地图集成

Question

Ionic 3 谷歌地图集成

javascriptangularjscordovagoogle-mapsionic-framework

3

我正在准确地按照这个教程进行操作：https://www.djamware.com/post/58f4da2080aca7414e78a638/step-by-step-tutorial-of-ionic-3-angular-4-and-google-maps-directions-service，但我无法使其正常工作。我的API密钥设置没有问题，但出现了错误：

Error: Uncaught (in promise): ReferenceError: google is not defined
ReferenceError: google is not defined

。我正在使用ionic lab来运行应用程序，但不知何故它不能正常工作。有谁能帮助我找到问题所在吗？我尝试添加cordova白名单插件，将API密钥部分中的https更改为http，但它仍然无法正常工作。

- Evan Bloemer

2个回答

1

Ionic 3 谷歌地图 点击文档链接

1.安装此软件包

$ ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps --variable API_KEY_FOR_ANDROID="YOUR_ANDROID_API_KEY_IS_HERE" --variable API_KEY_FOR_IOS="YOUR_IOS_API_KEY_IS_HERE"
$ npm install --save @ionic-native/google-maps

2. 创建 Android 和 iOS Api 前往此网站 - Google Cloud 平台

3. 获取 Api 后安装包

4.import app.module.ts

import { GoogleMaps } from '@ionic-native/google-maps';
......
provider:[
 GoogleMaps
];

5.home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div id="map"></div>
</ion-content>

6.home.ts

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  LatLng,
  CameraPosition,
  MarkerOptions,
  Marker
 } from '@ionic-native/google-maps';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController,
    private googleMaps: GoogleMaps,
    public platform: Platform) {
      platform.ready().then(()=>{
        this.loadMap();
      })

  }

   loadMap() {

    // create a new map by passing HTMLElement
    let element: HTMLElement = document.getElementById('map');

    let map: GoogleMap = this.googleMaps.create(element);

    // listen to MAP_READY event
    // You must wait for this event to fire before adding something to the map or modifying it in anyway
    map.one(GoogleMapsEvent.MAP_READY).then(
      () => {
        console.log('Map is ready!');
        // Now you can add elements to the map like the marker
      }
    );

    // create CameraPosition
    let position: CameraPosition = {
      target: {
        lat: 43.0741904,
        lng: -89.3809802
      },
      zoom: 18,
      tilt: 30
    };

    // move the map's camera to position
    map.moveCamera(position);

    // create new marker
    let markerOptions: MarkerOptions = {
      //position: ionic,
      title: 'Ionic'
    };

    map.addMarker(markerOptions)
      .then((marker: Marker) => {
         marker.showInfoWindow();
       });
    }
}

- EDISON J

这个视频会为你提供更多的帮助。 - EDISON J

我尝试了上述方法，但是出现了错误：“泛型类型'CameraPosition<T>'需要1个类型参数”。 - Kapil Soni

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Yewness · Accepted Answer

你在 home.ts 中声明了变量吗？

import { Component, ViewChild, ElementRef } from '@angular/core';
import { IonicPage } from 'ionic-angular';
import { NavController } from 'ionic-angular';

declare var google;

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
...