Vue中引入高德地图cdn链接方式汇总（可按需加载）
随着时间流逝，人的初心是否会改变呢？今日博客分享vue引入高德地图几种方式~
1、方式一，引用封装好的vue-amap组件，具体操作见官方文档
官网链接：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install
npm install vue-amap --save由于vue-amap封装的功能有限，因此不可避免的需要引入高德地图的cdn链接
2、网上已经普遍有一种引入方式，具体如下
（1）进入当前vue目录下的index.html直接引入cdn链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>test</title>
<!--高德地图js-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值&callback=onLoad"></script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>（2）配置build/webpack.base.conf.js,在module.export中加入externals配置项，当做外部资源引入，据说有如下注释的功能，但是在开发环境貌似感觉没啥区别。。。
externals:{
"AMap":'AMap'
//key是项目内使用组件的名称，value是高德对外暴露的名称（这样配置的话webpack在dev run dev或者run build的时候就不会去本地组件包查找该资源，而是直接去windown域下载）
},3、上面的方式网页一进入index.html文件，高德地图资源便会进行加载，那么问题来了，当我页面只有一个组件需要用到高德地图，想实现只有进入到某个特定组件时，才请求高德地图cdn链接，如何做到按需加载呢?经过尝试有以下两种方法
方法一：通过引入webpack-require-http插件配合require引入，注意2.1版本require(['']，function(){})是异步加载，之前 require('') 同步加载，同步加载一直加载报错，最终实现如下
（1）引入webpack-require-http插件，还是当做外部资源引入这个插件，配置build/webpack.base.conf.js,在module.export中加入externals配置项
externals:[
//注意这里是[]
require('webpack-require-http')
]（2）vue文件中引入
<template>
<div>
<button @click="getMap">获取map对象</button>
<div id="map" style="width:100%;height:800px"></div>
</div>
</template>
<script>
// import AMap from 'AMap'
export default {
data() {
return {
mapObj: null
}
},
methods: {
getMap() {
console.log("this map obj", this.mapObj);
}
},
beforeMount() {
require(["https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"],()=>{
setTimeout(()=>{
var map = new AMap.Map('map', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11, //初始化地图层级
center: [116.397428, 39.90923] //初始化地图中心点
});
},1500);
})
},
destroyed(){
console.log("destroyed");
}
}
</script>方法二：动态的给index.html头部加入高德地图资源
（1）直接在组件内部引入即可，一步操作即可实现
<template>
<div>
<button @click="getMap">获取map对象</button>
<div id="map" style="width:100%;height:800px"></div>
</div>
</template>
<script>
// import AMap from 'AMap'
export default {
data() {
return {
mapObj: null
}
},
methods: {
getMap() {
console.log("this map obj", this.mapObj);
}
},
mounted() {
},
beforeMount() {
let $self = this;
window.onLoad = function () {
var map = new AMap.Map('map', {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 11, //初始化地图层级
center: [116.397428, 39.90923] //初始化地图中心点
});
AMap.plugin('AMap.ToolBar', function () {//异步加载插件
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
});
$self.mapObj = map;
}
var url = 'https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值&callback=onLoad';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
jsapi.id = "amapjs";
document.head.appendChild(jsapi);
},
destroyed() {
document.getElementsByTagName("head")[0].removeChild(
document.getElementById("amapjs"));
console.log("destroyed");
}
}以上方法在进入引用的组件时候才会加载出高德地图，在vue上面引入插件，建议通过异步加载插件引入，由于是操作到了index.html高德地图已经出现就会保留，只有页面刷新时候index.html头部资源才会消失，因此若是想实现跳出组件地图实时删除请在vue声明周期destroy中进一步操作。
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)