https://lbs.amap.com 进去后按照提示注册登陆
1.点击左侧应用管理-我的应用
2. 点击右上角创建新应用 给新创建的应用添加key 提交后就有key和密钥两个重要的东西(项目需要)
3.在项目的根目录里cmd npm方式输入命令行:
npm i @amap/amap-jsapi-loader --save
4.在main.js 全局引入
import AMapLoader from "@amap/amap-jsapi-loader";
Vue.config.productionTip = false;
// 初始化vue-amap
AMapLoader.load({
'key': '自己申请的key',
'version': '2.0',
'plugins': ['AMap.Scale', 'AMap.GeoJSON']
}).then((AMap) => {
// Vue.use(AMap)
Vue.prototype.$AMap = AMap
})
5.创建页面
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
export default {
data() {
return {
map: null,
};
},
created() {},
mounted() {
setTimeout(() => {
this.createMap();
}, 1000);
},
methods: {
createMap() {
const that = this;
const map = new that.$AMap.Map("container", {
zoom: 13,
zooms: [8, 20],
viewMode: "2D",
center: [113.22, 22.93],
mapStyle: "amap://styles/darkblue",
features: ["road", "point"],
});
this.map = map;
},
},
computed: {},
components: {},
};
</script>
<style lang = "less" scoped>
#container {
width: 1000px;
height: 800px;
}
</style>
6.在.eslintrc.js中设置
module.exports = {
globals:{
AMap:true
}
}
这样就可以显示地图 。
如果显示空白背景 ,并且没有报错 ,检查是否使用了mock.js (可能会导致冲突),去除mockjs相关依赖即可。