简介
高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口，移动端、PC端一体化设计，一套 API 兼容众多系统平台。
教程
效果图
极夜蓝，参考
卫星图，参考
实现
- 新建
mapAk.js文件
export const amapAk = () => {return new Promise(function (resolve, reject) {let dom = document.querySelector('#xamap')if (dom) {resolve(1)return}dom = document.createElement('script')dom.setAttribute('id', 'xamap')dom.src = '//webapi.amap.com/maps?v=1.4.10&key=' + KEYdom.onerror = rejectdom.onload = resolvedocument.head.appendChild(dom)})
}
- 新建
index.vue文件
<template><div class="map-box"><div id="container"></div><div class="btns"><el-buttonv-for="item in btnList":key="item.value":label="item.value":type="radio === item.value ? 'primary' : ''"@click="tabType(item)">{{ item.label }}</el-button></div></div>
</template>
<script>
/* global AMap */
import { amapAk } from '@/assets/utils/mapAk'
export default {data() {return {map: null,satellite: null,roadNet: null,btnList: Object.freeze([{ label: '白天', value: 'normal' },{ label: '极夜蓝', value: 'darkblue' },{ label: '卫星', value: 'tileLayer' },]),radio: 'normal'}},mounted() {amapAk().then(() => {this.initMap()})},methods: {initMap() {const map = new AMap.Map('container', {zoom: 16,center: [121.549792, 29.868388]})// https://lbs.amap.com/api/javascript-api/reference/map-control#AMap.MapType// map.addControl(new AMap.MapType({// defaultType: 0, //0代表默认，1代表卫星// showRoad: true//显示路况（右上角也可点击）// }));this.map = mapthis.satellite = new AMap.TileLayer.Satellite()this.roadNet = new AMap.TileLayer.RoadNet()},tabType(item) {const { map, satellite, roadNet } = thisthis.radio = item.valueconst setMapStyle = v => {map.remove([satellite, roadNet])map.setMapStyle(`amap://styles/${v}`)}return {normal: () => setMapStyle('normal'),darkblue: () => setMapStyle('darkblue'),tileLayer: () => map.add([satellite, roadNet]),}[item.value]()}}
}
</script>
<style lang="less" scoped>
.map-box {position: relative;width: 100%;height: 100%;
}#container {width: 100%;height: 100%;min-height: 500px;
}.btns {position: absolute;top: 20px;right: 20px;padding: 20px;border-radius: 4px;background-color: #f5f5f5;box-shadow: 0 0 6px 0 #999;
}
</style>
