百度地图API开发

迷失的小鹿

墨衍会员 · AI 创作全网分发码龄8年

关注

原创最新推荐文章于 2026-04-17 11:25:43 发布 2.1k 阅读 AI 写同款· GEO 优化 ›

百度地图开发者平台API项目应用 1、进入百度地图开发者平台网站进入web开发 2、注册百度开发者账号 3.阅读开放平台概述 4.创建应用创建完成： 百度地图开放平台 JavaScript API 类参考地址<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style t 阅读详情

百度地图API开发

获取开发密钥
入门实例
去除百度地图中百度的logo和版权
常用的坐标系
添加标注点
百度地图控件的使用
地图覆盖物marker
添加点覆盖物
vue中使用百度地图
- 入门示例
- 百度地图在ie浏览器中不显示

获取开发密钥

创建应用
点击创建应用按钮
在这里插入图片描述
2、填写信息，创建应用

3、创建成功，获取到账号和ak
在这里插入图片描述

入门实例

<!DOCTYPE html>  
<html>
<head>  
<!-- 适应移动端页面展示 -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
/* 设置容器样式 */
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
</style>  
<!-- 引用百度地图API文件 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥">
<!-- v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥" -->
</script>
</head>  
 
<body>  
<!-- 创建地图容器元素 -->
<div id="container"></div> 
<script type="text/javascript">
// 创建地图实例，地图的容器的id container
var map = new BMap.Map("container");
// 创建点坐标  
var point = new BMap.Point(116.404, 39.915);
//15表示地图的放大级别，数字越大，地图放大倍数越大
// 初始化地图，设置中心点坐标和地图级别 
map.centerAndZoom(point, 15);
</script>  
</body>  
</html>

页面显示如下
在这里插入图片描述
官网入门示例

去除百度地图中百度的logo和版权

添加如下css样式在html中

/*去除百度地图的logo*/
.BMap_cpyCtrl{
  display: none!important;
}
.anchorBL {
  display: none!important;
}

常用的坐标系

WGS84：为一种大地坐标系，也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。

GCJ02：又称火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系。

BD09：为百度坐标系，在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标，bd09mc表示百度墨卡托米制坐标。

非中国地区地图，服务坐标统一使用WGS84坐标

添加标注点

var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中

完整代码

<!DOCTYPE html>  
<html>
<head>  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Hello, World</title>  
<style type="text/css">  
/* 设置容器样式 */
html{height:100%}  
body{height:100%;margin:0px;padding:0px}  
#container{height:100%}  
</style>  
<!-- 引用百度地图API文件 -->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥">
<!-- v3.0版本的引用方式：src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥" -->
</script>
</head>  
 
<body>  
<!-- 创建地图容器元素 -->
<div id="container"></div> 
<script type="text/javascript"> 
var map = new BMap.Map("container");
// 创建地图实例  
var point = new BMap.Point(116.404, 39.915);
// 创建点坐标  
map.centerAndZoom(point, 15);
// 初始化地图，设置中心点坐标和地图级别
var marker=new BMap.Marker(point);
map.addOverlay(marker);
//开启鼠标滚动对地图进行缩放
map.enableScrollWheelZoom(true);
var marker = new BMap.Marker(point);        // 创建标注    
map.addOverlay(marker);                     // 将标注添加到地图中 
</script>  
</body>  
</html>

页面上显示
在这里插入图片描述

百度地图控件的使用

平移缩放控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度地图控件实例展示</title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
		<script>
			var map;//地图对象
			function InitMap(){
				map=new BMap.Map("container");
				var point =new BMap.Point(104.06,30.67);//成都的经纬度点
				map.centerAndZoom(point,15);//地图的中心点和方法级别，15表示地图的放大级别，数字越大，放大倍数越大
				map.enableScrollWheelZoom(true);//开启鼠标滚动对地图进行缩放
				map.addControl(new BMap.NavigationControl());//平移缩放控件，默认是在左上角
			}
		</script>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				height: 100%;
				margin: 0;
				padding: 0;
			}
			#container{
				height: 90%;
				width: 100%;
			}
		</style>
	</head>
	<body onload="InitMap();">
		<div id="container"></div>
	</body>
</html>

页面展示如下
在这里插入图片描述
平移缩放控件api(官网介绍)

仅包含平移按钮的平移缩放控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度地图控件实例展示</title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
		<script>
			var map;//地图对象
			function InitMap(){
				map=new BMap.Map("container");
				var point =new BMap.Point(104.06,30.67);//成都的经纬度点
				map.centerAndZoom(point,15);//地图的中心点和方法级别，15表示地图的放大级别，数字越大，放大倍数越大
				map.enableScrollWheelZoom(true);//开启鼠标滚动对地图进行缩放
				var opts={type:BMAP_NAVIGATION_CONTROL_PAN} /*平移缩放控件类型：BMAP_NAVIGATION_CONTROL_PAN（仅包含平移按钮）*/
				map.addControl(new BMap.NavigationControl(opts));//平移缩放控件，默认是在左上角
			}
		</script>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				height: 100%;
				margin: 0;
				padding: 0;
			}
			#container{
				height: 90%;
				width: 100%;
			}
		</style>
	</head>
	<body onload="InitMap();">
		<div id="container"></div>
	</body>
</html>

页面显示
在这里插入图片描述

比例尺控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度地图控件实例展示</title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
		<script>
			var map;//地图对象
			function InitMap(){
				map=new BMap.Map("container");
				var point =new BMap.Point(104.06,30.67);//成都的经纬度点
				map.centerAndZoom(point,15);//地图的中心点和方法级别，15表示地图的放大级别，数字越大，放大倍数越大
				map.enableScrollWheelZoom(true);//开启鼠标滚动对地图进行缩放
				var opts={type:BMAP_NAVIGATION_CONTROL_PAN} /*平移缩放控件类型：BMAP_NAVIGATION_CONTROL_PAN（仅包含平移按钮）*/
				map.addControl(new BMap.NavigationControl(opts));//平移缩放控件，默认是在左上角
				//BMAP_ANCHOR_TOP_LEFT:控件将定位到地图的左上角
				//offset: new BMap.Size(150, 5)控件位置的偏移值
				var opts1={anchor:BMAP_ANCHOR_TOP_LEFT,offset: new BMap.Size(150, 50)}
				map.addControl(new BMap.ScaleControl(opts1))// 添加比例尺控件
			}
		</script>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				height: 100%;
				margin: 0;
				padding: 0;
			}
			#container{
				height: 90%;
				width: 100%;
			}
		</style>
	</head>
	<body onload="InitMap();">
		<div id="container"></div>
	</body>
</html>

页面展示
在这里插入图片描述

地图类型控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度地图控件实例展示</title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
		<script>
			var map;//地图对象
			function InitMap(){
				map=new BMap.Map("container");
				var point =new BMap.Point(104.06,30.67);//成都的经纬度点
				map.centerAndZoom(point,15);//地图的中心点和方法级别，15表示地图的放大级别，数字越大，放大倍数越大
				map.enableScrollWheelZoom(true);//开启鼠标滚动对地图进行缩放
				var opts={type:BMAP_NAVIGATION_CONTROL_PAN,offset: new BMap.Size(100, 450)} /*平移缩放控件类型：BMAP_NAVIGATION_CONTROL_PAN（仅包含平移按钮）*/
				map.addControl(new BMap.NavigationControl(opts));//平移缩放控件，默认是在左上角
				//BMAP_ANCHOR_TOP_LEFT:控件将定位到地图的左上角
				//offset: new BMap.Size(150, 5)控件位置的偏移值
				var opts1={anchor:BMAP_ANCHOR_TOP_LEFT,offset: new BMap.Size(150, 50)}
				map.addControl(new BMap.ScaleControl(opts1))// 添加比例尺控件
				//添加地图类型控件
				//type:控件样式,BMAP_MAPTYPE_CONTROL_DROPDOWN:下拉列表展示
				var opts3={type:BMAP_MAPTYPE_CONTROL_DROPDOWN}
				map.addControl(new BMap.MapTypeControl(opts3));
			}
		</script>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				height: 100%;
				margin: 0;
				padding: 0;
			}
			#container{
				height: 90%;
				width: 100%;
			}
		</style>
	</head>
	<body onload="InitMap();">
		<div id="container"></div>
	</body>
</html>

页面样式
在这里插入图片描述

版权控件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度地图控件实例展示</title>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
		<script>
			var map;//地图对象
			function InitMap(){
				map=new BMap.Map("container");
				var point =new BMap.Point(104.06,30.67);//成都的经纬度点
				map.centerAndZoom(point,15);//地图的中心点和方法级别，15表示地图的放大级别，数字越大，放大倍数越大
				map.enableScrollWheelZoom(true);//开启鼠标滚动对地图进行缩放
				var opts={type:BMAP_NAVIGATION_CONTROL_PAN,offset: new BMap.Size(100, 450)} /*平移缩放控件类型：BMAP_NAVIGATION_CONTROL_PAN（仅包含平移按钮）*/
				map.addControl(new BMap.NavigationControl(opts));//平移缩放控件，默认是在左上角
				//BMAP_ANCHOR_TOP_LEFT:控件将定位到地图的左上角
				//offset: new BMap.Size(150, 5)控件位置的偏移值
				var opts1={anchor:BMAP_ANCHOR_TOP_LEFT,offset: new BMap.Size(150, 50)}
				map.addControl(new BMap.ScaleControl(opts1))// 添加比例尺控件
				//添加地图类型控件
				//type:控件样式,BMAP_MAPTYPE_CONTROL_DROPDOWN:下拉列表展示
				var opts3={type:BMAP_MAPTYPE_CONTROL_DROPDOWN}
				map.addControl(new BMap.MapTypeControl(opts3));
				//添加版权控件
				var cr=new BMap.CopyrightControl({anchor:BMAP_ANCHOR_TOP_RIGHT,offset: new BMap.Size(150, 20)})//设置版权位置
				map.addControl(cr);
				var bs=map.getBounds();//返回地图可视区域
				cr.addCopyright(
				{id:1,
				content:
				"<a href='http://www.baidu.com' target='_bank' style='font-size:20px;background:green;color:#fff;'>百度地图</a>",
				bounds:bs});
			}
		</script>
		<style type="text/css">
			html{
				height: 100%;
			}
			body{
				height: 100%;
				margin: 0;
				padding: 0;
			}
			#container{
				height: 90%;
				width: 100%;
			}
		</style>
	</head>
	<body onload="InitMap();">
		<div id="container"></div>
	</body>
</html>

页面显示
在这里插入图片描述

定位控件

GeolocationControl官网介绍

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
	</head>
	<body>
		<div id="allmap"></div>
		<script type="text/javascript">
			// 创建地图实例  
			var map = new BMap.Map("allmap");
			// 创建点坐标  
			var point = new BMap.Point(116.404, 39.915);
			// 初始化地图，设置中心点坐标和地图级别  
			map.centerAndZoom(point, 15);
			map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
			//添加定位控件
			/* anchor:BMAP_ANCHOR_BOTTOM_LEFT,控件将定位到地图的左下角 */
			/*offset: 控件的水平偏移值 */
			/*showAddressBar: 显示定位信息面板 */
			var opts={anchor:BMAP_ANCHOR_TOP_RIGHT,offset:new BMap.Size(50,50),showAddressBar:true}
			map.addControl(new BMap.GeolocationControl(opts));
		</script>
	</body>
</html>

页面显示
在这里插入图片描述
点击按钮，弹出信息提示框，点允许，定位控件显示定位地点

全景控件

PanoramaControl：负责切换至全景地图的控件
全景图要显示正常需要：1.百度地图api的版本要支持；2.该城市支持全景图

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=16GrycqmnvR3e8XLjkVWGSWGLBSlUfvj"></script>
	</head>
	<body>
		<div id="allmap"></div>
		<script type="text/javascript">
			// 创建地图实例  
			var map = new BMap.Map("allmap");
			// 创建点坐标  
			var point = new BMap.Point(116.404, 39.915);
			// 初始化地图，设置中心点坐标和地图级别  
			map.centerAndZoom(point, 15);
			map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
			//添加定位控件
			/* anchor:BMAP_ANCHOR_BOTTOM_LEFT,控件将定位到地图的左下角 */
			/*offset: 控件的水平偏移值 */
			/*showAddressBar: 显示定位信息面板 */
			var opts={anchor:BMAP_ANCHOR_TOP_RIGHT,offset:new BMap.Size(50,50),showAddressBar:true}
			map.addControl(new BMap.GeolocationControl(opts));
			//添加全景控件
			map.addControl(new BMap.PanoramaControl());
		</script>
	</body>
</html>

页面显示如下
在这里插入图片描述

自定义控件

地图覆盖物marker

官网关于marker的api
官网关于marker的示例
示例代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>marker演示</title>
		<style type="text/css">
		body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		/*去除百度地图的logo*/
		.BMap_cpyCtrl{
		  display: none!important;
		}
		.anchorBL {
		  display: none!important;
		}
		</style>
		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
	</head>
	<body>
		<div id="container"></div>
		<script>
			// 创建地图实例
			var map = new BMap.Map("container");
			// 创建点坐标
			var point = new BMap.Point(104.06, 30.67);//成都的经纬度点
			// 初始化地图，设置中心点坐标和地图级别  
			map.centerAndZoom(point, 15);
			map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
			var point2=new BMap.Point(104.06, 30.67)
			//
			var markerOptions={
				//允许覆盖物在map.clearOverlays方法中被清除,false为不被清除
				enableMassClear:false,
				//开启拖拽功能,true为开启
				enableDragging:true,
				// 是否响应点击事件。默认为true,true为开启点击事件
				enableClicking:true
			}
			var marker=new BMap.Marker(point2,markerOptions); // 创建标注   
			//监听marker事件
			marker.addEventListener('click',function(event){
				console.log(event.type);
				console.log(event.target);
				alert('图像标注被点击了！')
			});
			map.addOverlay(marker);   // 将标注添加到地图中 
			map.clearOverlays();//清除地图上的覆盖物
		</script>
	</body>
</html>

页面展示，点击图标，弹出弹窗
在这里插入图片描述

添加点覆盖物

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 引用百度地图API文件 -->
    <script src="http://api.map.baidu.com/api?type=webgl&v=3.0&ak=您的密钥"></script>
    <style>
        /*去除百度地图的logo*/
        .BMap_cpyCtrl {
            display: none !important;
        }

        .anchorBL {
            display: none !important;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        /*设置容器样式*/
        #mapShow {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="mapShow">
</div>
<script>
  //创建地图实例，地图的容器的id mapShow
  var map = new BMapGL.Map('mapShow')
  //允许地图可被鼠标滚轮缩放，默认禁用
  map.enableScrollWheelZoom(true)
  map.enableScrollWheelZoom(true)
  // 根据城市名设置中心点和地图级别
  map.centerAndZoom('合肥市', 15)
  //信息窗口样式
  var opts = {
    width: 90,     // 信息窗口宽度
    height: 150     // 信息窗口高度
  }
  // 百度坐标系坐标(地图中需要使用这个)
  var bPoints = new Array()
  //
  var pointArray = [];
  let a = {
	  longitude: 117.164,
	  latitude: 31.848,
	  name: '1号',
	  number: '1',
	  location: '1001'
  }
  pointArray.push(a);
  mapResult(pointArray);
  /*地图检索结果*/
  function mapResult (points) {
    map.clearOverlays()//清除所有标记点
    if (points.length > 0) {
      for (let i = 0; i < points.length; i++) {
        // 标注点转换成地图上的点
        var point = new BMapGL.Point(points[i].longitude, points[i].latitude)
        bPoints.push(point) // 添加到百度坐标数组 用于自动调整缩放级别
        // 创建标注
        var marker = new BMapGL.Marker(point)
        var content = '<p>' + [points[i].number + '</p>' + '<p>' + points[i].name] + '</p>' + '<p>' + points[i].location + '</p>'
        // 将标注添加到地图中
        map.addOverlay(marker)
        // 添加标注点点击事件
        addClickHandle(content, marker)
      }
      // 根据点的数组自动调整缩放级别
      var view = map.getViewport(eval(bPoints))
      var mapZoom = view.zoom
      var centerPoint = view.center
      map.centerAndZoom(centerPoint, mapZoom)
    } else {
      map.clearOverlays()//清除所有标记点
      map.centerAndZoom('合肥市', 15)
    }
  }

  // 标注点点击事件
  function addClickHandle (content, marker) {
    marker.addEventListener('click', function (e) {
      openInfo(content, e)
    })
  }

  // 打开信息窗口
  function openInfo (content, e) {
    var p = e.target
    var point = new BMapGL.Point(p.getPosition().lng, p.getPosition().lat)
    var infoWindow = new BMapGL.InfoWindow(content, opts)  // 创建信息窗口对象
    map.openInfoWindow(infoWindow, point) //开启信息窗口
  }
</script>
</body>
</html>

显示结果如下：
在这里插入图片描述

vue中使用百度地图

入门示例

在使用Vue做项目的时候，需要使用百度地图，使用了 vue-baidu-map插件

 npm install vue-baidu-map --save

在vue脚手架搭建下

百度地图在ie浏览器中不显示

1、安装babel-polyfill

 npm install --save babel-polyfill

2、main.js文件引入：

import 'babel-polyfill'

3、在build文件夹下找到webpack.base.conf.js.
将

module.exports = {
entry: {
app: "./src/main.js"
},

替换成

module.exports = {
entry: {
app: ["babel-polyfill", "./src/main.js"]
},

在这里插入图片描述

标签

#js #百度

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

百度地图API开发实战指南本文还有配套的精品资源，点击获取简介：百度地图作为国内主流的地图服务平台，提供了丰富的API和SDK。本指南将深入探讨百度地图开发中的关键知识点，包括覆盖物的使用、定位服务和路线规划。通过研究示例代码或项目模板，开发者可以快速掌握如何在地图上展示丰富内容、获取设备当前位置和实现智能化的导航体验。 1. 百度地图API简介 百度地图API是一个功能强大的地理信息... 阅读详情

9

迷失的小鹿

博客等级

码龄8年 1万+粉丝 199原创

+ 关注

评论 9

成就一亿技术人!

拼手气红包6.0元

还能输入1000个字符

插入表情

表情包

代码片

HTML/XML
objective-c
Ruby
PHP
C
C++
JavaScript
Python
Java
CSS
SQL
其它

查看更多评论

条评论被折叠查看

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。