百度地图JavaScript API开发GIS服务

蔺WIT

已于 2023-10-08 16:21:48 修改

阅读量3.4k

点赞数 8

分类专栏：专业学习笔记 Web开发 WebGIS 文章标签： javascript 前端百度地图 html5 GIS

于 2023-03-12 21:36:22 首次发布

本文链接：https://blog.csdn.net/m0_53156691/article/details/129436237

版权

专业学习笔记同时被 3 个专栏收录

10 篇文章 15 订阅

订阅专栏

Web开发

4 篇文章 0 订阅

订阅专栏

WebGIS

2 篇文章 0 订阅

订阅专栏

百度地图JavaScript API是由JavaScript语言编写的应用程序接口，支持HTTP和HTTPS，免费对外开放。在使用前，需先申请密钥（ak）才可使用。主要分为两种类型的版本：
①JavaScript API GL（使用了WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图）；
②JavaScript API（最新的为v3.0，主要支持2D平面地图，接口使用无次数限制）。

一、申请密钥

登录百度地图开放平台，申请入口在页面上的“API控制台”

在这里插入图片描述

进入控制台左侧的【应用管理】→【我的应用】，点击创建应用，填写表单中的应用名称、应用类型、IP白名单即可。这里创建两个应用，应用类型分别为“服务端”和“浏览器端”，Reference白名单填写“*”；IP白名单填写“0.0.0.0/0”。页面上对此有明确说明。

（ps：创建应用之前，需要完善个人信息，通过百度地图开发者认证）

在配置Referer白名单时，只需要将Referer中的域名部分填写就进去就可以了。如部署在本地的项目，Referer则为localhost；运行在服务器中的项目，则需要填写对应服务器的IP或者域名。——如何配置百度地图应用访问白名单；百度地图AK鉴权说明与白名单设置方法

（创建完成后，即可得到对应的AK，这里需要注意：因新系统升级，自公告之日起，“服务端AK”不再支持浏览器端使用；在浏览器端使用，请选择“浏览器端AK”，例如JavaScript API只支持浏览器类型AK。）
在这里插入图片描述

二、使用BaiduMap JavaScript API

我们可以在官网主页的导航栏选择【开发文档】→【JavaScript API】，自行进行学习，进行HTMl网页地图的设计与配置。

2.1 网页框架

实现一个最简单的显示出百度地图的网页代码（这里使用的是Map2.0版本的API）：

<!DOCTYPE html>
<html>
	<head>
		<!-- <meta charset="utf-8"> -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>BaiduMap_Hello</title>
		<style type="text/css">  
		    html{height:100%}    
		    body{height:100%;margin:0px;padding:0px}    
		    #container{height:100%}    
		</style>
		 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.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,30);
		</script>
	</body>
</html>

运行上面代码结果图：
在这里插入图片描述

这里需要注意，如果直接安装官网示例来写，可能会出现运行结果为空白的情况，是由于引用百度地图API文件版本类型引用方式的问题。解决：

 <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥">
//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
 </script>

2.2 添加控件

官网学习：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/widget
在这里插入图片描述

map.addControl(new BMap.MapTypeControl());// 添加地图类型切换控件 
map.addControl(new BMap.ScaleControl());// 添加比例尺控件
map.addControl(new BMap.CityListControl());	//添加城市选择列表控件
map.addControl(new BMap.ZoomControl());// 添加缩放控件

2.2 实现3D显示

需要使用WebGL版本的地图API，其引用方式如下：

<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>

GL版命名空间为BMapGL，示例：const map = new BMapGL.Map(‘container’);

// GL版命名空间为BMapGL
// 按住鼠标右键，修改倾斜角和角度
var map = new BMapGL.Map("container");// 创建Map实例
map.centerAndZoom(new BMapGL.Point(112.92, 27.91), 19); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
map.setHeading(64.5);
map.setTilt(73);

在这里插入图片描述

2.3 个性化地图

https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/custom
个性化地图，顾名思义用户可对地图进行个性化配置。通过该服务，允许用户将传统默认的地图样式按需配置，自由控制地图元素显隐及对应的元素样式。
用户可以通过个性化地图样式编辑器，按需编辑地图的底图样式，再按相应应用端的功能要求，将样式应用在JavaScript API和地图SDK中。

在这里插入图片描述

map.setMapStyleV2({     
  styleId: '73bcfca1ca6693eec2bb63e2d666af4d'
});

2.3使用开源库

https://lbs.baidu.com/index.php?title=jspopular3.0/openlibrary

👇
“百度地图JavaScript开源库，是一套基于百度地图API二次开发的开源的代码库。目前提供多个lib库，帮助开发者快速实现在地图上添加Marker、自定义信息窗口、标注相关开发、区域限制设置、几何运算、实时交通、检索与公交驾车查询、鼠标绘制工具等功能。”

鼠标绘制工具条库的类参考：http://api.map.baidu.com/library/DrawingManager/1.4/docs/symbols/BMapLib.DrawingManager.html
https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/mouse2draw

<!--加载鼠标绘制工具-->
<script type="text/javascript" src="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="https://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<!--加载检索信息窗口-->
<script type="text/javascript" src="//api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="//api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />

    var overlays = [];
	var overlaycomplete = function(e){
        overlays.push(e.overlay);
    };
    var styleOptions = {
        strokeColor:"red",    //边线颜色。
        fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3,       //边线的宽度，以像素为单位。
        strokeOpacity: 0.8,	   //边线透明度，取值范围0 - 1。
        fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' //边线的样式，solid或dashed。
    }
    //实例化鼠标绘制工具
    var drawingManager = new BMapLib.DrawingManager(map, {
        isOpen: false, //是否开启绘制模式
        enableDrawingTool: true, //是否显示工具栏
        drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
            offset: new BMap.Size(5, 5), //偏离值
        },
        circleOptions: styleOptions, //圆的样式
        polylineOptions: styleOptions, //线的样式
        polygonOptions: styleOptions, //多边形的样式
        rectangleOptions: styleOptions //矩形的样式
    });  
	 //添加鼠标绘制工具监听事件，用于获取绘制结果
    drawingManager.addEventListener('overlaycomplete', overlaycomplete);
    function clearAll() {
		for(var i = 0; i < overlays.length; i++){
            map.removeOverlay(overlays[i]);
        }
        overlays.length = 0   
    }

官网demo：https://lbsyun.baidu.com/jsdemo/demo/f0_7.htm

三、使用百度地图Web服务API

上面用到的JavaScript API都是在用户的浏览器端进行的，不涉及与百度服务器的通信。

两种使用方式：

1. 通过百度提供的API直接调用

百度地图开发平台提供了部分常用的地图服务的直接调用接口，比如搜索附近兴趣点、路线规划等。具体包括：

LocalSearch
TransitRoute
DrivingRoute
WalkingRoute
Geocoder
LocalCity
TrafficControl

LocalSearch 检索POI示例 https://lbs.baidu.com/index.php?title=jspopular3.0/guide/search

var map = new BMap.Map("container");      
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);      
var local = new BMap.LocalSearch(map, {      
    renderOptions:{map: map}      
});      
local.search("天安门");

在这里插入图片描述

2. 提供使用HTTP接口调用服务

https://lbsyun.baidu.com/index.php?title=webapi
在这里插入图片描述
👆
“百度地图Web服务API为开发者提供http/https接口，即开发者通过http/https形式发起检索请求，获取返回json或xml格式的检索数据。用户可以基于此开发JavaScript、C#、C++、Java等语言的地图应用。” 这些API一般都用在服务器端的开发上,使用这些API就需要用到我们之前申请的服务器端的应用类型的AK密钥
开发者可以通过地址传递参数的方式，向百度服务器发起请求，得到返回的指定的信息。

行政区划区域检索示例：

https://api.map.baidu.com/place/v2/search?query=ATM机&tag=银行&region=北京&output=json&ak=您的ak //GET请求

在这里插入图片描述

other：

地理信息可视化开源库：http://mapv.baidu.com/gallery.html
在这里插入图片描述

蔺WIT

关注

8
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
百度地图JavaScript API开发GIS服务

百度地图JavaScript API是由JavaScript语言编写的应用程序接口，支持HTTP和HTTPS，免费对外开放。在使用前，需先申请密钥（ak）才可使用。主要分为两种类型的版本：①JavaScript API GL（使用了WebGL对地图、覆盖物等进行渲染，支持3D视角展示地图）；②JavaScript API（最新的为v3.0，主要支持2D平面地图，接口使用无次数限制）。
复制链接

扫一扫