js调用百度地图api实现标注点和信息标注窗口

最新推荐文章于 2024-08-03 16:53:18 发布

m0_47299340

最新推荐文章于 2024-08-03 16:53:18 发布

阅读量1.5k

点赞数 11

文章标签： javascript

本文链接：https://blog.csdn.net/m0_47299340/article/details/133563628

版权

首先在百度地图开放平台注册登录账号，创建应用获取ak。此处不多说，官网会给提示帮助获取ak。

本示例是在html里实现的，默认定位为北京，点击地图某处便会更新标注点位置和信息窗口内容。地图可以通过鼠标拖拽和滚动滑动控制放大缩小。

图片展示一下吧。
在这里插入图片描述

接下来是代码部分，地址解析器是异步的，直接用变量为空，所以单独封装了一个函数去获取标注点的地理信息。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>地图展示</title>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥"></script>
  <style type="text/css">  
    html{height:100%}    
    body{height:100%;margin:0px;padding:0px}    
    #container{height:100%}    
  </style> 
</head>
<body>
  <div id="container"></div> 
</body>
<script>

  initMap();

  async function initMap() {
    var map = new BMapGL.Map("container"); // 创建地图实例
    var point = new BMapGL.Point(116.404, 39.915); // 创建地理坐标点
    map.centerAndZoom(point, 10); // map.centerAndZoom('北京', 10); 
    map.enableScrollWheelZoom(true);  //开启鼠标滚轮缩放
    // map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
    var address = await getPosition(point);
    // 创建点标记
    var marker = new BMapGL.Marker(point, {
      enableDragging: true
    });
    var opts = {
      width : 250,  // 信息窗口宽度
      height: 100,  // 信息窗口高度
    }
    // 创建图文信息窗口
    var sContent = getContent(point, address);
    // 在地图上添加点标记
    map.addOverlay(marker)
    // 创建信息窗口对象
    var infoWindow = new BMapGL.InfoWindow(sContent, opts);
    // 打开信息窗口
    marker.openInfoWindow(infoWindow);
  
    map.addEventListener('click', async function(e) {
      console.log(e)
      console.log('点击的经纬度：' + e.latlng.lng + ', ' + e.latlng.lat);
      var mercator = map.lnglatToMercator(e.latlng.lng, e.latlng.lat);
      console.log('点的墨卡托坐标：' + mercator[0] + ', ' + mercator[1]);
      map.clearOverlays();
      // 获取点击点的坐标
      var { lng, lat } = e.latlng;
      var point = new BMapGL.Point(lng, lat); // 创建地理坐标点
      var address = await getPosition(point);
  
      // 创建标注对象
      var marker = new BMapGL.Marker(point, {
          enableDragging: true
      });
      // 将标注添加到地图上
      map.addOverlay(marker);
      console.log('address222', address)
      sContent = getContent(point, address);
      // 创建信息窗口对象
      var infoWindow = new BMapGL.InfoWindow(sContent, opts);
      // 打开信息窗口
      marker.openInfoWindow(infoWindow);
    });
  }

  // 处理地址解析异步操作
  function getPosition(point) {
    return new Promise((resolve, reject) => {
      let geoc = new BMapGL.Geocoder(); // // 处理地址解析和逆解析
      geoc.getLocation(point, (result) => {
        let addr = result.addressComponents;
        var full_address = addr.province + addr.city + addr.district + addr.street + addr.streetNumber;
        return resolve(full_address);
      });
    });
  }

  function getContent(point, address) {
    return `<div style='padding-left:10px'>
      经度: ${point.lng}<br>
      纬度: ${point.lat}<br>
      地址: ${address}</div>`;
  }
</script>
</html>