简介
高德地图 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=' + KEY
dom.onerror = reject
dom.onload = resolve
document.head.appendChild(dom)
})
}
- 新建
index.vue
文件
<template>
<div class="map-box">
<div id="container"></div>
<div class="btns">
<el-button
v-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 = map
this.satellite = new AMap.TileLayer.Satellite()
this.roadNet = new AMap.TileLayer.RoadNet()
},
tabType(item) {
const {
map, satellite, roadNet } = this
this.radio = item.value
const 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>