本文已参与[新人创作礼]活动，一起开启掘金创作之路。

简单使用vue-amap插件

这里只是简单的使用vue-amap插件，实现了展示地图，并且在代码里面输入经纬度会在地图上标注所在位置。

安装vue-amap插件：

npm install vue-amap --save

在Vue的入口文件main.js引入插件并使用和初始化。

main.js

...
// 引入插件
import VueAMap from 'vue-amap';

// 使用插件
Vue.use(VueAMap);

// 初始化插件vue-amap
VueAMap.initAMapApiLoader({
  // 申请的高德key
  key: '9d96777c6c22b8fd6dd1ddd5b6b2f4e0',
  // 插件集合，根据自己的需求选择插件（定位获取cityCode，所以使用AMap.Geolocation插件）
  plugin: ['AMap.Geolocation']
});
...

建立地图组件，其他组件使用该组件即可展示地图。

<template>
  <div style="height: 800px">
    <el-amap :center="center" :zoom="zoom">
      <el-amap-marker :position="center" :label="label"></el-amap-marker>
    </el-amap>
  </div>
</template>
<script>
export default {
  name: "vueDefine",
  data() {
    return {
      center: [121.4, 31.2],// 坐标的经纬度
      zoom: 10,// 地图的缩放等级
      label: {
        content: "当前所在位置",
        offset: [-10, -20],
      },
    };
  },
};
</script>

点击地图获取经纬度

实现的主要步骤：安装vue-amap插件->Vue引入和使用插件和插件初始化设置->封装地图组件。

安装vue-amap插件

npm install vue-amap --save 

Vue引入和使用插件，插件初始化设置，在Vue入口文件main.js中配置。

main.js

...
// 引入地图插件
import VueAMap from 'vue-amap';

// vue使用地图
Vue.use(VueAMap);

// 初始化vue-amap，根据需求配置
VueAMap.initAMapApiLoader({
  key: '9d96777c6c22b8fd6dd1ddd5b6b2f4e0',  // 在高德开放平台申请的key
  // 插件
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch','AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 
'AMap.MapType', 'AMap.Geolocation','AMap.Geocoder', 'AMap.AMapManager', 'AMap.Marker'],
  v: '1.4.15', // 版本
  uiVersion: '1.0' // ui版本
})
...

封装地图组件

<template>
  <div class="app-container">
    <!-- <div id="title">高德地图组件展示</div> -->
    <div id="mapcontainer"></div>
    <div id="lnglat">
      <input type="text" class="input-item" v-model="lnglat" />
    </div>
  </div>
</template>
<script>
import location from "@/assets/img/location.png";
import { lazyAMapApiLoaderInstance } from "vue-amap";
export default {
  data() {
    return {
      mapMain: "",
      lngMain: 121.475118,
      latMain: 31.232786,
      markerMain: "",
    };
  },
  computed: {
    lnglat: function () {
      // 计算属性，根据动态的坐标值随时获取新结果
      return this.lngMain + "," + this.latMain;
    },
  },
  methods: {
    initMapMain() {
      // 地图组件绑定div进行初始化并赋值给vue的对象
      this.mapMain = new AMap.Map("mapcontainer", {
        // 设置显示的地图中心坐标
        center: [this.lngMain, this.latMain],
        // 设置地图缩放等级
        zoom: 8,
      });
      this.markClik();
    },
    markClik() {
      // 绑定地图组件内单击事件
      this.mapMain.on("click", (e) => {
        this.lngMain = e.lnglat.getLng();
        this.latMain = e.lnglat.getLat();
      });

      // 生成自定义的图标
      let icon = new AMap.Icon({
        image: location,
        size: new AMap.Size(25, 35),
        imageSize: new AMap.Size(25, 35),
      });

      // 初始化覆盖物对象并赋值给vue对象
      this.markerMain = new AMap.Marker({
        // 使用自定义的图标
        icon: icon,
        // 覆盖物位置坐标
        position: [this.lngMain, this.latMain],
      });

      // 清除已有的覆盖物
      this.mapMain.clearMap();

      // 添加覆盖物到地图
      this.mapMain.add(this.markerMain);

      // 添加覆盖物到地图，可根据地图缩放等级展示地图
      // this.markerMain.set(this.mapMain)
      // 地图缩放等级和位置等自适应，可以放置折线对象等作为形参也可以为空
      this.mapMain.setFitView();
    },
  },
  mounted() {
    // 若只想通过vue-amap引入高德地图，而部分实例化的操作直接基于高德地图的sdk完成，需要使用lazyAMapApiLoaderInstance
    lazyAMapApiLoaderInstance.load().then(() => {
      this.initMapMain();
    });
  },
  updated() {
    // 每次点击更新覆盖物
    this.markClik();
  },
};
</script>
<style scoped>
.app-container {
  height: 800px;
  display: flex;
  flex-direction: column;
}
#mapcontainer {
  height: 800px;
  width: 800px;
}
#mapsearch {
  display: inline-block;
  width: 260px;
  height: 30px;
}
.input-item {
  height: 30px;
  width: 260px;
  text-align: center;
  font-size: 16px;
}
</style>

地图中图标的样式：

该组件实现的功能：实现了展示初始设置的经纬度位置(通过图标标注)，并且通过点击地图切换位置，图标会根据点击位置变化，获取切换的位置经纬度。

可根据高德开放平台的一些API介绍进行地图的功能扩充，

官网地址：lbs.amap.com/ 相关API在开发支持模块里面。

js的API地址：lbs.amap.com/api/javascr…