百度地图API开发

其他 2021-12-11 15:06:29 阅读次数: 0

百度地图API开发

获取开发密钥

创建应用
点击创建应用按钮
在这里插入图片描述
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"]
},

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Java_Fly1/article/details/109308655
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022