vue集成高德地图amap并实现点聚合、点坐标点击信息窗体

上代码：
HTML部分

<template>
	<Form ref="formInlineSearch" :label-width="0" :model="formInlineSearch" inline>
        <FormItem>
          <Button type="primary" @click="terSearch()">{{$t('com_search')}}</Button>
        </FormItem>
      </Form>
	<Row id="amap" style="width: 100%; height: 100%; margin-top: -40px;">
</template>

实现

methods: {
	request () {
	  this.selectTerminalPosition()
	},
	selectTerminalPosition () {
	  getTerminalPositionList(this.formInlineSearch).then(res => {
	    this.position_data = res.data
	    this.create()
	  }).catch(err => {
	    console.log(err)
	  })
	},
	create () {
	  let self = this
	  let markers = []
	  let num = Number(this.position_data.length)
	  let index = 0
	  let images = [
	    require('../../../assets/images/amap/mark_r.png'),
	    require('../../../assets/images/amap/mark_g.png'),
	    require('../../../assets/images/amap/mark_ru.png'),
	    require('../../../assets/images/amap/mark_gu.png')
	  ]
	  for (let i = 0; i < num; i++) {
	    index++
	    let img = ''
	    if (this.position_data[i].type === '0') {
	      img = images[0]
	    } else if (this.position_data[i].type === '1') {
	      img = images[1]
	    } else if (this.position_data[i].type === '2') {
	      img = images[2]
	    } else {
	      img = images[3]
	    }
	    let marker = new AMap.Marker({
	      position: [this.position_data[i].coordinate0, this.position_data[i].coordinate1],
	      icon: img
	    })
	    // 鼠标点击marker弹出自定义的信息窗体
	    AMap.event.addListener(marker, 'click', function () {
	      let position = marker.getPosition()
	      self.selectInfo(position.lng, position.lat, i)
	    })
	    markers.push(marker)
	    map.add(marker)
	  }
	  this.number = index
	  let cluster = new AMap.MarkerClusterer(map, markers, {
	    gridSize: 80,
	    maxZoom: 16
	  })
	},
	terSearch () {
	  // 地图销毁重新初始化
	  map.destroy()
	  // 初始化地图对象，加载地图
	  this.createAmap()
	  // 检索
	  this.request()
	},
	selectInfo (lng, lat, index) {
	  console.log('通过数据库获取了坐标点：[' + lng + ',' + lat + '] 的数据。。。')
	  this.formInlineSearch.deviceCoordinate = this.position_data[index].coordinate0 + ',' + this.position_data[index].coordinate1
	  let windows = []
	  getTerminalPositionDetailData(this.formInlineSearch).then(res => {
	    this.positionDetailData = res.data
	    let time = this.formatDate(new Date(this.positionDetailData.SignTime), 'yyyy-MM-dd hh:mm:ss')
	    let infoWindow = new AMap.InfoWindow({
	      position: [lng, lat],
	      content: `<div class="prompt">
	                <div>
	                  <span style="color: blue;">${this.positionDetailData.Name}</span>
	                  <span style="color: blue;">【${this.positionDetailData.CorpTerminalIdentifier}】</span>
	                  <span style="color: blue;">【${this.positionDetailData.TerminalIdentifier}】</span>
	                </div>
	                <hr/>
	                <div class="row_c">
	                  <span class="size">签到时间：</span>
	                  <span class="size">${time}</span>
	                </div>
	                <div class="row_c">
	                  <span class="size">点位地址：</span>
	                  <span class="size">${this.positionDetailData.locationAddress}</span>
	                </div>
	                <div class="row_c">
	                  <span class="size">定位位置：</span>
	                  <span class="size">${this.positionDetailData.CoordinateAddress}</span>
	                </div>
	                <div class="row_c">
	                  <hr/>
	                </div>
	                <div>
	                  <span class="size" style="color: blue;">今日销售额：</span>
	                  <span class="size" style="color: blue;">${this.positionDetailData.TotalMoney}元</span>
	                  <span class="size" style="margin-left:30px; color: blue;">今日销售量：</span>
	                  <span class="size" style="color: blue;">${this.positionDetailData.TotalCnt}笔</span>
	                </div>
	              </div>`,
	      visible: false
	    })
	    infoWindow.open(map)
	  }).catch(err => {
	    console.log(err)
	  })
	  return windows
	},
	// 初始化地图
	createAmap () {
	  map = new AMap.Map('amap', {
	    resizeEnable: true,
	    zoom: 10, // 设置地图显示的缩放级别
	    center: this.center, // 设置地图中心点坐标
	    viewMode: '2D', // 设置地图模式
	    // 地图模式
	    lang: 'zh_cn' // 设置地图语言类型
	  })
	  let scale = new AMap.Scale({ // 比例尺
	    visible: true
	  })
	  let toolBar = new AMap.ToolBar({// 工具条
	    visible: true
	  })
	  let overView = new AMap.OverView({ // 鹰眼
	    visible: true
	  })
	  map.addControl(scale)
	  map.addControl(toolBar)
	  map.addControl(overView)
	  // 浏览器精确定位
	  AMap.plugin('AMap.Geolocation', function () {
	    var geolocation = new AMap.Geolocation({
	      enableHighAccuracy: true, // 是否使用高精度定位，默认:true
	      timeout: 10000, // 超过10秒后停止定位，默认：无穷大
	      maximumAge: 0, // 定位结果缓存0毫秒，默认：0
	      convert: true, // 自动偏移坐标，偏移后的坐标为高德坐标，默认：true
	      showButton: true, // 显示定位按钮，默认：true
	      buttonPosition: 'RB', // 定位按钮停靠位置，默认：'LB'，左下角
	      buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
	      showMarker: true, // 定位成功后在定位到的位置显示点标记，默认：true
	      showCircle: true, // 定位成功后用圆圈表示定位精度范围，默认：true
	      panToLocation: true, // 定位成功后将定位到的位置作为地图中心点，默认：true
	      zoomToAccuracy: false // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
	    })
	    map.addControl(geolocation)
	    geolocation.getCurrentPosition(function (status, result) {
	      let position = result.position
	      if (status === 'complete') {
	        console.log('谷歌地图定位成功：定位结果 = %o', [position.lng, position.lat])
	      } else {
	        console.log('谷歌地图定位失败')
	      }
	    })
	  })
	}
},
mounted () {
	this.request()
	// 初始化地图对象，加载地图
	this.createAmap()
},
watch: {
 lngLat: {
   handler (newV, oldV) {
     if (newV !== []) {
       this.center = [newV[0], newV[1]]
       map.setCenter(this.center)
       map.setZoom(10)
     }
   }
 }
}