vue集成谷歌地圖amap並實現點聚合、點座標點擊信息窗體

上代碼：
HTML部分

<template>
	<Form ref="formInlineSearch" :label-width="0" :model="formInlineSearch" inline>
        <FormItem>
          <span>設備數量：</span>
          <span>{{number}}臺</span>
        </FormItem>
        <FormItem prop="identifier">
          <i-input type="text" v-model.trim="formInlineSearch.identifier" clearable placeholder="編號" style="width: 220px;">
            <Select v-model="formInlineSearch.identifierType" slot="prepend" style="width: auto;text-align: left">
              <Option value="terminal">資產編號</Option>
              <Option value="custom">自定義編號</Option>
              <Option value="ipc">工控機號</Option>
            </Select>
          </i-input>
        </FormItem>
        <FormItem prop="type">
          <Select v-model="formInlineSearch.type" placeholder="位置" clearable style="width:200px;">
            <Option v-for="(item, index) in locList" :value="item.value" :key="index">{{ item.lable }}</Option>
          </Select>
        </FormItem>
        <!--<FormItem v-if="this.$isCorp" prop="terminalOrgnizeId">
          <Treeselect
            style="width: 320px;line-height: 16px"
            v-model="formInlineSearch.terminalOrgnizeId"
            :multiple="true"
            :limit="1"
            sort-value-by="INDEX"
            value-consists-of="ALL"
            :options="options"
            :load-options="loadOptions"
            :placeholder="$t('la_deal_org_name')"/>
        </FormItem>
        <FormItem v-if="$isPlatform">
          <Treeselect
            style="width: 230px;line-height: 16px"
            v-model="formInlineSearch.corpName"
            :multiple="true"
            :limit="1"
            sort-value-by="INDEX"
            value-consists-of="ALL"
            :options="options_corp"
            :placeholder="$t('la_deal_owner_corp')"/>
        </FormItem>-->
        <FormItem>
          <CombOrgCorp comb-style="width: 230px"
                       :org-id.sync="formInlineSearch.orgId"
                       :corp-id.sync="formInlineSearch.corpId" />
        </FormItem>
        <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)
     }
   }
 }
}