前端开发攻略---用Vue带你玩转高德地图

1、演示

2、申请

若已经注册了高德地图开发者账号并且申请了key和安全密钥请跳过这一步

若没有注册高德地图开发者账号的请前往我之前的这篇

“引入高德地图，超详细，超简单，保姆级教程。”

3、安装依赖

npm i @amap/amap-jsapi-loader --save

4、示例代码

<template>
  <div style="display: flex">
    <div id="container"></div>
    <div style="display: flex; flex-direction: column; align-items: center">
      <el-button type="primary" style="width: 200px; margin: 10px 0 0 0" @click="toggleLayer">显示/隐藏图层</el-button>
      <el-button type="primary" style="width: 200px; margin: 10px 0 0 0" @click="changeLayerOpcity">随机修改图层透明度</el-button>
      <el-button type="primary" style="width: 200px; margin: 10px 0 0 0" @click="heavyLoadLayer">重载图层</el-button>
      <el-button type="primary" style="width: 200px; margin: 10px 0 0 0" @click="toggleBLC">显示/隐藏比例尺</el-button>
      <el-button type="primary" style="width: 200px; margin: 10px 0 0 0" @click="toggleGJT">显示/隐藏工具条</el-button>
      <el-button type="primary" style="width: 200px; margin: 10px 0 0 0" @click="toggleFXP">显示/隐藏工具条方向盘</el-button>
      <el-button type="primary" style="width: 200px; margin: 10px 0 0 0" @click="toggleYY">显示/隐藏鹰眼</el-button>
      <el-button type="primary" style="width: 200px; margin: 10px 0 0 0" @click="getCurrentPosition">当前位置</el-button>
      <el-button type="primary" style="width: 200px; margin: 10px 0 0 0" @click="randomChangePosition">随机更改位置</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
let map = null
let layerGroup = null
let trafficLayer = null
let roadNetLayer = null
let scale = null
let toolBar = null
let controlBar = null
let overView = null
let _AMap = null
let marker = null
let MapType = null
onMounted(() => {
  AMapLoader.load({
    key: '您的Key', // 申请好的Web端开发者Key，首次调用 load 时必填
    resizeEnable: true,
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.ControlBar', 'AMap.HawkEye', 'AMap.MapType'], //需要使用的的插件列表
  })
    .then(AMap => {
      _AMap = AMap
      map = new AMap.Map('container', {
        // 设置地图容器id
        zoom: 11, // 初始化地图级别
        center: [116.397428, 39.90923], // 初始化地图中心点位置
      })
      scale = new AMap.Scale({
        visible: true,
      })
      toolBar = new AMap.ToolBar({
        visible: true,
        position: {
          top: '110px',
          right: '40px',
        },
      })
      controlBar = new AMap.ControlBar({
        visible: true,
        position: {
          top: '10px',
          right: '10px',
        },
      })
      overView = new AMap.HawkEye({
        visible: true,
      })
      MapType = new AMap.MapType({
        visible: true,
        position: {
          top: '200px',
          right: '10px',
        },
      })

      map.addControl(scale)
      map.addControl(toolBar)
      map.addControl(controlBar)
      map.addControl(overView)
      map.addControl(MapType)

      map.on('click', mapClick)
      map.on('dblclick', mapDbClick)
      roadNetLayer = new AMap.TileLayer.RoadNet({
        zIndex: 10,
      })
      trafficLayer = new AMap.TileLayer.Traffic({
        zIndex: 11,
      })
      layerGroup = new AMap.LayerGroup([trafficLayer, roadNetLayer])
      layerGroup.setMap(map)
    })
    .catch(e => {
      console.log(e)
    })
})

const mapClick = e => {
  changePosition(e.lnglat.lng, e.lnglat.lat)
}
const mapDbClick = () => {}

let layerFlag = true
const toggleLayer = () => {
  console.log(layerGroup)
  if (layerFlag) {
    layerGroup.hide()
  } else {
    layerGroup.show()
  }
  layerFlag = !layerFlag
}
const changeLayerOpcity = () => {
  layerGroup.setOptions({ opacity: Math.random() })
}
const heavyLoadLayer = () => {
  layerGroup.reload()
}

let blcFlag = true
const toggleBLC = () => {
  if (blcFlag) {
    scale.hide()
  } else {
    scale.show()
  }
  blcFlag = !blcFlag
}
let gjtFlag = true
const toggleGJT = () => {
  if (gjtFlag) {
    toolBar.hide()
  } else {
    toolBar.show()
  }
  gjtFlag = !gjtFlag
}
let fxpFlag = true
const toggleFXP = () => {
  if (fxpFlag) {
    controlBar.hide()
  } else {
    controlBar.show()
  }
  fxpFlag = !fxpFlag
}
let yyFlag = true
const toggleYY = () => {
  if (yyFlag) {
    overView.hide()
  } else {
    overView.show()
  }
  yyFlag = !yyFlag
}

const getCurrentPosition = () => {
  _AMap.plugin('AMap.Geolocation', function () {
    let geolocation = new _AMap.Geolocation({
      enableHighAccuracy: true, //是否使用高精度定位，默认:true
      timeout: 100000, //超过10秒后停止定位，默认：5s
      position: 'RB', //定位按钮的停靠位置
      offset: [10, 20], //定位按钮与设置的停靠位置的偏移量，默认：[10, 20]
      zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
    })
    console.log('定位成功')
    map.addControl(geolocation)
    geolocation.getCurrentPosition(function (status, result) {
      if (status == 'complete') {
        // 标记位置
        changePosition(result.position.lng, result.position.lat)
      } else {
        console.log(result, 'error')
      }
    })
  })
}

const changePosition = (lng, lat, scale = 10) => {
  map.setCenter([lng, lat])
  map.setZoom(scale)
  marker = new _AMap.Marker({
    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    position: [lng, lat],
    offset: new _AMap.Pixel(-13, -30),
    content: `<div class="marker">
                   <span>经度:${lng.toFixed(2)}</span>
                   <br/>
                   <span>纬度:${lat.toFixed(2)}</span>
              </div>`,
  })
  marker.setMap(map)
}

const randomChangePosition = () => {
  changePosition(Math.random() * (135 - 73.5) + 73.5, Math.random() * (53.6 - 18) + 18, 7)
}
onUnmounted(() => {
  map?.destroy()
})
</script>

<style lang="scss">
#container {
  width: 900px;
  height: 700px;
}
.amap-marker .marker {
  width: 100px;
  padding: 3px;
  color: #fff;
  font-size: 12px;
  background-color: #000;
}
</style>