如何在网页中使用地理位置坐标(经度和纬度)

现在的网页已经不仅仅是纯文字和图片的展示，越来越多的网页需要使用到地图和地理位置，比如地图应用、周边搜索等。而地图应用和周边搜索的基础都是地理位置坐标，这就需要我们学习如何在网页中使用地理位置坐标(经度和纬度)。下面我们就从多个方面详细阐述。

一、浏览器获取地理位置坐标

在我们使用网页中的地理位置坐标前，首先我们需要了解如何获取地理位置坐标。

浏览器提供了一个 `navigator.geolocation`属性，它包含了获取地理位置相关的方法。其中，其中比较常用的是 `getCurrentPosition()` 方法，它可以直接获取当前用户的地理位置坐标。注意：在使用该方法时，需要用户授权。

navigator.geolocation.getCurrentPosition((position) => {
  const latitude = position.coords.latitude; // 获取纬度
  const longitude = position.coords.longitude; // 获取经度
  
  // 将纬度和经度展示到页面
  document.getElementById('latitude').innerHTML = latitude;
  document.getElementById('longitude').innerHTML = longitude;
});

上面的示例代码可以获取用户的地理位置坐标，并将纬度和经度分别展示到页面上。同样的，我们也可以使用 `watchPosition()` 方法来获取用户的持续变化的地理位置坐标，而不是只获取一次。

二、使用地图API展示坐标

获取到地理位置坐标后，我们可以使用地图API将它展示出来。目前比较常用的地图服务商有百度地图、高德地图、谷歌地图等。

下面以百度地图API为例，展示如何在网页中使用地理位置坐标展示地图：

<script src="//api.map.baidu.com/api?v=2.0&ak=密钥"></script>



  



<script>
  const map = new BMap.Map("mapContainer"); // 创建地图实例
  const point = new BMap.Point(longitude, latitude);  // 创建点坐标
  map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
  const marker = new BMap.Marker(point); // 创建标注
  map.addOverlay(marker); // 将标注添加到地图上
</script>

上面的示例代码展示了如何使用百度地图API，在网页中展示地理位置坐标。

三、地理位置搜索

除了展示地理位置坐标，我们还经常需要在网页中进行地理位置搜索，比如搜索当前位置周围的餐厅或商店等。目前比较常用的地理位置搜索服务商有百度地图、高德地图等。

下面以高德地图API为例，展示如何在网页中使用地理位置坐标进行搜索：

<script src="//webapi.amap.com/maps?v=2.0&key=密钥"></script>



  



<script>
  const map = new AMap.Map("mapContainer"); // 创建地图实例
  const point = new AMap.LngLat(longitude, latitude); // 创建点坐标
  AMap.service(["AMap.PlaceSearch"], function () {
    const placeSearch = new AMap.PlaceSearch({ // 创建搜索对象
      pageSize: 10,
      pageIndex: 1,
    });
    placeSearch.searchNearBy("", point, 1000, function (status, result) { // 根据当前位置搜索周边POI
      if (status === "complete" && result.info === "OK") {
        // 展示搜索结果到页面
        result.poiList.pois.forEach((poi) => {
          const name = poi.name; // 获取名称
          const address = poi.address; // 获取地址
          // 将名称和地址展示到页面中
          const p = document.createElement('p');
          p.innerHTML = `名称：${name}，地址：${address}`
          document.getElementById('searchResults').appendChild(p);
        });
      }
    });
  });
</script>

上面的示例代码展示了如何使用高德地图API，在网页中使用地理位置坐标进行搜索，并将搜索结果展示到页面上。