基于若依前后端分离的地图选点

1. 拉依赖

npm install vue-amap --save

2. 写配置 文件： vue.config.js

//  找到这个代码
  configureWebpack: {
          
   
    name: name,
    resolve: {
          
   
      alias: {
          
   
        @: resolve(src)
      }
    },
    //这个是添加的，其他的是自带的
    externals: {
          
   
      AMap: AMap,
      AMapUI: AMapUI
    },
    //  添加的到这结束
    plugins: [
      // http://doc.ruoyi.vip/ruoyi-vue/other/faq.html#使用gzip解压缩静态文件
      new CompressionPlugin({
          
   
        cache: false,                   // 不启用文件缓存
        test: /.(js|css|html)?$/i,     // 压缩文件格式
        filename: [path].gz[query],   // 压缩后的文件名
        algorithm: gzip,              // 使用gzip压缩
        minRatio: 0.8                   // 压缩率小于1才会压缩
      })
    ],
  },

在public的 index.html页面。

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的key（在高德上申请）"></script>

3. 页面引用

import AMap from AMap

//页面上的：
<div id="mapContainer">
          加载地图中···
        </div>

//data中的：
 mapCenter: [108.974943,34.153137],
 map: null

//  样式
  #mapContainer{
          
   
    width: 100%;
    height: 300px;
    text-align: center;
    line-height: 300px;
    font-size: 20px;
    font-weight: bold;
  }

//init的方法：
 // 创建地图实例
      let that = this;
      this.map = new AMap.Map(mapContainer, {
          
   
        center: that.mapCenter,
        zoom: 13
      })
      // 监听地图点击事件
      this.map.on(click, (event) => {
          
   
        console.log(event.lnglat) // 获取经纬度信息
        that.form.addressLat = `${
          
   event.lnglat.lng},${
          
   event.lnglat.lat}`
        // that.form.longitudeNum = event.lnglat.lng;
        // that.form.latitudeNum = event.lnglat.lat;
      })