高德地图

简介

高德地图是一款基于互联网的地图服务，提供了地图浏览、路径规划、地理编码等功能。在前端开发中，我们可以使用高德地图 JavaScript API 来实现地图相关的功能。

使用高德地图 JavaScript API，我们可以在网页中嵌入地图，并在地图上添加标记点、路径等元素，实现地图的交互功能。同时，高德地图 JavaScript API 还提供了地理编码、路径规划等功能，可以满足不同场景下的需求。

在使用高德地图 JavaScript API 进行开发时，我们需要注册高德开放平台账号，并获取 API Key。然后，在 HTML 页面中引入高德地图 JavaScript API 的 SDK，并在 JavaScript 中编写相关代码，就可以实现地图的显示和交互功能了。

演示环境

电脑 - Windows 10
Node - v16.15.0
Npm - 9.4.0
Vue 3.3.4
axios 1.4.0

基础用法

原生 JS 用法，适用的平台广。

vue

<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'

import { onMounted, shallowRef } from 'vue'

// 在2021年12月02日以后申请的 key 需要配合您的安全密钥一起使用。
window._AMapSecurityConfig = {
  securityJsCode: '415e917da833efcf2d5b69f4d821784b',
}

const map = shallowRef<AMap.Map>()

const initMap = () => {
  AMapLoader.load({
    key: '4eed3d61125c8b9c168fc22414aaef7e', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then(() => {
      map.value = new AMap.Map('container', {
        //设置地图容器id
        viewMode: '3D', //是否为3D地图模式
        zoom: 12, //初始化地图级别
        center: [113.280637, 23.125178], //初始化地图中心点位置
      })
    })
    .catch((e) => {
      console.log(e)
    })
}

onMounted(() => {
  initMap()
})
</script>

<template>
  <div id="container"></div>
</template>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 800px;
}
</style>

Vue 组件

使用起来较为方便，支持 Vue2 和 Vue3

vue

<script setup lang="ts">
import { ref } from 'vue'

const mapRef = ref()

const markers = ref([
  { id: 1, position: [113.280637, 23.125178] },
  { id: 2, position: [113.281657, 23.122178] },
])

const center = ref([113.280637, 23.125178])

const zoom = ref(13)

const getMap = () => {
  // bmap vue component
  console.log('setup $refs: ', mapRef.value.$$getInstance())
}

let map: any = null
const init = (e: any) => {
  // 获取地图实例
  console.log('setup center: ', map === mapRef.value.$$getInstance())
  console.log('setup init $refs: ', mapRef.value.$$getInstance())
  map = e
}

// 添加坐标点1
const add = () => {
  markers.value.push({ id: 3, position: [113.255657, 23.135178] })
}

// 添加坐标点2
const add2 = () => {
  // 传统写法
  const marker = new AMap.Marker({
    position: [113.253657, 23.133178],
  })
  map.add(marker)
}

// 搜索，当鼠标点击或者回车选中某个POI信息时触发此事件
const onSearchSelect = (e: any) => {
  // console.log('onSearchSelect', e)
  // 设置地图中心点
  center.value = e.poi.location
}

// 定位结束后触发的事件
const onGetLocationComplete = (e: any) => {
  // 设置地图中心点
  center.value = e.position
}
</script>

<template>
  <div id="app">
    <el-amap :center="center" :zoom="zoom" ref="mapRef" @init="init">
      <!-- 标记点 -->
      <el-amap-marker v-for="marker in markers" :key="marker.id" :position="marker.position" />
      <!-- 地图控件 -->
      <el-amap-control-scale />
      <el-amap-control-tool-bar :visible="false" />
      <el-amap-control-control-bar :visible="false" />
      <el-amap-control-map-type />
      <el-amap-control-hawk-eye :visible="false" />
      <!-- 搜索 -->
      <el-amap-search-box @select="onSearchSelect" />
      <!-- 定位 -->
      <el-amap-control-geolocation @complete="onGetLocationComplete" />
    </el-amap>
    <button @click="getMap()">获取地图实例</button>
    <button @click="add()">添加坐标点</button>
    <button @click="add2()">添加坐标点2</button>
  </div>
</template>

<style>
#app {
  height: 500px;
  width: 500px;
  background-color: pink;
  border: 1px solid #000;
}
</style>

高德地图 ​

简介 ​

演示环境 ​

基础用法 ​

Vue 组件 ​

高德地图

简介

演示环境

基础用法

Vue 组件