一:最直接的方法就是在项目的public文件夹下的index.html中直接引入
二:创建你的地图组件引入即可
<template>
<div>
<div :id="mapId"></div>
</div>
</template>
<script>
export default {
name: 'Index',
data () {
return {
mapId: 'cesiumContainer',
map: null, // 地图实例
},
}
},
mounted () {
this.initGaoDeMap();
},
methods: {
// 初始化高德地图
initGaoDeMap () {
let _this = this;
_this.map = new AMap.Map('cesiumContainer', {
resizeEnable: true, //是否监控地图容器尺寸变化
skyColor: '#00162E', // 天空颜色
mapStyle: "amap://styles/dark",
rotateEnable:true,
pitchEnable:true,
zoom: 12,
rotation:-15,
pitch: 45, // 地图俯仰角度,有效范围 0 度- 83 度
viewMode:'3D',//开启3D视图,默认为关闭
buildingAnimation:true,//楼块出现是否带动画
expandZoomRange:true,
zooms:[3,20],
center:[79.074395,39.868951]
});
// 控件
_this.map.addControl(new AMap.ControlBar({
showZoomBar:false,
showControlButton:true,
position:{
right:'1200px',
top:'10px'
}
}));
},
},
}
</script>
作者原文地址:我的个人日志