项目中如何引入百度地图API

最新推荐文章于 2025-03-05 15:33:27 发布

原创最新推荐文章于 2025-03-05 15:33:27 发布 · 5.6k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#js #前端 #百度地图api

前端同时被 2 个专栏收录

14 篇文章

订阅专栏

互联网

12 篇文章

订阅专栏

本文介绍了如何在项目中引入百度地图API。首先，通过百度官方网址创建应用并获取API密钥（ak）。然后，在HTML文件中引入地图API，并创建一个div容器展示地图。最后，实例化地图并可选择添加缩放功能。

1.首先进入百度创建应用页面

百度官方网址：http://lbsyun.baidu.com/apiconsole/key/create

2.提交之后会生成自己的应用列表

在这里插入图片描述
此时我们就获取到了地图接口密钥（ak）；

3.页面调用地图api
在.html文件中引入

 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=这里是自己的密钥（ak）"></script>

紧接着创建一个div容器放置地图。

4.实例化地图

// 百度地图API
      var sContent =
          "";
      var map = new BMap.Map("map");
      var point = new BMap.Point(108.949416,34.34419);
      var marker = new BMap.Marker(point);
      var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象
      map.centerAndZoom(point, 16);
      // map.openInfoWindow(infoWindow,point); //开启信息窗口
      map.addOverlay(marker);
      marker.addEventListener("onclick", function(){
//           this.openInfoWindow(infoWindow);
// //图片加载完毕重绘infowindow
//           document.getElementById('imgDemo').onload = function (){
//               infoWindow.redraw();   
//防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
//           }

如果需要缩放再加上这个即可

 var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
      var top_left_navigation = new BMap.NavigationControl(); 
       //左上角，添加默认缩放平移控件var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
      /*缩放控件type有四种类型:
      BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/

      //添加控件和比例尺
      function add_control(){
          map.addControl(top_left_control);
          map.addControl(top_left_navigation);
          map.addControl(top_right_navigation);
      }
      //移除控件和比例尺
      function delete_control(){
          map.removeControl(top_left_control);
          map.removeControl(top_left_navigation);
          // map.removeControl(top_right_navigation);
      }

      add_control();
      delete_control()