本文只是为了校验 用最简单直接的方式(不额外修改别的文件、不引入额外插件),去实现高德组件的展示,能成功展示就成功了一半!!至于后续业务方面有别的需求,那就去查文档!!
原文出处:>文章链接<
// index.html 引入高德地图js和ui
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=申请的key值"></script>
<script src="//webapi.amap.com/ui/1.0/main.js"></script>
// vue文件
<template>
<div>
<div>地图</div>
<div id="container" style="width:95vw; height:300px"></div>
</div>
</template>
<script>
var AMap, map
export default {
data () {
return {
}
},
mounted: function () {
AMap = window.AMap;
// AMapUI = window.AMapUI;
this.init()
},
methods: {
init: function () {
map = new AMap.Map('container', {
center: [116.397428, 39.90923],
resizeEnable: true,
zoom: 10
})
AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
map.addControl(new AMap.ToolBar())
map.addControl(new AMap.Scale())
})
}
}
}
</script>
最后效果:
===============================================
vue-cli关闭eslint no-unused-var错误
// package.json ====== eslintConfig
"rules": {
"no-": "off",
"no-debugger":"off",
"no-console": "off",
"no-empty":"off",
"no-unused-vars":"off"
}