动感地图！@vuemap/vue-amap 教你高德地图加入动态标记！

2023-11-25 12:26:30

点亮高德地图：动态标记的终极指南

引言

高德地图因其丰富的功能和强大的可定制性而广受欢迎。而动态标记无疑是让地图更加生动、吸引人的利器。本文将深入探讨使用 @vuemap/vue-amap 高德地图组件库添加动态标记的技巧，助你打造令人惊叹的地图体验。

动图加载：让标记动起来

@vuemap/vue-amap 让你能够轻松加载动图，让你的标记动起来。只需将动图的 URL 传递给 icon 属性，就可以实现令人瞩目的效果。

<template>
  <AMapVue 
    :center="center" 
    :zoom="zoom"
  >
    <amap-marker 
      :position="position" 
      :icon="icon"
    />
  </AMapVue>
</template>

<script>
import AMapVue from 'amap-vue'
export default {
  data() {
    return {
      center: [121.48, 31.22],
      zoom: 12,
      position: [121.48, 31.22],
      icon: 'https://www.example.com/icon.gif'
    }
  }
}
</script>

loca 帧动画加载：一帧一帧的动感

loca 帧动画是一种将多张图片连续播放形成动画效果的技术。@vuemap/vue-amap 支持加载 loca 帧动画，让你在标记中呈现流畅的动画。

<template>
  <AMapVue 
    :center="center" 
    :zoom="zoom"
  >
    <amap-marker 
      :position="position" 
      :icon="icon"
    />
  </AMapVue>
</template>

<script>
import AMapVue from 'amap-vue'
export default {
  data() {
    return {
      center: [121.48, 31.22],
      zoom: 12,
      position: [121.48, 31.22],
      icon: 'https://www.example.com/icon.loca'
    }
  }
}
</script>

视频播放：地图上的迷你影院

在标记中播放视频，为你的地图增添一抹互动体验。通过将视频的 URL 传递给 content 属性，你可以让地图上的标记变成一个迷你影院。

<template>
  <AMapVue 
    :center="center" 
    :zoom="zoom"
  >
    <amap-info-window 
      :position="position" 
      :content="content"
    />
  </AMapVue>
</template>

<script>
import AMapVue from 'amap-vue'
export default {
  data() {
    return {
      center: [121.48, 31.22],
      zoom: 12,
      position: [121.48, 31.22],
      content: '<video src="https://www.example.com/video.mp4" autoplay loop></video>'
    }
  }
}
</script>

threejs 加载：3D 世界在你的地图中

threejs 是一个流行的 3D JavaScript 库。@vuemap/vue-amap 让你可以将 threejs 场景加载到地图中，创造出令人惊叹的 3D 效果。

<template>
  <AMapVue 
    :center="center" 
    :zoom="zoom"
  >
    <amap-info-window 
      :position="position" 
      :content="content"
    />
  </AMapVue>
</template>

<script>
import AMapVue from 'amap-vue'
export default {
  data() {
    return {
      center: [121.48, 31.22],
      zoom: 12,
      position: [121.48, 31.22],
      content: `<div id="threejs-container"></div>`
    }
  },
  mounted() {
    const threejsContainer = document.getElementById('threejs-container')
    // 创建 threejs 场景
    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(75, threejsContainer.clientWidth / threejsContainer.clientHeight, 0.1, 1000)
    const renderer = new THREE.WebGLRenderer()
    renderer.setSize(threejsContainer.clientWidth, threejsContainer.clientHeight)
    threejsContainer.appendChild(renderer.domElement)

    // 创建立方体
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
    const cube = new THREE.Mesh(geometry, material)
    scene.add(cube)

    // 渲染场景
    function render() {
      requestAnimationFrame(render)
      renderer.render(scene, camera)
    }
    render()
  }
}
</script>