前言
本文采用以下技术栈：
1.vue-cli3.x+less
2.高德官方文档
3.vant
地图初始化
首先我们采用script方式引入高德api。
<script src="https://webapi.amap.com/maps?v=1.3&key=高德key"></script>
其中高德key可以去高德官网申请，具体怎么申请就自己去问度娘了。
我们将使用AMap.Map类创建和展示地图对象：
data中的代码
data(){
return {
map:null
}
}
mounted中的代码
this.initMap()
methods方法中定义initMap
var that = this; //避免使用this时指向不明
that.map = new AMap.Map("map-container",{
resizeEnable:true,//是否监控地图容器尺寸变化，默认是false
zoom: 16,//初始化地图层级
center:[113.325,23.137],
lang:'zh_cn' //地图语言1.en,2.zh_en,3.zh_cn
})
效果如图：
自定义地图风格
在initMap方法中加入两行代码
that.map = new AMap.Map("map-container",{
resizeEnable:true,//是否监控地图容器尺寸变化，默认是false
zoom: 16,//初始化地图层级
center:[113.325,23.137],
lang:'zh_cn', //地图语言1.en,2.zh_en,3.zh_cn
mapStyle:'amap://styles/macaron', //地图底图的风格 features: ['bg', 'road', 'building', 'point'] //地图要素})
更改地图底图的风格
that.map.setMapStyle('amap://styles/fresh')
更改地图要素
that.map.setFeatures(['bg','road','building']);
自定义地图风格：链接
具体代码如下：
<template>
<div class="home noLogo">
<div class="title">高德地图DEMO</div>
<div class="container" id="map-container"></div>
<div class="tools">
<div class="mapStyle toolList" @click="setMap('mapStyle')">主题</div>
<div class="mapFeatures toolList" @click="setMap('mapFeatures')">要素</div>
</div>
<div class="mapDialog" v-if="isShow">
<div class="header"></div>
<div class="mapBox" v-if="type === 'mapStyle'">
<van-radio-group v-model="mapRadio" @change="changeMapStyle">
<van-radio name="dark">幻影黑</van-radio>
<van-radio name="light">月光银</van-radio>
<van-radio name="whitesmoke">远山黛</van-radio>
<van-radio name="'fresh">草色青</van-radio>
<van-radio name="grey">雅士灰</van-radio>
<van-radio name="graffiti">涂鸦</van-radio>
<van-radio name="macaron">马卡龙</van-radio>
<van-radio name="blue">靛青蓝</van-radio>
<van-radio name="darkblue">极夜蓝</van-radio>
<van-radio name="wine">酱籽</van-radio>
<van-radio name="normal">标准</van-radio>
</van-radio-group>
</div>
<div class="mapBox" v-else-if="type === 'mapFeatures'">
<van-checkbox-group v-model="features" @change="changeMapFeatures">
<van-checkbox name="bg">区域面（bg）</van-checkbox>
<van-checkbox name="road">道路（road）</van-checkbox>
<van-checkbox name="building">建筑物（building）</van-checkbox>
<van-checkbox name="point">标注（point）</van-checkbox>
</van-checkbox-group>
</div>
</div>
</div>
</template>
<script>
export default {
name: "home",
data() {
return {
map: null,
isShow: false,
type: "",
mapRadio: "macaron",
features: ["bg", "road", "building", "point"],
};
},
mounted() {
this.initMap();
},
methods: {
initMap() {
var that = this;
that.map = new AMap.Map("map-container", {
resizeEnable: true, //是否监控地图容器尺寸变化
zoom: 16, //初始化地图层级
center: [113.325, 23.137],
lang: "zh_cn", //中文底图
mapStyle: "amap://styles/macaron",
features: ["bg", "road", "building", "point"],
});
},
setMap(type) {
this.isShow = true;
this.type = type;
},
changeMapStyle(name) {
var styleName = "amap://styles/" + name;
this.map.setMapStyle(styleName);
this.isShow = false;
},
changeMapFeatures(arr) {
this.map.setFeatures(arr);
this.isShow = false;
},
},
};
</script>
<style lang="less" scoped>
.home {
width: 100%;
height: 100%;
position: relative;
.title {
position: fixed;
top: 0;
left: 0;
text-align: center;
height: 32px;
line-height: 32px;
background: rgba(255, 255, 255, 0.5);
z-index: 999;
width: 100%;
color: #333;
font-size: 16px;
font-weight: bold;
}
.container {
width: 100%;
height: 100vh;
}
.tools {
position: absolute; 、
right: 0;
top: 50%;
transform: translate(0, -50%);
.toolList {
background: #ffffff;
box-shadow: 0 4px 8px 0 rgba(113, 108, 98, 0.25);
width: 45px;
height: 45px;
border-radius: 50%;
margin-bottom: 20px;
text-align: center;
line-height: 45px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #333333;
letter-spacing: 0;
}
}
.mapDialog {
position: fixed;
width: 192px;
left: 0;
bottom: 0;
background: #fff;
border-radius: 5px;
box-shadow: 0 2px 6px 0 rgb(114 124 245 / 50%);
z-index: 999;
.mapBox {
padding-left: 20px;
padding-top: 12px;
.van-radio {
margin-bottom: 12px;
}
.van-checkbox{
margin-bottom: 12px;
}
}
}
}
</style>
注：vant的组件都需自己单独引入，可自行参考vant文档。这里是H5布局，没有做任何布局兼容。请在移动端下调试样式。
