最近在做大屏地图项目。之前一直没接触过地图之类的项目，然后在网上搜如何使用。看高德地图的api。和组件库。vue-amap组件库和高德原生的api都差不多也可以混合使用。下面介绍一下基本的引入和使用。

高德地图引入使用

高德地图在vue中是直接用比较方便不过需要注意写法，他是有异步加载的顺序，可以写个js文件引入到文件中使用

export default function MapLoader () {
  return new Promise((resolve, reject) => {
    if (window.AMap) {
      resolve(window.AMap)
    } else {
      // 动态创造DOM，引入api
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.async = true
      script.src = 'http://webapi.amap.com/maps?v=1.3&callback=initAMap&key=自己的高德地图key'
      script.onerror = reject
      document.body.appendChild(script)
    }
    window.initAMap = () => {
      resolve(window.AMap)
    }
  })
}

主要组件代码

<template>
  <div id="container" style="position: relative; width: 100%; height: 800px"></div>
</template>

<script>
import MapLoader from "./map";
export default {
  name: "geoMap",
  data () {
    return {
      map: "",
    };
  },
  mounted () {
    this.initAMap();
  },
  methods: {
    initAMap () {
      const that = this;
      MapLoader().then((AMap) => {
        that.map = new AMap.Map("container", {
          zoom: 16, // 级别
          mapStyle: "amap://styles/darkblue", // 设置颜色底层
          center: [121.468491, 31.206583], // 中心点坐标
          viewMode: "3D", // 使用3D视图
        });
        var marker = new AMap.Marker({
          icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
          position: [121.468491, 31.206583],
          offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(that.map);
      });
    },
  },
};
</script>
<style scoped>
/*隐藏高德地图logo，版本号*/
/deep/ .amap-logo {
  visibility: hidden;
}
/deep/ .amap-copyright {
  visibility: hidden;
}
</style>

这是展示结果可自己改变图层颜色，高德api有很多底层颜色选择，也可以自定义底层颜色

vue-amap组件库引入使用

首先你需要先安装 它也需要引入地图配置,你可以直接在vue入口文件的min.js直接引用 （案例 https://www.wenjiangs.com/doc/fsjxllsq）

1. 文档
   https://elemefe.github.io/vue-amap/#/
2. 安装
   npm install vue-amap --save
3. 引入地图
   在main.js中引入
   import AMap from 'vue-amap'; Vue.use(AMap); AMap.initAMapApiLoader({ key: 'your amap key', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'] });

我这边是分开的js，在min.js引入

import Vue from "vue";
// 高德离线地图
import VueAMap from "vue-amap";
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  // 高德key
  key: "高德key", // 自己到官网申请，我随便写的
  // 插件集合 （插件按需引入）
  plugin: ["AMap.Geocoder"],
  v: "1.4.15", // 我也不知道为什么要写这个，不写项目会报错，而且我随便写的，跟我下载的版本对应不了
  uiVersion: "1.0.11", // ui版本号，也是需要写
});

主要代码

<template>
  <div class="amap-wrap">
    <el-amap vid="amapContainer" :zoom="zoom" :events="events" class="amap-demo"></el-amap>
  </div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
  name: "amapMap",
  data () {
    return {
      map: null,
      zoom: 17,
      events: {},
    };
  },
  mounted () {
    lazyAMapApiLoaderInstance.load().then(() => {
      this.map = new AMap.Map("amapContainer", {
        center: new AMap.LngLat(121.530072, 31.24053),
        zoom: this.zoom,
      });
      var marker = new AMap.Marker({
        map: this.map,
        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        position: [121.530072, 31.24053],
      });
      marker.setMap(this.map);
    });
  },
};
</script>
<style scoped>
.amap-wrap {
  height: 100%;
}
.amap-demo {
  height: 800px;
}
</style>

展示效果

gitee仓库地址：https://gitee.com/divert/geo-map
有兴趣可以加前端交流群：199306856