下面我将为您详细讲解使用jQuery根据纬度经度查看地图的处理程序。

准备工作

在使用jQuery根据纬度经度查看地图前，需要引入地图API。这里我们选用比较常用的百度地图API。

<!-- 引入百度地图API -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

其中ak是您申请的百度地图API的密钥。

创建地图容器

首先需要在HTML中创建地图容器，用于显示地图。

<div id="mapContainer" style="width: 100%; height: 300px;"></div>

其中id为mapContainer，style中设置了容器宽度和高度。

初始化地图

在js代码中通过百度地图API初始化地图，并把它显示在地图容器中。

// 初始化地图
var map = new BMap.Map("mapContainer");
// 创建点坐标
var point = new BMap.Point(经度, 纬度);
// 地图缩放级别
map.centerAndZoom(point, 15);
// 显示缩放控件
map.addControl(new BMap.NavigationControl());
// 显示比例尺控件
map.addControl(new BMap.ScaleControl());
// 显示地图类型控件
map.addControl(new BMap.MapTypeControl());
// 添加标注
var marker = new BMap.Marker(point);
map.addOverlay(marker);

其中，经度和纬度是要查看的地图位置坐标。

上面的代码，首先通过new BMap.Map创建了一个地图对象，并指定了地图容器的id。然后通过new BMap.Point创建了一个地图坐标点。接着，通过map.centerAndZoom设置地图的中心点和缩放级别，使地图初次加载时能够显示我们想要查看的地理位置。map.addControl分别添加了地图的缩放控件、比例尺控件和地图类型控件。最后，通过new BMap.Marker和map.addOverlay创建了一个标注，标注的位置和地图缩放级别已经在前面设置好了。

示例说明1

假设我们要查看的地理位置是在浙江省杭州市西湖区华星路36号，该地的经纬度为经度：120.131436，纬度：30.274084。

下面的示例代码可以根据经纬度初始化地图并添加标注，使地图显示在网页中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>百度地图示例</title>
    <!-- 引入百度地图API -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
  </head>
  <body>
    <!-- 地图容器 -->
    <div id="mapContainer" style="width: 100%; height: 300px;"></div>
    <script>
      // 初始化地图
      var map = new BMap.Map("mapContainer");
      // 创建点坐标
      var point = new BMap.Point(120.131436, 30.274084);
      // 地图缩放级别
      map.centerAndZoom(point, 15);
      // 显示缩放控件
      map.addControl(new BMap.NavigationControl());
      // 显示比例尺控件
      map.addControl(new BMap.ScaleControl());
      // 显示地图类型控件
      map.addControl(new BMap.MapTypeControl());
      // 添加标注
      var marker = new BMap.Marker(point);
      map.addOverlay(marker);
    </script>
  </body>
</html>

示例说明2

假设我们现在要在一个表格中显示多个地址，并提供对应的地图链接。可以通过给表格中每个地址添加一个data-lng和data-lat属性来存储地址对应的经纬度。然后在页面中通过jQuery遍历表格中的每个地址，并根据经纬度生成地图链接。通过点击该链接，可以跳转到对应的地图页面。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>多个地址查看地图示例</title>
    <!-- 引入百度地图API -->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
    <!-- 引入jQuery库 -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  </head>
  <body>
    <!-- 地址列表 -->
    <table>
      <thead>
        <tr>
          <th>地址</th>
          <th>查看地图</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-lng="120.131436" data-lat="30.274084">浙江省杭州市西湖区华星路36号</td>
          <td><a href="javascript:;" class="view-map">查看地图</a></td>
        </tr>
        <tr>
          <td data-lng="121.479056" data-lat="31.235791">上海市浦东新区浦东南路855号</td>
          <td><a href="javascript:;" class="view-map">查看地图</a></td>
        </tr>
        <tr>
          <td data-lng="116.481488" data-lat="39.994825">北京市朝阳区东三环北路8号恒基中心</td>
          <td><a href="javascript:;" class="view-map">查看地图</a></td>
        </tr>
      </tbody>
    </table>
    <script>
      // 初始化地图
      var map = new BMap.Map("mapContainer");
      // 地图控件
      map.addControl(new BMap.NavigationControl());
      map.addControl(new BMap.ScaleControl());
      map.addControl(new BMap.MapTypeControl());
      // 遍历表格中的每个地址
      $("table td[data-lng]").each(function() {
        // 获取经纬度
        var lng = $(this).data("lng");
        var lat = $(this).data("lat");
        // 生成地图链接
        var link = $("<a>")
          .attr("href", "javascript:;")
          .text("查看地图")
          .click(function() {
            // 创建点坐标
            var point = new BMap.Point(lng, lat);
            // 地图缩放级别
            map.centerAndZoom(point, 15);
            // 添加标注
            var marker = new BMap.Marker(point);
            map.addOverlay(marker);
            // 打开地图窗口
            var windowWidth = $(window).width();
            var windowHeight = $(window).height();
            var windowTop = (windowHeight - 500) / 2;
            var windowLeft = (windowWidth - 700) / 2;
            var mapWindow = window.open("", "mapWindow", "width=700,height=500,top=" + windowTop + ",left=" + windowLeft);
            mapWindow.document.write('<div id="mapContainer" style="width: 100%; height: 100%;"></div>');
            mapWindow.document.close();
            var map2 = new BMap.Map(mapWindow.document.getElementById("mapContainer"));
            map2.centerAndZoom(point, 15);
            map2.addControl(new BMap.NavigationControl());
            map2.addControl(new BMap.ScaleControl());
            map2.addControl(new BMap.MapTypeControl());
            map2.addOverlay(marker);
          });
        $(this).next().find(".view-map").replaceWith(link);
      });
    </script>
  </body>
</html>

上面的代码中，我们给表格中每个地址添加了data-lng和data-lat属性来记录地址对应的经纬度。使用jQuery遍历表格，对每个地址都生成一个地图链接。通过点击地图链接，会生成一个地图窗口，显示出该位置的地图。在地图窗口中点击地图上的标注，可以查看该地点的详细信息。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery根据纬度经度查看地图处理程序 - Python技术站

jQuery根据纬度经度查看地图处理程序

准备工作

创建地图容器

初始化地图

示例说明1

示例说明2

相关文章