与时俱进，高德地图API也支持Vue和React组件了

哈喽，大家好！我是「励志前端小黑哥」，我带着最新发布的文章又来了！

老规矩，小手动起来~点赞关注不迷路！

最近开发了一款基于地图的APP，用到了高德地图，上次使用它还是在几年前，最近使用发现这家伙是真的在与时俱进。

他们居然出了一个官方的npm包–@amap/amap-jsapi-loader！

使用这个包，可以快速的接入现代开发框架，不用再像以前一样引入script、style资源了，非常方便！

下面我就来介绍一下它的具体使用步骤。

不要忘了点赞收藏哦~高德地图开发、GIS开发，看我这篇文章就够了！

高德JS API 2.0介绍

高德地图 JS API 2.0 是高德开放平台免费提供的第四代WebGL地图渲染引擎，以 WebGL 为主要绘图手段，兼容 IE10 及以上的所有浏览器环境。

高德JS API 结合 Vue 使用

1、NPM 安装 Loader

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

2、新建 MapContainer.vue 文件

在项目中新建 MapContainer.vue 文件，用作地图组件。

3、创建地图容器

在 MapContainer.vue 地图组件中创建

标签作为地图容器 ，并设置地图容器的 id 属性为 container。

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

4、设置地图容器样式

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

5、引入JS API Loader

在地图组件 MapContainer.vue 中引入 amap-jsapi-loader

import AMapLoader from '@amap/amap-jsapi-loader';

6、初始化 Map

注意：
初始化 map 对象（注意此处声明 map 对象时 vue2 和 vue3 的用法有区别，切记不能混合使用）强烈建议您在使用时按照本文推荐的的用法进行使用。

在 Vue2 中使用

在 data 函数中不声明 map 对象，可以直接使用this.map赋值或者采用非响应式的普通对象来存储。

data(){
  return{
    //此处不声明 map 对象，可以直接使用 this.map赋值或者采用非响应式的普通对象来存储。
    //map:null,
  } 
},

在 Vue3 中使用

首先需要引入 Vue3 的 shallowRef()方法（使用 shallowRef() 进行非深度监听，因为在 Vue3 所使用的 Proxy 拦截操作会改变 JS API 原生对象，所以此处需要区别 Vue2 使用方式对地图对象行非深度监听，否则会出现问题，建议 JS API 相关对象采用非响应式的普通对象来存储）。

import { shallowRef } from '@vue/reactivity'

setup(){
  // map采取非深度监听
  const map = shallowRef(null);
  return{
    map,
  }
},

7、创建地图

地图初始化函数 initMap()

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

调用地图初始化函数：mounted 函数会在 DOM 初始化完成后调用，建议在 mounted 函数中调用地图初始化方法。

mounted(){
  //DOM初始化完成进行地图初始化
  this.initMap();
}

高德JS API 结合React使用

1、NPM 安装 Loader

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

2、新建脚本和样式文件

在 React 项目中新建一个地图组件，需要在项目目录新建 MapContainer.js 脚本文件和新建 MapContainer.css 样式文件。

3、设置地图容器样式

在MapContainer.css样式文件中设置地图容器样式

#container{
  padding: 0px;
  margin: 0px;
  width: 100%;
}

4、添加依赖

import React, { Component } from 'react';

// amap-jsapi-loader 引入
import AMapLoader from '@amap/amap-jsapi-loader';

// 地图组件样式引入
import './MapContainer.css';

5、创建地图组件

新建地图类MapComponent，并在render函数创建<div>标签作为地图容器设置id属性container，添加地图容器样式 height值，完整的代码示例如下：

class MapComponent extends Component {
  constructor() {
    super();
    this.map = {};
  }

  // dom渲染成功后进行map对象的创建
  componentDidMount() {
    AMapLoader.load({
      key: '', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then(AMap => {
        this.map = new AMap.Map('container', {
          // 设置地图容器id
          viewMode: '3D', // 是否为3D地图模式
          zoom: 5, // 初始化地图级别
          center: [105.602725, 37.076636], // 初始化地图中心点位置
        });
      })
      .catch(e => {
        console.log(e);
      });
  }

  render() {
    // 初始化创建地图容器,div标签作为地图容器，同时为该div指定id属性；
    return <div id="container" className="map" style={{ height: '800px' }}></div>;
  }
}
// 导出地图组建类
export default MapComponent;

至此，整个介绍就全部结束了。

高德JS API 结合typescript使用

不得不说，高德的开发团队还是与时俱进的，怪不得高德这么多人用，从文档和一些工具包的研发过程就可以看出差别。

对比隔壁微信公众号、小程序开发，高德的开发体验真的是太有好了！

他们甚至还提供了接口的typescript的DTS文件，对于typescript开发者也非常的nice！

这里是他们的dts库，需要的自取。

结语

本文介绍了高德地图JS API与Vue2、Vue3、React框架结合使用的步骤，整理并列举了相关的实现代码。最后再附上高德官方提供了的几个完整示例，希望对大家有所帮助！

高德JS API_Vue2完整示例

高德JS API_Vue3完整示例

高德JS API_React完整示例

励志前端小黑哥，全网唯一账号！
关注我，带你了解更多前端知识！