vue项目插入腾讯地图

vue项目插入腾讯地图

1、效果

2、template增加

<div id="map" style="width: 100%; height: 100%;z-index: 1;"></div>

3、script增加

onMounted(() => {loadMap();
})async function loadMap() {await loadScript('https://map.qq.com/api/gljs?v=2.exp&key=FW4BZ-******');const center = new TMap.LatLng(36.87184493866717, 104.81227397918703);new TMap.Map(document.getElementById('map'), {center: center,zoom: 13});
}
function loadScript(url) {return new Promise((resolve) => {const script = document.createElement('script');script.src = url;script.onload = resolve;document.head.appendChild(script);});
}