百度地图查看经纬度

一、获取经纬度的方法

要实现查看经纬度的功能，首先需要获取经纬度。在百度地图中，获取经纬度的方法主要有两种：

1. 点击地图获取经纬度
2. 通过地址解析获取经纬度

点击地图获取经纬度是最常用的方法，在百度地图API中也提供了相应的事件监听方法。比如，我们可以监听地图的click事件，在事件回调函数中获取当前点击的经纬度：

map.addEventListener("click", function(e){
  var lng = e.point.lng;
  var lat = e.point.lat;
  alert("当前点击的经度为：" + lng + "，纬度为：" + lat);
})

而通过地址解析获取经纬度，则需要使用百度地图提供的地址解析服务。具体实现方法请参考百度地图开发文档。

二、展示经纬度的方法

获取到经纬度之后，我们需要将其展示出来。在网页中，展示经纬度的方式有多种，可以通过表格、拼接字符串等方式展示。以下代码展示了如何通过表格展示经纬度：

var table = document.createElement("table");
var tr1 = document.createElement("tr");
var td11 = document.createElement("td");
td11.innerText = "经度：";
var td12 = document.createElement("td");
td12.innerText = lng;
tr1.appendChild(td11);
tr1.appendChild(td12);
var tr2 = document.createElement("tr");
var td21 = document.createElement("td");
td21.innerText = "纬度：";
var td22 = document.createElement("td");
td22.innerText = lat;
tr2.appendChild(td21);
tr2.appendChild(td22);
table.appendChild(tr1);
table.appendChild(tr2);
document.body.appendChild(table);

三、完整代码示例

下面展示的是一个完整的代码示例，其中包括了获取经纬度和展示经纬度的功能。请在HTML文件中引入百度地图API，并将AK值替换成你自己的AK值。

  
  
  
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的AK值"></script>


  点击获取经纬度
  
  

  <script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

    function getLatLng() {
      map.addEventListener("click", function(e){
        var lng = e.point.lng;
        var lat = e.point.lat;
        showLatLng(lng, lat);
      })
    }

    function showLatLng(lng, lat) {
      var table = document.createElement("table");
      var tr1 = document.createElement("tr");
      var td11 = document.createElement("td");
      td11.innerText = "经度：";
      var td12 = document.createElement("td");
      td12.innerText = lng;
      tr1.appendChild(td11);
      tr1.appendChild(td12);
      var tr2 = document.createElement("tr");
      var td21 = document.createElement("td");
      td21.innerText = "纬度：";
      var td22 = document.createElement("td");
      td22.innerText = lat;
      tr2.appendChild(td21);
      tr2.appendChild(td22);
      table.appendChild(tr1);
      table.appendChild(tr2);
      document.body.appendChild(table);
    }
  </script>