vue中使用地图

本文主要介绍引入高德地图和使用leafLet添加其他地图图层

• 1、高德地图

需要在高德开发平台注册账号，创建自己的应用，取到Key，然后再vue中安装@amap/amap-jsapi-loader，就可以使用高德地图了

<template>
  <div id="map-container" style="width: 100%; height: 500px;"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';

export default {
  name: 'Map',
  data() {
    return {
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      AMapLoader.load({
        key: '。。。。', // 替换为你的API Key
        version: '2.0', // 指定要加载的 JSAPI 的版本
        plugins: ['AMap.Geolocation', 'AMap.Marker'], // 需要使用的的插件列表
      })
        .then((AMap) => {
          this.map = new AMap.Map('map-container', {
            zoom: 19, // 地图缩放级别(最大测试20)
            center: [116.492072, 39.988803], // 地图中心点
          });

          // 添加定位控件
          const geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, // 是否使用高精度定位
            timeout: 10000, // 超时时间
          });
          this.map.addControl(geolocation);

          // 添加标记
          const marker = new AMap.Marker({
            position: [116.492072, 39.988803], // 标记位置
            title: '北京',
          });
          this.map.add(marker);
        })
        .catch((e) => {
          console.error(e);
        });
    },
  },
};
</script>

<style scoped>
#map-container {
  /* width: 100%; */
  /* height: 500px; */
}
</style>

然后在具体地方引入该组件即可

注意：如果需要找经纬度，可以坐标拾取器 | 高德地图API

• 2、leaflet

Leaflet 是一个轻量级的开源地图库，适合在 Vue 项目中使用

引入项目后，需要 添加地图图层，这个地图图层可以是高德、百度、Google Maps、 Mapbox（这些都需要key或者令牌，还不如直接用他们自己的api，不通过leaflet），不需要key的就是OpenStreetMap，但是这个经常网络访问不了，翻一下就很快

综上，推荐直接使用高德，在vue中引入。