npm下载依赖就不说了,直接附上代码:
<template>
<div class="all">
<div id="gao-de-map" class="container">
</div>
<div class="changeColoer">
<el-dropdown size="mini" trigger="click" >
<el-button class="btn1" >
切换图层<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native="colorChange('normal')">标准地图</el-dropdown-item>
<el-dropdown-item @click.native="colorChange('macaron')">马卡龙风格</el-dropdown-item>
<el-dropdown-item @click.native="colorChange('whitesmoke')">远山黛风格</el-dropdown-item>
<el-dropdown-item @click.native="colorChange('fresh')">草色青风格</el-dropdown-item>
<el-dropdown-item @click.native="colorChange('light')">月光银风格</el-dropdown-item>
<el-dropdown-item @click.native="colorChange('satellite')">卫星地图</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {
init
} from 'echarts';
window._AMapSecurityConfig = {
securityJsCode: '你的code'
}
export default {
name: "map",
data() {
return {
map: null, //初始化 map 对象,
AMap:null,
layer: '',
mapConfig: {
viewMode: "2D", //是否为3D地图模式
zoom: 13, //初始化地图级别
center: [116.397428, 39.90923], //初始化地图中心点位置(北京)
layers: [],
}
}
},
mounted() {
//DOM初始化完成进行地图初始化
this.initMap();
},
methods: {
colorChange(color) {
if (color === 'satellite') {
this.layer = new AMap.TileLayer.Satellite()
}else{
this.layer = new AMap.TileLayer()
}
this.mapConfig.layers.splice(0, 1, this.layer)
this.map.destroy()
this.map = new AMap.Map('gao-de-map', this.mapConfig)
if(color !== 'satellite'){
var styleName = "amap://styles/" + color;
this.map.setMapStyle(styleName);
}
},
initMap() {
AMapLoader.load({
key: "你的key", // 申请好的Web端开发者Key,首次调用 load 时必填
// version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [''], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
}).then((AMap) => {
this.map = new AMap.Map("gao-de-map", this.mapConfig)
})
.catch(e => {
})
}
}
}
</script>
<style>
.all{
height: 100%;
width: 100%;
position: relative;
.container {
width: 100%;
height: 100%;
}
.changeColoer {
position: absolute;
bottom: 30px;
left: 30px;
z-index: 9999;
.btn1 {
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
width: 90px;
height: 30px;
}
}
}
.amap-logo {
display: none !important;
}
.amap-copyright {
display: none !important;
}
</style>
记录一下,
另外有个要注意的是:按钮要和地图所用的容器平级,所以我用了一个最外面的div包裹住按钮所在的div和地图所在的div,否则切换卫星地图的时候按钮会消失。!!