高德地图 | 任先生的笔记库

# 一、开发平台

# 1、参考

规划云 (opens new window)

国内：

高德地图 (opens new window)
百度地图

国外：

Google 地球 (opens new window)

# 二、高德地图

# 1、简介

2020 年 02 月 18 日，地图 JS API v1.4.15 发布更新

2020 年 03 月 31 日，地图 JS API v2.0 发布

注意

令人兴奋的是：JS API v2.0 版本由原先的仅支持<script> 标签加载 Loader，新增了 NPM 安装 Loader (opens new window) 。

强调的是，在 2021 年 12 月 02 日以后申请的 key 需要配合您的安全密钥 (opens new window)一起使用。

TIP

因此，在进行项目开发时，一定要记得设置 JS API 安全密钥 (opens new window)，官方提供了两种使用方式：

代理服务器转发
明文方式设置

开发环境下可以暂时使用明文方式设置安全秘钥，但在上线环境 😂 下推荐使用 Nginx 反向代理方式设置安全秘钥

安全秘钥设置

方式一（推荐）

Nginx 反向代理

server {
  listen       80;             #nginx端口设置，可按实际端口修改
  server_name  127.0.0.1;      #nginx server_name 对应进行配置，可按实际添加或修改

  # 自定义地图服务代理
  location /_AMapService/v4/map/styles {
    set $args "$args&jscode=您的安全密钥";
    proxy_pass https://webapi.amap.com/v4/map/styles;
  }
  # 海外地图服务代理
  location /_AMapService/v3/vectormap {
    set $args "$args&jscode=您的安全密钥";
    proxy_pass https://fmap01.amap.com/v3/vectormap;
  }
  # Web服务API 代理
  location /_AMapService/ {
    set $args "$args&jscode=您的安全密钥";
    proxy_pass https://restapi.amap.com/;
  }
}

方式二

明文方式设置

<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: '「您申请的安全密钥」'
  }
</script>

# 2、typescript 支持

-@amap/amap-jsapi-types (opens new window) 是高德开放平台官网提供的地图 JS API v2.0 版本的 Typescript 声明文件.

早前解决方案

早前就看到有人在知乎上吐槽高德地图 JSApi 转换为 TypeScript (opens new window) 非常麻烦 😂，在 JS API v2.0 版本中也算圆梦了）

npm i -S @amap/amap-jsapi-types

注意

@amap/amap-jsapi-types 这个官方 Typescript 声明文件插件。目前仅包含 JSAPI2.0 核心文件的接口，不包含插件的接口！

# 3、使用地图

安装 loader：

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

使用示例

index.html

<script>
  window._AMapSecurityConfig = {
    securityJsCode: '「您申请的安全密钥」'
  }
</script>

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

<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader'
import '@amap/amap-jsapi-types'
import { shallowRef } from '@vue/reactivity'
import { onMounted } from 'vue'

// 地图实例
let map = shallowRef(null) as any

// 配置项
const mapOptions: AMap.MapOptions = {
  viewMode: '3D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
  zoom: 11, // 初始化地图层级
  center: [121.705941, 31.404959] // 初始化地图中心点
}

onMounted(() => {
  initMap()
})

// 初始化
const initMap = () => {
  AMapLoader.load({
    key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.ToolBar'] // 需要使用的的插件列表
  })
    .then((AMap) => {
      map = new AMap.Map('container', mapOptions)
      AMap.plugin('AMap.ToolBar', function () {
        map.addControl(new AMap.ToolBar())
      })
    })
    .catch((e) => {
      console.log(e)
    })
}
</script>

<style>
body {
  padding: 0px;
  margin: 0px;
}
#container {
  width: 100vw;
  height: 100vh;
}
</style>

# 4、自定义主题

我们可以在高德控制台的GeoHUB 自定义地图 (opens new window)专栏中设计直接的地图样式。

map.value = new AMap.Map('container', {
  mapStyle: 'amap://styles/whitesmoke' //设置地图的显示样式
})

如果有主题切换需求的还可以：

map.setMapStyle('amap://styles/whitesmoke') // 动态的设置地图样式

# 二、更多配置

参考手册

API 文档：

地图 JSAPI 2.0 (opens new window)

使用示例：

JS API 2.0 示例 (opens new window)

# 1、地图控件

const initMap = () => {
  AMapLoader.load({
    key: '2307f5f7959f877909896ef4a273f94b', // 申请好的Web端开发者Key，首次调用 load 时必填
    version: '2.0' // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.HawkEye', 'AMap.MapType', 'AMap.Geolocation'] // 需要使用的的插件列表
  })
    .then((AMap) => {
      map = new AMap.Map('container', mapOptions)

      // 1、基本使用
      // map.addControl(new AMap.Scale())
      // map.addControl(new AMap.ToolBar())
      // map.addControl(new AMap.HawkEye())
      // map.addControl(new AMap.MapType())
      // map.addControl(new AMap.Geolocation())

      // 2、设置位置
      // map.addControl(
      //   new AMap.ToolBar({
      //     visible: true,
      //     position: {
      //       top: '110px',
      //       right: '40px'
      //     }
      //   })
      // )

      // 3、异步加载插件（按需引入插件）
      AMap.plugin('AMap.ToolBar', function () {
        map.addControl(new AMap.ToolBar())
      })
    })
    .catch((e) => {
      console.log(e)
    })
}

# 2、点标记

提示

经纬度坐标 (opens new window)获取

# 三、项目开发

高德地图的出现，也伴随着基于 Vue 和高德地图的地图组件的诞生。

快捷开发：

@amap/amap-vue (opens new window)

系统开发：

vue-amap (opens new window)：基于 Vue 2.x 和高德地图的地图组件
@vuemap/vue-amap (opens new window)：一套基于 Vue3 和高德地图 2.0 的地图组件（是对vue-amap (opens new window)组件的升级版本）

# 四、待看

用户当前地址获取：https://blog.csdn.net/weixin_45687922/article/details/125925490

小区排行示例：https://jimnox.gitee.io/amap-vue/examples/top-home-rank.html

百度地图 →