google-maps - 谷歌地图错误 - ReferenceError:谷歌未在 ionic 3 应用程序中定义
问题描述
我正在将谷歌地图加载到我的 ionic 3 应用页面中。当我使用浏览器加载应用程序时,页面加载正常,但是当我制作应用程序 apk(使用)时,如果ReferenceError: google is not definedionic cordova build android --prod
则地图未加载并引发异常。我已经用谷歌搜索了几天,我已经应用了我得到的所有解决方案,但根本没有用。谁能帮我解决这个问题。
我的 map.ts 代码如下:
import {Component, ViewChild, ElementRef} from '@angular/core';
import {IonicPage, NavController, NavParams, PopoverController, LoadingController, MenuController} from 'ionic-angular';
import {Keyboard} from '@ionic-native/keyboard';
import {Geolocation, Geoposition} from '@ionic-native/geolocation';
import {NativeGeocoder, NativeGeocoderReverseResult} from '@ionic-native/native-geocoder';
import {LocationAccuracy} from '@ionic-native/location-accuracy';
declare var google: any;
@IonicPage()
@Component({
selector: 'page-map',
templateUrl: 'map.html',
})
export class Map {
latLng: any;
@ViewChild('map') mapElement: ElementRef;
map: any;
showFooter: boolean = true;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public popoverCtrl: PopoverController,
private geolocation: Geolocation,
public locac: LocationAccuracy,
public loadingCtrl: LoadingController,
public keyboard: Keyboard,
private menu: MenuController,
public geocoder: NativeGeocoder,) {
}
ionViewDidLoad() {
this.getLocation();
this.menu.swipeEnable(false);
}
getLocation() {
this.geolocation.getCurrentPosition().then((resp) => {
let map = new google.maps.Map(document.getElementById('map'));
var uluru = {lat: -25.363, lng: 131.044};
this.latLng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
let mapOptions = {
center: this.latLng,
zoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
enableHighAccuracy: true
};
this.map = new google.maps.Map(this.mapElement.nativeElement, mapOptions);
let marker = new google.maps.Marker({
map: this.map,
animation: google.maps.Animation.DROP,
position: this.latLng,
center: this.latLng,
icon: {
url: 'assets/img/pin.png',
size: new google.maps.Size(25, 48)
},
optimized: false,
});
// geocode reverse
var geocoder = geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(resp.coords.latitude, resp.coords.longitude);
geocoder.geocode({'latLng': latlng}, function (results, status) {
console.log(results);
alert('Status : ' + status);
this.currentLocation = this.value = "My value";
if (status == google.maps.GeocoderStatus.OK) {
if (results[1]) {
document.getElementById("currentlocation").setAttribute('value', results[1].formatted_address);
}
}
});
// geocode reverse end
// Route and direction
var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({'draggable': true});
// current location input
let currentlocationinput = document.getElementById('currentlocation');
let currentlocationsearchBox = new google.maps.places.SearchBox(currentlocationinput);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(currentlocationinput);
// destination location input
let destinationinput = document.getElementById('destination');
let destinationsearchBox = new google.maps.places.SearchBox(destinationinput);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(destinationinput);
// Direction
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer;
directionsDisplay.setMap(map);
// on drag and dragend header style change
this.map.addListener('dragstart', function (event) {
document.querySelector(".header")['style'].transform = 'translate3d(0px, -320px, 0px)';
document.querySelector(".scroll-content").classList.add("no_margin");
document.querySelector(".footer")['style'].transform = 'translate3d(0px, 320px, 0px)';
});
this.map.addListener('dragend', function (event) {
document.querySelector(".header")['style'].transform = 'translate3d(0px, 0px, 0px)';
document.querySelector(".scroll-content").classList.remove("no_margin");
document.querySelector(".footer")['style'].transform = 'translate3d(0px, 0px, 0px)';
});
// on drag and dragend header style change end
}).catch((error) => {
alert(error);
console.log('Error getting location', error);
})
}
}
我坚持了几天。如果有人可以解决,请帮助我。提前致谢。
解决方案
检查一下,
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
您可以将其添加到 index.js 或不
我认为当您访问它时未加载地图。
推荐阅读
- angular - 角度材质工具栏 - 材质行为
- python - 使用 "..." % (...) 类型的字符串时出现类型错误
- angular - 如何使用滚动事件从元素中添加和删除类 - Angular 7
- html - 在具有特定 id 和具有特定属性的 tr 的表中获取 td 中的文本
- mongodb - 在循环中使用 Meteor 方法调用进行批量更新和插入,从而提高 CPU 使用率
- javascript - AWS Lambda 中的 FTP - 下载文件的问题(异步/等待)
- python - 使用短语作为参数调用 Django 命令
- c++ - 可以在立即模式下为三角形调用 glNormal3f 吗?
- python-3.x - 嵌套列表的调和平均值包含一些负值
- asp.net - MVC 5 无法使用自定义 DateTime 注释正确验证模型的字段