ionic3 - Ionic 3.20 和 googlemaps 插件
问题描述
(对不起我的英语不好)我有一个应用程序@ ionic / cli-utils:1.19.2,离子(Ionic CLI):3.20.0,我尝试通过相应的插件使用GoogleMaps native。我做不到,总是得到同样的错误。如果你能帮助我,谢谢。我即将离开 Ionic 使用它的地图插件。非常感谢!
错误类型错误:无法读取未定义的属性“构造函数”。
我安装了插件(安装了 2.6.2 版):
离子cordova插件添加cordova-plugin-googlemaps
npm install --save @ionic-native/google-maps
从 2.6.0 开始。密钥在 config.xml 中,而不是在 add 插件中。这是正确的 ?
在 config.xml 中:
<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="xxx" />
<preference name="GOOGLE_MAPS_IOS_API_KEY" value="yyy" />
and...
<plugin name="cordova-plugin-googlemaps" spec="^2.6.2">
<variable name="PLAY_SERVICES_VERSION" value="15.0.1" />
<variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" />
</plugin>
我发送代码和离子信息:
地图.html:
<ion-content>
<div id="map_canvas"></div>
</ion-content>
地图.ts:
import { Component } from '@angular/core';
import { IonicPage, NavController, Platform, NavParams } from 'ionic-angular';
import { Geolocation } from '@ionic-native/geolocation';
import { GoogleMaps, GoogleMap, GoogleMapsEvent, LatLng } from '@ionic-native/google-maps';
@IonicPage()
@Component({
selector: 'page-map',
templateUrl: 'map.html'
})
export class MapPage {
map: GoogleMap;
public lat_mapa;
public lng_mapa;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
public geolocation: Geolocation,
public googleMaps: GoogleMaps,
private platform: Platform
) { }
ionViewDidLoad() {
this.platform.ready().then(() => {
// 2 DIFFERENT CREATE MODELS, WHICH I FOUND ON THE INTERNET (use one or the other)
this.map = GoogleMaps.create('map_canvas'); ON THIS LINE MAKES THE ERROR
this.map = this.googleMaps.create('map_canvas'); ON THIS LINE IT ALSO MAKES THE SAME ERROR
this.map.one(GoogleMapsEvent.MAP_READY).then((data: any) => {
let myPosition: LatLng = new LatLng(41.390295, 2.154007);
this.map.animateCamera({ target: myPosition, zoom: 10 });
})
})
this.loadMap();
}
loadMap() {
// Wait the MAP_READY before using any methods.
this.map.one(GoogleMapsEvent.MAP_READY)
.then(() => {
// Now you can use all methods safely.
this.getPosition(); // not included because it is not necessary
})
.catch(error => {
console.log(error);
});
}
Ionic info:
@ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : 8.0.0
local packages:
@ionic/app-scripts : 3.2.3
Cordova Platforms : android 7.0.0
Ionic Framework : ionic-angular 3.9.2
System:
Android SDK Tools : 26.1.1
Node : v8.11.3
npm : 5.6.0
OS : Windows 8.1
解决方案
这通常是插件版本不匹配的问题,这就是出现该错误的原因:你可以试试这个版本,因为这个版本仍然支持 ionic 3
npm install @ionic-native/google-maps@4.21.0
希望它能解决问题
推荐阅读
- visual-studio-2019 - Visual Studio 2019 - 介入
- asp-classic - 超时互联网连接检查
- javascript - React/Node - 我如何找到“警告:该功能仅在客户端,在服务器端不起作用”的位置?
- elasticsearch - 如何为 ElasticSearch(常规或 OpenDistro)配置 LDAP?
- r - 在闪亮的应用程序中取消选择列或编辑数据表时,下载按钮消失
- ios - 在消耗品的应用购买服务器通知中,有办法吗?
- sql - 如何将非标准字符串格式化为日期格式
- mysql - UPDATE JOIN 表,数学运算仅发生在单个(最后?)行上
- jquery - 使用单个 Jquery UI 滑块控制多个图表
- scala - 值查找解析到 sbt 插件中的错误范围