我创建了一个Google Maps API代码段，用于在框中显示地图：
var map;
function initMap() {
var mapCenter = {
lat: 50,
lng: 50
};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: mapCenter,
disableDefaultUI: true
});
map.setOptions({
minZoom: 5,
maxZoom: 20
});
};<!DOCTYPE html>
<html>
<style>
.box {
width: 300px;
height: 300px;
border: 5px solid;
margin: auto;
}
}
</style>
<head>
</head>
<body>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=API-KEY&callback=initMap">
</script>
<div class="box" id="map">
</div>
</body>
</html>现在，我想将此地图添加到以下内容中包含的ion-content中：
LoginModal = __decorate([
Object(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Component"])({
selector: 'page-login-modal',template:
'<ion-header class="{{customClasses}}">
<ion-toolbar>
<ion-title>{{ title | translate }}
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="{{customClasses}}">
<div class="box" id="map">
</div>
</ion-content>'
}),], LoginModal);
return LoginModal;
}());
因此，我创建了一个JS函数（与ion-content放在同一文件中，以便进行Google Maps API调用并传递我的参数：
var map;
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap";
LoginModal.prototype.initMap = function () {
var mapCenter = {
lat: 50,
lng: 50
};
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: mapCenter,
disableDefaultUI: true
});
map.setOptions({
minZoom: 5,
maxZoom: 20
});
};
上面的代码不显示地图，而是仅显示框。我试图将“ src =” https：“行放置在index.html文件中（在正文和头部中），但是再次仅显示该框。
为了测试我的JS函数可以改变离子上下文，我创建了另一个函数（initMap（）旁边），该函数可以在按下按钮时将照片替换为文本。
为了使它显示地图，我应该做些什么改变（因为我可以在上面的JS代码段示例中使它发生）？
我创建了一个Google Maps API代码段，该代码段在框中显示了地图：var map;函数initMap（）{var mapCenter = {lat：50，lng：50}; map = new google.maps ....
我已经做到了，尝试将其复制到您的代码中，最后您需要调用createMap（）