Leaflet 入门教程（七）：markers 篇

叁歲伎倆 2024-05-09 16:30 84阅读 0赞

> **还是大剑师兰特**：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

![在这里插入图片描述][4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]

<table> 
 <thead> 
  <tr> 
   <th>No.</th> 
   <th align="left">内容链接</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td align="left">Openlayers <a href="https://dajianshi.blog.csdn.net/article/details/136641287" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126706466" rel="nofollow"> 【源代码+示例300+】 </a></td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td align="left">Leaflet <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126747176" rel="nofollow"> 【源代码+图文示例 150+】 </a></td> 
  </tr> 
  <tr> 
   <td>3</td> 
   <td align="left">Cesium <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/126746759" rel="nofollow"> 【源代码+图文示例200+】 </a></td> 
  </tr> 
  <tr> 
   <td>4</td> 
   <td align="left">MapboxGL<a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow">【入门教程】 </a> - <a href="https://dajianshi.blog.csdn.net/article/details/130108573" rel="nofollow"> 【源代码+图文示例150+】 </a></td> 
  </tr> 
  <tr> 
   <td>5</td> 
   <td align="left">前端就业宝典 <a href="https://blog.csdn.net/cuclife/category_12437862.html" rel="nofollow">【面试题+详细答案 1000+】</a></td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]

#### 文章目录 ####

*   *  一、基本语法
     *  二、示例参考
     *   *  1，设置marker，并可以任意拖动
         *  2，自定义marker图标，每个点设置不同图片
         *  3，实现波动的marker效果
         *  4，添加多个marker方法
         *  5，点击marker，实现跳跃的动画效果
     *  三、注意事项
     *  四、Leaflet 入门教程 -系列文章列表

--------------------

在Leaflet中，`Markers`（标记）是最基本的图元之一，用于在地图上的特定坐标位置显示信息或图标。。

### 一、基本语法 ###

创建一个Marker非常简单，通常需要指定其在地图上的经纬度位置。此外，还可以为其添加弹出窗口（Popup）以显示更多信息，或者自定义其外观。

### 二、示例参考 ###

#### 1，设置marker，并可以任意拖动 ####

[https://dajianshi.blog.csdn.net/article/details/129056368][https_dajianshi.blog.csdn.net_article_details_129056368]

![在这里插入图片描述][7e08b1d9ff204c2b9c21da35794fb05f.gif_pic_center]

#### 2，自定义marker图标，每个点设置不同图片 ####

[https://dajianshi.blog.csdn.net/article/details/126830511][https_dajianshi.blog.csdn.net_article_details_126830511]  
![在这里插入图片描述][d9c1ead465a74594a75c7699ba347e8e.gif_pic_center]

#### 3，实现波动的marker效果 ####

[https://dajianshi.blog.csdn.net/article/details/129983417][https_dajianshi.blog.csdn.net_article_details_129983417]  
![在这里插入图片描述][a95a1846ae2c4629813fcd5146496540.gif_pic_center]

#### 4，添加多个marker方法 ####

[https://dajianshi.blog.csdn.net/article/details/126829317][https_dajianshi.blog.csdn.net_article_details_126829317]  
![在这里插入图片描述][2cae70669555451bad28a40a0cf4dccd.gif_pic_center]

#### 5，点击marker，实现跳跃的动画效果 ####

[https://dajianshi.blog.csdn.net/article/details/129319932][https_dajianshi.blog.csdn.net_article_details_129319932]

![在这里插入图片描述][ca2166a5b78d489eabc70993bcd16d7c.gif_pic_center]

### 三、注意事项 ###

1.  **坐标系统**：Leaflet使用WGS84坐标系（即经纬度），确保你的坐标数据与此相符。
2.  **图标自定义**：默认的Marker图标可以通过`icon`选项自定义，使用`L.Icon`类创建自定义图标。
3.  **性能考虑**：当在地图上添加大量Marker时，考虑使用Marker Clusterer插件来提高性能和用户体验。
4.  **事件处理**：合理利用Marker的事件，如`click`, `mouseover`等，可以增强地图的交互性。
5.  **弹出窗口位置**：默认情况下，弹出窗口会尽量避免遮挡Marker，但也可以通过`autoPan`选项控制是否自动平移地图以适应弹出窗口。
6.  **资源加载**：确保Leaflet的CSS和JS文件已经正确加载，这是显示地图和Marker的基础。

通过以上介绍和示例，你应该能够开始在自己的项目中使用Leaflet的Marker功能了。不断实践和探索，你将能更深入地掌握Leaflet的各种高级用法。

### 四、Leaflet 入门教程 -系列文章列表 ###

*  [Leaflet 入门教程（一）：应该如何学习Leaflet][Leaflet _Leaflet]
 *  [Leaflet 入门教程（二）：Map 篇][Leaflet _Map]
 *  [Leaflet 入门教程（三）：底图加载][Leaflet]
 *  [Leaflet 入门教程（四）：文件加载][Leaflet 1]
 *  [Leaflet 入门教程（五）：文件上传导出][Leaflet 2]
 *  [Leaflet 入门教程（六）：Controls篇][Leaflet _Controls]
 *  [Leaflet 入门教程（七）：markers 篇][Leaflet _markers]
 *  [Leaflet 入门教程（八）：交互事件篇][Leaflet 3]
 *  [Leaflet 入门教程（九）：弹窗][Leaflet 4]
 *  [Leaflet 入门教程（十）：手绘图形][Leaflet 5]
 *  [Leaflet 入门教程（十一）：显示图形][Leaflet 6]
 *  [Leaflet 入门教程（十二）：定位与轨迹][Leaflet 7]
 *  [Leaflet 入门教程（十三）：动画][Leaflet 8]
 *  [Leaflet 入门教程（十四）：数据转换][Leaflet 9]

[4eabd96c56c9464fa4ec4a5ed1785e79.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/a79c7ffdd459462caf31dc056afd30f6.png
[744c5ca9a61140f4b5ebe879fb810b72.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/cfeed37cc1484f80b1b3f6cb60cd922c.png
[https_dajianshi.blog.csdn.net_article_details_129056368]: https://dajianshi.blog.csdn.net/article/details/129056368
[7e08b1d9ff204c2b9c21da35794fb05f.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/a914fdef3abe47f9a402272b50ea9aa1.gif
[https_dajianshi.blog.csdn.net_article_details_126830511]: https://dajianshi.blog.csdn.net/article/details/126830511
[d9c1ead465a74594a75c7699ba347e8e.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/6abbc368da5a4413a17e60a0958ca5ac.gif
[https_dajianshi.blog.csdn.net_article_details_129983417]: https://dajianshi.blog.csdn.net/article/details/129983417
[a95a1846ae2c4629813fcd5146496540.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/82c22fbdc703464d9a7df9539bfa1158.gif
[https_dajianshi.blog.csdn.net_article_details_126829317]: https://dajianshi.blog.csdn.net/article/details/126829317
[2cae70669555451bad28a40a0cf4dccd.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/b23af3cdc45b4718a0ea42e3dcd09aa8.gif
[https_dajianshi.blog.csdn.net_article_details_129319932]: https://dajianshi.blog.csdn.net/article/details/129319932
[ca2166a5b78d489eabc70993bcd16d7c.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/09/b32ebcd97622411a9564e91b07dfe4cb.gif
[Leaflet _Leaflet]: https://dajianshi.blog.csdn.net/article/details/138489067
[Leaflet _Map]: https://dajianshi.blog.csdn.net/article/details/138495338
[Leaflet]: https://dajianshi.blog.csdn.net/article/details/138495282
[Leaflet 1]: https://blog.csdn.net/cuclife/article/details/138495455
[Leaflet 2]: https://dajianshi.blog.csdn.net/article/details/138495510
[Leaflet _Controls]: https://dajianshi.blog.csdn.net/article/details/138495533
[Leaflet _markers]: https://dajianshi.blog.csdn.net/article/details/138495582
[Leaflet 3]: https://dajianshi.blog.csdn.net/article/details/138495642
[Leaflet 4]: https://dajianshi.blog.csdn.net/article/details/138569743
[Leaflet 5]: https://dajianshi.blog.csdn.net/article/details/138569806
[Leaflet 6]: https://dajianshi.blog.csdn.net/article/details/138569856
[Leaflet 7]: https://dajianshi.blog.csdn.net/article/details/138569879
[Leaflet 8]: https://dajianshi.blog.csdn.net/article/details/138569913
[Leaflet 9]: https://dajianshi.blog.csdn.net/article/details/138569938