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

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;
      })