是否可以从 JS 函数调用 Google Maps Javascript API 并将其显示在 ion-content 上？
Posted
技术标签:
【中文标题】是否可以从 JS 函数调用 Google Maps Javascript API 并将其显示在 ion-content 上？【英文标题】：Is it possible to call Google Maps Javascript API from JS function and display it on ion-content? 【发布时间】：2020-06-15 14:00:16 【问题描述】：我创建了我的 Google Maps API sn-p 代码，它在框中显示地图：
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 sn-p 示例中实现它）？
【问题讨论】：
您能否检查 initMap() 在您的全局范围内是否直接可用。谷歌地图在 dom 中加载后调用回调。我也会检查谷歌服务是否加载 @Rohit.007 为了测试我的 JS 函数可以改变离子上下文，我创建了另一个函数（在 initMap() 旁边），它能够在按下时用文本替换照片一个按钮。 你能通过 stackbliz 分享你的代码吗？ 【参考方案1】：我已经这样做了，尝试在你的代码中复制它，最后你需要调用 createMap()。
这是一个可用的应用程序，您可以从中获取参考，但它适用于 Bing
https://github.com/microsoft/Bing-Maps-Fleet-Tracker/tree/master/MobileClient
private loadPromise: Promise<void>;
private load(): Promise < void >
if (this.loadPromise)
return this.loadPromise;
const script = document.createElement('script');
script.type = 'text/javascript';
script.async = true;
script.defer = true;
const mapsCallback = 'initMap';
script.src = `https://maps.googleapis.com/maps/api/js?key=<GOOGLE-MAP-KEY>&callback=initMap`;
this.loadPromise = new Promise <
void >
((resolve: Function, reject: Function) =>
window[mapsCallback] = () =>
this.loadLableMarker().then(() =>
resolve();
);
;
script.onerror = (error: Event) =>
console.error('maps script error' + error);
reject(error);
;
);
document.body.appendChild(script);
return this.loadPromise;
createMap(element: HTMLElement, options): Promise
return this.load().then(() =>
return new google.maps.Map(document.getElementById('map'),
zoom: 15,
center: mapCenter,
disableDefaultUI: true
);
);
【讨论】：
这是使用 TypeScripts for Ionic cordova 的 JS 代码以上是关于是否可以从 JS 函数调用 Google Maps Javascript API 并将其显示在 ion-content 上？的主要内容，如果未能解决你的问题，请参考以下文章
是否可以使用 Google Maps API 获取当前交通时间以获取精确路线？
从邮政编码获取 LatLng - Google Maps API
google maps js v3 api教程 -- 在地图上添加标记
Unversioned Javascript Google Maps API参考拉（破）实验版