131：vue+leaflet实现波动的marker效果

在Vue中使用Leaflet实现波动的marker效果，可以通过定时更新marker的位置来实现。以下是一个简单的示例：

1. 首先确保你已经安装了Vue和Leaflet依赖。

npm install leaflet vue2-leaflet

2. 在Vue组件中，创建一个地图并添加marker。

<template>
  <l-map :zoom="zoom" :center="center">
    <l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
    <l-marker :lat-lng="markerLatLng"></l-marker>
  </l-map>
</template>
 
<script>
import { LMap, LTileLayer, LMarker } from 'vue2-leaflet';
import 'leaflet/dist/leaflet.css';
 
export default {
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data() {
    return {
      url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      zoom: 8,
      center: L.latLng(47.313220, -1.319482),
      markerLatLng: L.latLng(47.313220, -1.319482),
      shakeIntensity: 5, // 波动强度
      shakeInterval: 500, // 波动间隔（毫秒）
    };
  },
  mounted() {
    setInterval(this.shakeMarker, this.shakeInterval);
  },
  methods: {
    shakeMarker() {
      const shakeOffset = (Math.random() - 0.5) * this.shakeIntensity;
      this.markerLatLng = this.center.add([shakeOffset, shakeOffset]);
    }
  }
};
</script>
 
<style>
.vue2leaflet-map {
  height: 600px;
}
</style>

在这个示例中，我们定义了一个名为shakeMarker的方法，该方法在每次被调用时产生一个随机的偏移量，并更新marker的位置。通过设置定时器setInterval，我们可以定期调用shakeMarker方法，从而实现marker的波动效果。

确保你已经在Vue组件中正确引入了Leaflet组件，并设置了合适的地图URL和版权信息。调整shakeIntensity和shakeInterval属性可以控制波动的强度和频率。