vue实现创建地图效果

最新推荐文章于 2025-07-19 13:12:42 发布

原创

最新推荐文章于 2025-07-19 13:12:42 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue的个人分享

                                           vue实现创建地图效果
                                              如图：
                      ![此特效加入了时间轴和图层切换的效果，完成一个初步的效果实现，比较适合新手去做 ](https://img-blog.csdnimg.cn/20190719093259627.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lhbmdfQ2hhbmcxMjM=,size_16,color_FFFFFF,t_70)
                       以下代码只作一个参考,希望大家可以一些找到灵感！如果需要加入一些效果，可以通过父子组件的方式来实现，只有自己体会了领悟了才是自己的
                       
                      <template>
					<div class="vue-leaflet">  
					 <l-map  :zoom="zoom" :center="center">
 						<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
 						<l-marker :lat-lng="marker">
  						 <l-popup :content="text"></l-popup>
 						</l-marker>   
 						 </l-map> <!--    <div id="timePlay"></div>-->   
  						<TimePlay></TimePlay> <!--    <Map></Map>-->