Vue&React项目中使用高德地图API-一一网

在Vue、React项目中使用高德地图API

加载高德地图,拢共三步

安装依赖

npm i amap-js -S
// 或
yarn add amap-js
复制代码

创建Loader

如果还没有高德Key, 需要去高德开放平台申请Key

import { AMapLoader } from "amap-js";

const loader = new AMapLoader({
  key: "您申请的高德Key值",
  version: "1.4.15",
  plugins: []
});
复制代码

加载API

// 调用 load 方法完成加载
loader.load().then(() => {
  // ?奇思妙想!!!
  console.log(AMap);
});
复制代码

访问页面

注意事项

项目中使用 ESLint

当项目中使用了 ESLint, 当使用 AMap, AMapUI, Loca, subway 这些高德地图API时会提示: ESLint: 'AMap' is not defined.(no-undef).

这是由于 AMap 是运行时的全局变量, 这里需在eslint config配置一下全局变量.

.eslintrc.js

module.exports = {
  globals: {
    AMap: true,
    AMapUI: true
    // ...
  }
};
复制代码

?保存配置后别忘了重启项目才会生效哦~

同时加载 AMap和AMapUI

import { AMapLoader, AMapUILoader } from "amap-js";

const amapLoader = new AMapLoader({
  key: "您申请的Key值",
  version: "1.4.15",
  plugins: []
});

const amapuiLoader = new AMapUILoader({
  version: "1.1"
});

async function entry() {
  await amapLoader.load();
  await amapuiLoader.load();

  // 加载插件
  await amapLoader.loadPlugin(["AMap.OverView"]);
  // 加载UI组件
  const [SimpleMarker] = await amapuiLoader.loadUI(["overlay/SimpleMarker"]);

  // 其他逻辑
  const map = new AMap.Map("map", { zoom: 4 });
  xmap.addControl(new AMap.OverView({ isOpen:true }));

  //创建SimpleMarker实例
  new SimpleMarker({
    map: map,
    position: map.getCenter(),
    iconLabel: "Hi",
    iconTheme: "default",
    iconStyle: "red"
  });
}
entry();
复制代码

更多示例

进阶用法

在实际案例中, 小伙伴们是在项目中使用高德地图如果用到了 AMapUI 或者 Loca 一定是和 AMap 配套使用, 那么此时就需要加载两个或以上加载器, 或多或少产生定制的需求, 目前直接使用加载器算是比较方便, 但显然不够优雅.

那么, 我们就定制自己的高德地图加载器.

MyAMapLoader.js

import { Loader, AMapLoader, AMapUILoader } from "amap-js";

// 自定义一个集成 AMap 和 AMapUI 的加载器
class MyAMapLoader extends Loader {
  constructor(options) {
    super();
    this.aMapLoader = new AMapLoader(options.AMap);
    this.aMapUILoader = new AMapUILoader(options.AMapUI);
    this.promise = null;
  }

  load() {
    if (this.promise) return this.promise;
    this.promise = new Promise(async (resolve, reject) => {
      this.aMapUILoader.async = true; // 确保AMapUI可以异步加载.
      Promise.all([this.aMapLoader.load(), this.aMapUILoader.load()])
        .then(() => {
          this.aMapUILoader.initAMapUI();
          resolve();
        })
        .catch(error => {
          this.promise = null;
          reject(error);
        });
    });
    return this.promise;
  }

  // 加载AMap插件
  loadPlugin(plugins) {
    return this.aMapLoader.loadPlugin(plugins);
  }

  // 加载UI组件
  loadUI(unames) {
    return this.aMapUILoader.loadUI(unames);
  }
}

export default MyAMapLoader;
复制代码

main.js

import MyAMapLoader from "./MyAMapLoader.js";

// 使用示例
async function entry() {
  // 创建自定义高德地图加载器
  const loader = new MyAMapLoader({
    AMap: {
      key: "您申请的Key值",
      version: "1.4.15",
      plugins: ["AMap.ToolBar"]
    },
    AMapUI: {
      version: "1.1"
    }
  });

  await loader.load();

  // 加载插件
  await loader.loadPlugin(["AMap.OverView"]);
  // 加载UI组件
  const [SimpleMarker] = await loader.loadUI(["overlay/SimpleMarker"]);

  // 其他逻辑
  const map = new AMap.Map("map", { zoom: 4 });
  map.addControl(new AMap.ToolBar());
  map.addControl(new AMap.OverView({isOpen:true}));

  //创建SimpleMarker实例
  new SimpleMarker({
    map: map,
    position: map.getCenter(),
    iconLabel: "Hi",
    iconTheme: "default",
    iconStyle: "red"
  });
}
entry();
复制代码