调用百度地图

最新推荐文章于 2024-10-06 06:13:14 发布

zn呐.

最新推荐文章于 2024-10-06 06:13:14 发布

阅读量164

点赞数 1

文章标签： html5

本文链接：https://blog.csdn.net/zndeID_/article/details/142652857

版权

1、申请百度账号，注册百度地图开发者账号，申请ak

百度地图开发平台

进入百度地图官方文档，点击控制台，之后点击我的应用，创建应用，可以得到自己的ak

2、参考开发者文档，可以写一个简单的地图


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        height: 100%;
      }
      body {
        height: 100%;
        margin: 0px;
        padding: 0px;
      }
      #container {
        height: 100%;
      }
    </style>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=kackrPZR1Af2kthM21IR6qV68LMzBv1e"
    ></script>
  </head>
  <body>
     <!-- 必须要写一个容器，用来展示地图 -->
    <div id="container"></div>
    <script>
      var map = new BMapGL.Map("container"); // 创建地图实例
      var point = new BMapGL.Point(116.404, 39.915); // 设置中心点坐标
      map.centerAndZoom(point, 15); // 地图初始化，设置地图展示级别
    </script>
  </body>
</html>

3、其他配置（一部分）

map.enableScrollWheelZoom 鼠标滚轮缩放
map.setHeading 设置地图旋转角度
map.setTilt 设置地图倾斜角度
map.addControl 给地图添加控件
map.addOverlay 添加标注
marker.addEventListener 监听标注事件
map.setMapType 设置地图类型

<body>
    <!-- 写一个容器来展示地图 -->
    <div id="container"></div>
    <script>
      var map = new BMapGL.Map("container"); // 创建地图实例
      var point = new BMapGL.Point(116.404, 39.915); // 设置中心点坐标
      map.centerAndZoom(point, 15); // 地图初始化，设置地图展示级别
      map.addControl(new BMapGL.LocationControl()); // 获取定位

      
      // 添加标注
      var marker = new BMapGL.Marker(point);
      map.addOverlay(marker);

      // 添加信息窗口
      var opts = {
        width: 200,
        height: 100,
        title: "地点",
      };
      var infoWindow = new BMapGL.InfoWindow("天安门", opts);
      map.openInfoWindow(infoWindow, point);

      // 添加事件
      map.addEventListener("click", function (e) {
        // alert("click");
        map.openInfoWindow(infoWindow, point);
      });
    </script>
  </body>

4、地址解析与逆地址解析

<body>
    <!-- 写一个容器来展示地图 -->
    <div id="container"></div>
    <script>
      var map = new BMapGL.Map("container"); // 创建地图实例
      var point = new BMapGL.Point(116.404, 39.915); // 设置中心点坐标
      map.centerAndZoom(point, 15); // 地图初始化，设置地图展示级别
      map.addControl(new BMapGL.LocationControl()); // 获取定位

      // 地址解析
      var myGeo = new BMapGL.Geocoder();
      myGeo.getPoint("河南省信阳市光山县晏河乡", function (point) {
        if (point) {
          map.centerAndZoom(point, 16);
          map.addOverlay(
            new BMapGL.Marker(point)
          );
        } else {
          alert("您选择的地址没有解析到结果！");
        }
      }, "河南省");

      // 逆地址解析
      var myGeo = new BMapGL.Geocoder();
      myGeo.getLocation(point, function (res) {
        if (res) {
          alert(res.address);
        }
      });
    </script>
  </body>