高德地图实现昼夜、卫星图切换

简介

高德地图 JS API 是一套 JavaScript 语言开发的的地图应用编程接口，移动端、PC端一体化设计，一套 API 兼容众多系统平台。

教程

效果图

极夜蓝，参考

卫星图，参考

实现

1. 新建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)
  })
}

2. 新建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>