# 一、开发平台

# 1、参考

规划云 (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') // 动态的设置地图样式

# 二、更多配置

# 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、点标记


# 三、项目开发

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

快捷开发:

系统开发:

# 四、待看

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

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

更新于 : 7/8/2024, 10:21:14 AM