当前位置：首页 > jquery

jquery 地图

2026-04-08 02:48:47jquery

jQuery 地图插件推荐

jQuery 提供了多种地图插件，可以轻松实现交互式地图功能。以下是几个常用的 jQuery 地图插件及其特点：

jVectorMap

jquery 地图

基于 SVG 的轻量级地图插件，支持国家、地区或自定义地图。
支持动态数据绑定、悬停效果和点击事件。
适合展示统计数据或区域分布。

Google Maps API with jQuery

结合 Google Maps API 和 jQuery 封装库（如 jquery.googlemap）。
支持标记、路径绘制、地理编码等高级功能。
需要 Google API 密钥，适合需要 Google 地图服务的场景。

Leaflet with jQuery

jquery 地图

Leaflet 是一个开源地图库，可与 jQuery 配合使用。
支持图层、标记、弹窗等，适合移动端和桌面端。
插件轻量，扩展性强。

基本实现示例（jVectorMap）

以下是一个简单的 jVectorMap 示例代码，展示世界地图：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jvectormap/2.0.5/jquery-jvectormap.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jvectormap/2.0.5/jquery-jvectormap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jvectormap/2.0.5/jquery-jvectormap-world-mill.js"></script>
</head>
<body>
  <div id="world-map" style="width: 600px; height: 400px;"></div>
  <script>
    $(function() {
      $('#world-map').vectorMap({
        map: 'world_mill',
        backgroundColor: '#a5bfdd',
        regionStyle: {
          initial: { fill: '#f4f4f4' },
          hover: { fill: '#e0e0e0' }
        }
      });
    });
  </script>
</body>
</html>

进阶功能（Google Maps API）

如果需要更复杂的地图功能（如标记、路线），可以结合 Google Maps API：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
  <div id="map" style="width: 600px; height: 400px;"></div>
  <script>
    $(function() {
      const map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 40.7128, lng: -74.0060 },
        zoom: 12
      });
      new google.maps.Marker({
        position: { lat: 40.7128, lng: -74.0060 },
        map: map,
        title: 'New York'
      });
    });
  </script>
</body>
</html>