ZhuHaiGaoXinQuUnmovable/src/pages/map/index.vue

<template>
<div class="layout" :style="{top:showList?'0':'100%'}" @touchmove.prevent>
  <div id="map"></div>
  <div class="map-bottom-layout" :class="{mobile: ismobile}">
    <div class="map-tabs clear" :class="{mobile: ismobile}">
      <template v-if="!isLocal && !ismobile">
        <a class="rad list-pc-icon" @click="tapList()"><i class="iconfont icon-suolve"></i></a>
      </template>
      <template v-if="dmodel && dmodel.link">
        <template v-if="ismobile">
          <span v-if="mapTab === 1" @click="goto(dmodel)">
            <i class="iconfont icon-leixing_hangpai"></i>航拍
          </span>
          <span v-if="mapTab === 0" @click="mapTab = 1 && goto(dmodel)">
            <i class="iconfont icon-tuceng"></i>平面
          </span>
        </template>
        <template v-if="!ismobile">
          <a class="rad mar-left" >
              俯视整个{{$route.params.title}}
            </a>
          <a @click="goto(dmodel)" :class="{active: mapTab === 1}" class="rad mar-rigth">
            航拍视角
          </a>
        </template>
      </template>
      <template v-if="!isLocal && ismobile">
        <div class="list-icon" @click="tapList()">
          <i class="iconfont icon-suolve"></i>列图
        </div>
      </template>
    </div>

    <div class="focus-info" v-if="info && ismobile">
      <h3>{{info.name}}</h3>
      <div class="tags">
        <span>{{info.parent}}</span>
      </div>
      <div class="tags">
        <span>{{info.tagType.name}}</span>
      </div>
      <p>{{info.address}}</p>
      <div class="types">
        <i v-for="type in info.showType" :key="type" class="iconfont" :class="'icon-'+type"></i>
      </div>
      <a @click="goto(info)" v-if="info.link || info.data">
          <span>点击</span><span>参观</span>
        </a>
      <a class="nolink" v-else>
          <span>正在</span><span>拍摄</span>
        </a>
    </div>
  </div>

  <imageQuery :introduce="introduce" :name="name" :showAside="true" :screens="screens" @exitHandle="screens = null"/>

  <transition name="fade">
    <div class="guodu" v-if="showWl">
      <video autoplay ref="wlvideo">
        <source :src="`https://culture.4dage.com/demo/videos/${showWl}`">
      </video>
      <div class="jump" @click="showWl = false">跳过</div>
    </div>
  </transition>

</div>
</template>

<script>
import imageQuery from '@/pages/imageQuery'
import browser from '@/util/browser'
import data from '@/data'
const AMap = global.AMap

export default {
  components: {
    imageQuery
  },
  data () {
    return {
      showWl: '',
      cacheMakers: [],
      showDialog: false,
      imgIndex: 0,
      mapTab: 1,
      ismobile: browser.mobile,
      info: null,
      dmodel: {},
      isType: true,
      screens: null,
      showList: false,
      introduce: [],
      name: ''

    }
  },
  computed: {
    isLocal () {
      return this.$isLocal
    }
  },
  methods: {
    grentHtml (item, cls) {
      var $maker = document.createElement('div')

      if (!this.ismobile) {
        var types = item.showType.map(type => `<i class="iconfont icon-${type}"></i>`)

        if (item.link || item.data) {
          $maker.classList.add('link')
        } else {
          $maker.classList.add('nolink')
        }

        $maker.classList.add('maker-info')
        $maker.classList.add('rad')
        cls && $maker.classList.add(cls)
        $maker.innerHTML = `
          <h3>
            <i class="iconfont icon-${item.type}"></i>
            <span>${item.name}</span>
          </h3>
          <div class="content">
            <div><span>${item.parent}</span><span>${item.tagType.name}</span></div>
            <p>${item.address}</p>
            <div class="oper">
              <div>${(item.link || item.data) ? types.join('') : ''}</div>
              <a class='query-image'>${(item.link || item.data) ? '点击参观' : '正在拍摄'}</a>
            </div>
          </div>
        `

        if (item.data) {
          $maker.querySelector('.query-image').addEventListener('click', () => {
            this.queryImage(item)
          })
        }
      } else {
        $maker.classList.add('maker-info-mobile')
        $maker.innerHTML = `
          <div>
            <i class="iconfont icon-dingwei"></i>
            <i class="icon-tub iconfont icon-${item.type}"></i>
          </div>`
      }
      return $maker
    },
    loadding (item, showTitle) {
      this.cacheMakers.forEach(marker => {
        marker.seftadditional.removeSeft()
      })

      let showMaker
      let markers = item.children.map(c => {
        let maker = this.grentMakter([parseFloat(c.lng), parseFloat(c.lat)], c)
        c.name === showTitle && (showMaker = maker)
        return maker
      })

      this.cacheMakers = markers
      showMaker && showMaker.seftadditional.play()
    },
    grentMakter (point, item) {
      let infoWindow, infoDom
      let show = false
      let dom = this.grentHtml(item)
      let position = new global.AMap.LngLat(Number(point[0]), Number(point[1]))
      let marker = new global.AMap.Marker({
        position: position,
        content: dom,
        offset: new global.AMap.Pixel(-80, -30)
      })
      let clickHandle = () => {
        this.goto.bind(this)(item)
      }

      marker.seftadditional = {
        removeSeft: () => {
          marker.seftadditional.pause()
          this.map.remove(marker)
          if (!this.ismobile) {
            infoDom.querySelector('h3').removeEventListener('click', marker.seftadditional.pause)
            infoDom.querySelector('a').removeEventListener('click', clickHandle)
          }
        },
        play: () => {
          this.$bus.$emit('showMaker', dom)
          if (this.ismobile) {
            dom.classList.add('show')
            this.info = item
          } else {
            infoWindow.open(this.map, position)
          }
          this.map.setCenter(position)
          show = true
        },
        pause: () => {
          if (!this.ismobile) {
            infoWindow.close()
          } else {
            dom.classList.remove('show')
            this.info = null
          }
          show = false
        }
      }

      this.$bus.$on('showMaker', showDom => {
        if (dom !== showDom) {
          if (show) {
            marker.seftadditional.pause()
          }
          show = false
        }
      })

      global.AMap.event.addListener(marker, 'click', e => {
        if (!show) {
          this.$router.push({
            name: 'info',
            params: {
              title: this.$route.params.title,
              show: item.name
            }
          })
          // marker.seftadditional.play()
        } else {
          this.$router.push({
            name: 'map',
            params: {
              title: this.$route.params.title
            }
          })
          // marker.seftadditional.pause()
        }
      })

      if (!this.ismobile) {
        infoDom = this.grentHtml(item, 'show')
        infoWindow = new AMap.InfoWindow({
          content: infoDom
        })
        infoDom.querySelector('h3').addEventListener('click', () => {
          this.$router.push({
            name: 'map',
            params: {
              title: this.$route.params.title
            }
          })
          // marker.seftadditional.pause()
        })
        infoDom.querySelector('a').addEventListener('click', clickHandle)
      }
      this.map.add(marker)
      return marker
    },
    initial () {
      let params = this.$route.params
      this.showWl = this.$route.query.isWl ? this.g_showVDRegion[params.title] : ''
      this.$nextTick(() => {
        this.$refs.wlvideo && this.$refs.wlvideo.addEventListener('ended', () => {
          this.showWl = false
        })
      })
      let item = this.dmodel = data.modules.find(item => item.title === params.title)
      if (!item) {
        item = data.types.find(item => item.title === params.title)
      }
      this.loadding(item, params.show)
    },
    tapList () {
      let {params} = this.$route
      // let items, item
      // let tagType

      // if (params.show) {
      //   if (data.types.find(item => item.title === params.title)) {
      //     items = data.types.find(item => item.title === params.title)
      //   } else {
      //     items = data.modules.find(item => item.title === params.title)
      //   }
      //   if (name === 'map' || name === 'info' || name === 'home') {

      //   }
      //   item = items ? items.children.find(item => item.name === params.show) : ''

      //   tagType = item.tagType.name
      // }

      this.$router.push({
        name: params.show ? 'item' : 'list',
        params: !this.isType ? {
          title: params.title,
          type: '全部',
          show: params.show
        } : {
          title: '全部',
          type: params.title,
          show: params.show
        }
      })
    },
    goto (info) {
      if (info.link) {
        let id = null
        Object.keys(data.data).forEach(key => {
          if (data.data[key] === info) {
            id = key
          }
        })
        this.$router.push({
          name: 'external',
          params: {
            url: info.link,
            id: id
          }
        })
      } else if (info.data) {
        this.screens = info.data
        this.introduce = info.introduce
        this.name = info.name
      }
    },
    queryImage (item) {
      this.screens = item.data
      this.introduce = item.introduce
      this.name = item.name
    }
  },
  watch: {
    mapTab (newVal) {
      if (newVal) {
        this.map.remove(this.satellite)
      } else {
        this.map.add(this.satellite)
      }
    },
    showList () {
      if (!this.ismobile) {
        this.$bus.$emit('showaside', true)
      }
    },
    '$route.params.title': {
      handler: function (newVal, oldVal) {
        setTimeout(() => {
          if (newVal !== oldVal) {
            let params = this.$route.params
            let item = data.modules.find(item => item.title === params.title)
            this.isType = false
            if (!item) {
              this.isType = true
              item = data.types.find(item => item.title === params.title)
            }
            this.map.setCenter(item.center)
            this.map.setZoom(item.zoom)
          }
          this.initial()
        })
      },
      immediate: true
    },
    '$route.params.show': function () {
      this.initial()
    }
  },
  mounted () {
    setTimeout(() => {
      this.showList = true
    })
    this.map = new global.AMap.Map('map', {
      mapStyle: 'amap://styles/fresh',
      zoom: 18,
      center: [113.590951, 22.359473]
    })
    this.satellite = new AMap.TileLayer.Satellite()
    this.initial()
  }
}
</script>

<style scoped>
@import url(./style);
</style><style>
@import url(./map_style);
</style>