前后端分离（VUE+SPRINGBOOT）十二 页面集成高德地图

VUE集成高德地图很简单，但是首先你的有个高德地图

开发者的key,怎么申请key见 https://blog.csdn.net/qq_38211852/article/details/80289412

VUE的高德地图组件在：https://github.com/ElemeFE/vue-amap

老规矩： 

1，安装  npm install vue-amap -S

2,   main.jsp引用

// 引入vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);

// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'YOUR_KEY',
  // 插件集合
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 高德 sdk 版本，默认为 1.4.4
  v: '1.4.4'
});

3,页面使用

<el-dialog title="地图" :visible.sync="mapVisible">
  <div class="amap-page-container">
    <el-amap vid="amapDemo" :zoom="zoom" :center="center" class="amap-demo" :plugin="plugin">
      <el-amap-info-window  :position="mywindow.position" :content="mywindow.content" :visible="mywindow.visible" :events="mywindow.events"></el-amap-info-window>
      <el-amap-marker :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable"></el-amap-marker>
      <el-amap-circle :center="circle.center" :radius="circle.radius" :fillOpacity="circle.fillOpacity" :events="circle.events" :strokeColor="circle.strokeColor" :strokeStyle="circle.strokeStyle" :fillColor="circle.fillColor"></el-amap-circle>
    </el-amap>
  </div>
</el-dialog>

data属性加：center就是你高德地图的坐标

zoom: 15,
center: [],
circle: {
  clickable: true,
  center: [],
  radius: 200,
  fillOpacity: 0.3,
  strokeStyle: 'dashed',
  fillColor: '#FFFF00',
  strokeColor: '#00BFFF'
},
marker: {
  position: [],
  events: {
    click: () => {
      if (this.mywindow.visible === true) {
        this.mywindow.visible = false
      } else {
        this.mywindow.visible = true
      }
    },
    dragend: (e) => {
      this.markers[0].position = [e.lnglat.lng, e.lnglat.lat]
    }
  },
  visible: true,
  draggable: false
},
mywindow: {
  position: this.cententValue,
  content: '',
  visible: true,
  events: {
    close () {
      this.mywindow.visible = false
    }
  }
},
plugin: {
  pName: 'Scale',
  events: {
    init (instance) {
      console.log(instance)
    }
  }
}

在点击显示地图按钮的时候，把地图的坐标和显示内容赋值

showMap($index) {
  //显示地图
  this.dialogStatus = "showMap"
//this.list[$index].position格式位12.3423,34,4343
  if(this.list[$index].position){
    let pos = this.list[$index].position.split(',');
    this.center=pos
    this.circle.center = pos
    this.marker.position = pos
    this.mywindow.position=pos
    this.mywindow.content=this.list[$index].positionRemark
    this.mapVisible = true
  }

}

出来的大致效果如下：