字体真棒地图标记

简介

字体真棒（Font Awesome）是一款流行的图标字体，其中包含了丰富的图标库，支持Web字体、SVG、字体文件、JavaScript等多种使用方式。字体真棒地图标记整合了字体真棒中常用的地图图标，方便开发者在地图应用中快速使用，目前支持Leaflet、Mapbox、OpenLayers。

使用方法

安装字体真棒

• 在HTML中引入CSS文件

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-cMu33/5B/KfZR6r5U6/cMAUn9BnZ6xTwel6iyMsh23Gn2az8WfLfxiewqjIgIDzJ1e9GrWlGAKxvHfI24MKYw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  

• 在需要使用的地方使用相应的图标

  <i class="fas fa-map-marker-alt"></i>
  

使用字体真棒地图标记

• 在HTML中引入相应的JavaScript库（以下以Leaflet为例）

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css" integrity="sha512-QQ2NSVJaOpwTJOJ7lEnfjKDD9tnWElgBzLt1Oem/tA14I8yBHHj1OwOAWiiwpYcAHtkZ9z5Z0Rjp+wPDks0r5A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.js" integrity="sha512-6GJb9grWlGgoiB1DoDIDGU/xktbOi8gAvXXiFwH62zfLkY+LTgZb7POuNtPKO/hxD44Bsfi88Qmpo++CUIk2Fg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-cMu33/5B/KfZR6r5U6/cMAUn9BnZ6xTwel6iyMsh23Gn2az8WfLfxiewqjIgIDzJ1e9GrWlGAKxvHfI24MKYw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://unpkg.com/@fortawesome/fontawesome-svg-core@1.2.36/shakable.es.js"></script>
  <script src="./leaflet-fa-markers.min.js"></script>
  

• 使用L.marker增强函数添加图标

  var map = L.map('map').setView([39.906, 116.397], 13);
  L.marker([39.906, 116.397], { icon: L.ExtraMarkers.icon({ icon: 'fas fa-map-marker-alt', markerColor: 'red', shape: 'penta', prefix: 'fa' }) }).addTo(map);
  

• 其他地图库参考相应示例代码

示例

• Leaflet

  

• Mapbox

  

• OpenLayers

  

支持的图标

字体真棒地图标记支持字体真棒中所有的图标，当前版本支持5.15.3，具体图标库可以参考字体真棒官方网站（https://fontawesome.com/icons）。

参考

• 字体真棒官方网站：https://fontawesome.com
• 字体真棒图标库：https://fontawesome.com/icons
• 字体真棒地图标记项目地址：https://github.com/iconfont-cli/font-awesome-marker-sets