vuejs 어플리케이션 내에서 외부 cdn에서 로드된 bing 맵을 사용하려면 어떻게 해야 합니까?
vue js 어플리케이션 내에서 bing maps api를 사용하여 맵을 표시하는 방법
주의: Bing 맵 V8 및 vuejs 2.5.17을 사용합니다.
이것은 나의 템플릿이다.
<template>
<div id="map"></div>
</template>
이게 내 스타일이야
<style lang="scss" scoped>
#map {
height: 300px;
width: 500px;
}
</style>
이것은 내 스크립트 파트입니다(클래스 기반 객체 컴포넌트를 사용합니다).
mounted() {
let mapElement: HTMLElement = <HTMLElement>document.getElementById("map")
var map = new Microsoft.Maps.Map(mapElement, {
credentials: [API_KEY]
});
}
이렇게 해서 cdn의 외부 스크립트를 앱에 넣습니다.몇 가지 조사를 한 후, 아래의 두 가지 옵션을 찾아 시도했습니다.
옵션 1: 스크립트를 index.html 파일에 직접 포함시켰습니다.
<!-- index.html -->
...
<head>
...
<script src="https://www.bing.com/api/maps/mapcontrol?key=[API_KEY]" async defer></script>
</head>
옵션 2: 다음과 같이 마운트된 방법으로 내 컴포넌트에서 문서에 있는 스크립트를 프로그램 방식으로 삽입합니다.
mounted() {
// Add programmaticaly the external Bing maps api script
var scriptTag = document.createElement("script");
scriptTag.src = "https://www.bing.com/api/maps/mapcontrol";
scriptTag.id = "bingApiMaps";
// Inject the dynamic script in the DOM
document.head.appendChild(scriptTag);
...
}
둘 다 다음과 같은 오류가 발생하며 그 이유를 알 수 없습니다.
[Vue warn]: Error in mounted hook: "ReferenceError: Microsoft is not defined"
JavaScript에 대한 rdhainaut의 답변을 받아 적었습니다.
mounted: function() {
if (document.getElementById("scriptBingMaps")) {
return; // already loaded
}
// Add a global function for the callback from Bing Maps api
window.OnLoadBingMapsApi = () => this.InitMap();
// Add programmaticaly the external Bing maps api script
var scriptTag = document.createElement("script");
scriptTag.src = "https://www.bing.com/api/maps/mapcontrol?callback=OnLoadBingMapsApi&key=[BING_API_KEY]";
scriptTag.id = "scriptBingMaps";
// Inject the dynamic script in the DOM
document.head.appendChild(scriptTag);
},
methods: {
InitMap: function() {
var mapElement = this.$refs.myMap;
this.map = new Microsoft.Maps.Map(mapElement, {
mapTypeId: Microsoft.Maps.MapTypeId.aerial,
zoom: 15,
maxZoom: 21,
//minZoom: 15,
center: new Microsoft.Maps.Location(52.7759872, -1.5119702),
maxNetworkLinkDepth: 3
});
}
}
여러 가지로 고생한 끝에 나는 이해했다.Bing 맵 API는 비동기 방식으로 로드됩니다.Microsoft/Microsoft.맵 개체를 직접 사용할 수 없습니다.
솔루션 2를 사용하여 스크립트를 로드하기로 결정했습니다(이렇게 하면 스크립트는 글로벌하게 로드되지 않습니다).주입된 스크립트에서 onload 방식을 사용하려고 했지만 성공하지 못했습니다.Bing Maps API에는 콜백 함수를 호출하는 옵션이 있지만 함수는 글로벌해야 합니다.이것이 나의 마지막 실전 솔루션이다.
<template>
<div id="map" ref="map"></div>
</template>
<script lang="ts">
// Vue
import { Vue, Component } from "vue-property-decorator";
@Component
export default class AppMap extends Vue {
mounted() {
if (document.getElementById("scriptBingMaps")) {
return; // already loaded
}
// Add a global function for the callback from Bing Maps api
(<any>window).OnLoadBingMapsApi = () => this.InitMap();
// Add programmaticaly the external Bing maps api script
var scriptTag = document.createElement("script");
scriptTag.src = "https://www.bing.com/api/maps/mapcontrol?callback=OnLoadBingMapsApi";
scriptTag.id = "scriptBingMaps";
// Inject the dynamic script in the DOM
document.head.appendChild(scriptTag);
}
private InitMap(): void {
let mapElement: HTMLElement = <HTMLElement>this.$refs.map;
var map = new Microsoft.Maps.Map(mapElement, {
credentials: [API_KEY]
});
}
}
</script>
<style lang="scss" scoped>
/* ==========================================================================
Map
========================================================================== */
#map {
height: 300px;
width: 500px;
}
</style>
Et voila! :)
언급URL : https://stackoverflow.com/questions/53153725/how-can-i-use-bing-maps-loaded-from-external-cdn-inside-my-vuejs-application
'source' 카테고리의 다른 글
| 어떤 경우에 JPA @JoinTable 주석을 사용합니까? (0) | 2022.08.21 |
|---|---|
| Vuex v-model을 개체 상태 필드로 (0) | 2022.08.21 |
| VueJS 구성 요소에서 getElementById를 사용하는 모듈을 가져오는 중 (0) | 2022.08.20 |
| Linux에서 GDB를 시작할 때 명령줄 인수를 전달하려면 어떻게 해야 합니까? (0) | 2022.08.20 |
| 사람들이 C 포인터에 대해 어려워하는 점은 무엇인가? (0) | 2022.08.20 |