在vue中使用高德地图（异步引入方式）

问题来源

项目需要是使用到地图，并不是所有页面都用到，所以采用异步加载当时引入地图

开始

在vue项目目录下创建plugins文件夹，并在里面创建amap.js 文件

/* * 异步创建script标签 */ export default function MapLoader (key) { return new Promise((resolve, reject) => { if (window.AMap) { resolve(window.AMap) } else { var script = document.createElement('script') script.type = 'text/javascript' script.async = true script.src = 'http://webapi.amap.com/maps?v=1.3&callback=initAMap&key=' + key script.onerror = reject document.head.appendChild(script) } window.initAMap = () => { resolve(window.AMap) } }) }

– 使用

<template> <div class="test"> <div id="container" style="height:300px;width:300px;"></div> </div> </template> <script> import MapLoader from '@/plugins/amap.js' export default { name: 'test', data () { return { map: null } }, mounted () { let that = this MapLoader().then(AMap => { console.log('地图加载成功') that.map = new AMap.Map("container", { resizeEnable: true }); }, e => { console.log('地图加载失败' ,e) }) } } </script>

– 结束 在项目的任何位置都可以这样使用地图了，还可以安全的使用地图提供的各种服务。