高德地图弹窗使用vue模板

<script>

import Vue from 'vue'

import zhanpai from '@/assets/imagemap/zhanpai.svg'

setInfoWindow(data) {

      let infoWindowContent = Vue.extend({

          data() {

            return {

              // activeName: _this.activeName || 'first',

              gunsList: v.gunsList,

              // vtype: type == 'isClickAll' ? 1 : 0,

            }

          },

          // 创建相关点击方法

          methods: {

            toDetail() {

              this.$emit('toReport', data.vin, data.plate, data.fuelPowerNo)

            },

            toReport() {

              this.$emit('toDetail', data.vin, data.plate, data.fuelPowerNo)

            },

            toTrack() {

              this.$emit('toTrack', data.vin, data.plate, data.fuelPowerNo)

            },

            toDownload() {

              this.$emit('toDataload', data.vin, data.plate, data.fuelPowerNo)

            },

            toStatistics() {

              this.$emit('tostatistics', data.vin, data.plate, data.fuelPowerNo)

            }

            // // 关闭窗口

            // clearInfoWindow() {

            //   _this.clickhyStationId = null

            //   _this.map.clearInfoWindow()

            //   // 关闭弹窗,显示所有覆盖物最佳视野

            //   let allOverlays = _this.map.getAllOverlays()

            //   _this.map.setFitView(allOverlays, false, [0, 0, 100, 0], 11)

            // },

          },

          template: `<div id="diaWrap"  class="mapIconWrap markersWrap ${this.name} distribute-amap-infoWindow" >

              <el-image src="${zhanpai}" fit="contain" class="cz-nameimg" />

              <div class="alert ${data && data.alarmCount > 0 ? '' : 'hidden'}"></div>

              <div class="fuelTitle"><span>VIN:${data.vin}</span> <span class="online ${this.getStatusClass(data)}"> ${this.getOnlineStatus(data)}</span>  </div>

              <div class="item add">${data.addressdetail} </div>

              <div><span class="cz-locaname" v-for="(item,idx) in gunsList">{{item.gunNo}}路线</span></div>

              <div class="flex">

                <button class="item-tab detail-tab" @click="toDetail">1</button>

                <button class="item-tab message-tab" @click="toReport">2</button>

                <button class="item-tab track-tab" @click="toTrack">3</button>

                <button class="item-tab dataload-tab" @click="toDownload">4</button>

                <button class="item-tab statistics-tab" @click="toStatistics">5</button>

              </div>

            </div>`,

        })

        _this.$nextTick(() => {

          // 先定位标注点,再打开弹窗

          const timeout = setTimeout(() => {

            _this.infoWindow.setContent(new infoWindowContent().$mount().$el)

            _this.infoWindow.open(_this.map, new AMap.LngLat(data.lng, data.lat))

          }, 800)

          // 清理定时器

          _this.clearedTime(timeout)

        })

      }

    },

    // 清理定时器

    clearedTime(timeout) {

      // timeout返回数值id,整型,可用于 取消 setTimeout 设置的函数

      // 通过$once来监听定时器,在beforeDestroy钩子可以被清除。

      this.$once('hook:beforeDestroy', () => {

        clearTimeout(timeout)

        timeout = null

      })

    },

</script>

特别注意:

需要在vue.config.js文件中,增加vue$: "vue/dist/vue.esm.js",然后重新运行项目即可

configureWebpack: {

    name: name,

    resolve: {

      alias: {       

        vue$: "vue/dist/vue.esm.js",// 增加该行即可

        '@': resolve('src')

      }

    }

  },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值