Vue Cli引入高德地图
此文是加载高德地图1.4.15的方式，高德地图2.0已发布，性能大幅提升，请参见官网：https://lbs.amap.com/api/jsapi-v2/guide/abc/load
高德地图2.0文档：https://lbs.amap.com/api/jsapi-v2/guide/abc/prepare
高德地图2.0示例：https://lbs.amap.com/demo/jsapi-v2/example/event/map-loading-complete-event
1.0 在 public/index.html 文件中引入高德js，注：必须在 <body> 前引入
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
进行移动端开发时，请在head内添加viewport设置，以达到最佳的绘制性能；
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
2.0 配置 Webpack
在项目根目录新建配置文件 vue.config.js，填入内容：
module.exports = {
configureWebpack: {
externals: {
AMap: "window.AMap"
}
}
};
3.0 使用
<template>
<div>
<div style="width: 100vw;height: 100vh" id="container"></div>
</div>
</template>
<script>
import AMap from "AMap";
export default {
name: "Index",
data() {
return {};
},
mounted() {
new AMap.Map("container", {
resizeEnable: true,
zoom: 11
});
}
};
</script>
* 请务必结合官方文档一起引入，以避免忽略一些过时和未提及的细节
