maoboxgl vue2 添加一个跳动的marker

要在Vue 2中使用MapboxGL添加一个跳动的marker，可以按照以下步骤进行：

1. 首先，确保已经引入了Vue和MapboxGL库以及相关的依赖文件。

2. 在Vue组件中，创建一个包含地图的容器元素。

<template>
  <div id="map"></div>
</template>

3. 在Vue组件的`mounted`生命周期钩子中，初始化地图并添加marker。

<script>
import mapboxgl from 'mapbox-gl';

export default {
  mounted() {
    mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [lng, lat],
      zoom: zoomLevel
    });

    const marker = new mapboxgl.Marker({
      element: createMarkerElement()
    })
      .setLngLat([lng, lat])
      .addTo(map);

    // 添加跳动动画
    animateMarker(marker);
  },
  methods: {
    createMarkerElement() {
      // 创建自定义标记
      const el = document.createElement('div');
      el.className = 'marker';
      el.style.backgroundImage = 'url(https://example.com/your-marker-icon.png)'; // 替换为您自己的标记图标URL
      el.style.width = '40px';
      el.style.height = '40px';
      el.style.backgroundRepeat = 'no-repeat';
      el.style.backgroundSize = 'cover';
      return el;
    },
    animateMarker(marker) {
      marker.getElement().classList.add('jump-animation');
    }
  }
}
</script>

确保将YOUR_MAPBOX_ACCESS_TOKEN替换为您自己的Mapbox访问令牌，并将lng、lat和zoomLevel替换为地图的初始中心点和缩放级别。

4. 在CSS样式中，创建一个跳动的动画效果。

@keyframes jump {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

.marker {
  animation: jump 1s infinite;
}

5. 在Vue组件中引入所需的CSS样式。

<style>
@import 'mapbox-gl/dist/mapbox-gl.css';

/* 添加您自己的样式 */
</style>

这样，当Vue组件被挂载时，将会初始化MapboxGL地图并在地图上添加一个跳动的marker。记得根据您的需求，调整地图的样式、标记的位置和动画效果。