百度地图API使用 (JS案例 Web服务器案例)

最新推荐文章于 2024-07-23 13:57:46 发布
最新推荐文章于 2024-07-23 13:57:46 发布
阅读量2.3k 收藏 25
点赞数 6
分类专栏： 工具插件 文章标签： 定位 java 地图 js web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43636251/article/details/118345445
版权

文章目录

前言

这几天在项目中用到了百度地图这个插件，所以准备花点时间记录一下心得，好东西就要分享出来！

1. 百度地图使用方式

1.1 操作流程

在这里插入图片描述

1.2 申请AK密钥

如果想调用百度地图API,需要先获取一个百度地图API的AK密钥
百度地图API官方文档： https://lbsyun.baidu.com/

在这里插入图片描述

我的需求时web端，所有这里选择了浏览器端。
白名单 上线前使用*号，线上正式ak请设置合理的IP白名单

在这里插入图片描述

2. 技术使用

主要学习: 定位技术、路径规划和导航

2.1 打开JavaScript API

在这里插入图片描述

2.2 点击开发指南中的Hello World

在这里插入图片描述

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>
	    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=iG0Qt0gY2IMtf99aZe0j7d1cNnXxIhwM"></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);
		</script>
	</body>
</html>

3. 常见API

相关API 可以在这里查找 这里只介绍一些常用的

在这里插入图片描述

3.1 开启地图缩放功能

	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

3.2 添加标注

可以给地图中的点添加标注,添加标注的时候要一个point(坐标)对象，把标注添加到坐标位置。

	var marker = new BMap.Marker(point);        // 创建标注    
	map.addOverlay(marker);

3.3 标注添加点击事件

	marker.addEventListener("click", function(){    
	    alert("您点击了标注");    
	});

3.4 推拽标注点

	marker.enableDragging();    
	marker.addEventListener("dragend", function(e){    
	    alert("当前位置：" + e.point.lng + ", " + e.point.lat);    
	})

3.5 信息窗口

	var opts = {    
	    width : 250,     // 信息窗口宽度    
	    height: 100,     // 信息窗口高度    
	    title : "Hello"  // 信息窗口标题   
	}    
	var infoWindow = new BMap.InfoWindow("World", opts);  // 创建信息    
	map.openInfoWindow(infoWindow, map.getCenter());      // 打开信息

4. 案例-JS

4.1 百度坐标

展示地图，当点击地图上的一点时，显示点图标并且弹出当前点的坐标.

<!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>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=iG0Qt0gY2IMtf99aZe0j7d1cNnXxIhwM">
    </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);
	    map.enableScrollWheelZoom(true);
	
	
	
	    //添加地图单击事件
	    map.addEventListener("click", function(e){
	        // 获取经纬度
	        point= new BMap.Point(e.point.lng,e.point.lat)
	        // 创建标记点
	        let marker = new BMap.Marker(point);
	        // 删除标记点
	        map.clearOverlays();
	        // 添加标记点
	        map.addOverlay(marker);
	
	        // 提示层
	        var opts = {
	            width : 250,     // 信息窗口宽度
	            height: 100,     // 信息窗口高度
	            title : "定位信息"  // 信息窗口标题
	        };
	        // 展示信息
	        let info = "当前位置：" + e.point.lng + ", " + e.point.lat;
	        // 创建信息窗口对象
	        var infoWindow = new BMap.InfoWindow(info, opts);
	        // 打开信息窗口
	        map.openInfoWindow(infoWindow, point);
	    })
	</script>
</body>
</html>

在这里插入图片描述

4.2 公司地址

实现地图展示公司位置，并展示提示框介绍

<!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>
	    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=iG0Qt0gY2IMtf99aZe0j7d1cNnXxIhwM">
	    </script>
	</head>
	
	<body>
		<div id="container"></div>
		<script type="text/javascript">
		    //114.51189910433335, 36.58220995988854
		
		    // 展示地图
		    var map = new BMap.Map("container");
		    var point = new BMap.Point(114.51189910433335, 36.58220995988854);
		    map.centerAndZoom(point, 18);
		    map.enableScrollWheelZoom(true);
		
		    //禁止推拽
		    map.disableDragging();
		    // 创建标记点
		    let marker = new BMap.Marker(point);
		    // 添加标记点
		    map.addOverlay(marker);
		    // 提示层
		    var opts = {
		        width : 250,     // 信息窗口宽度
		        height: 100,     // 信息窗口高度
		        title : "定位信息"  // 信息窗口标题
		    };
		    // 展示信息
		    let info = "当前位置：";
		    // 创建信息窗口对象
		    var infoWindow = new BMap.InfoWindow(info, opts);
		    // 打开信息窗口
		    map.openInfoWindow(infoWindow, point);
		</script>
	</body>
</html>

在这里插入图片描述

4.3 路线规划

实现从地图选择的点到鹏泰大厦路径

<!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>
	    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=iG0Qt0gY2IMtf99aZe0j7d1cNnXxIhwM">
	    </script>
	</head>
	
	<body>
		<div id="container"></div>
		<div id='result'>根据起点和终点经纬度驾车导航路线</div>
		<script type="text/javascript">
		    //114.51189910433335, 36.58220995988854
		
		    // 展示地图
		    var map = new BMap.Map("container");
		    var point = new BMap.Point(114.51189910433335, 36.58220995988854);
		    map.centerAndZoom(point, 18);
		    map.enableScrollWheelZoom(true);
		    //添加标记点
		    var marker = new BMap.Marker(point);        // 创建标注
		    map.addOverlay(marker);
		
		    //地图单击事件
		    map.addEventListener("click",function(e){
		        //清除离线
		        map.clearOverlays();
		        //获取点击时的经纬度
		        let p2 = new BMap.Point( e.point.lng,e.point.lat);
		
		        //计算距离
		        var output = "从当前位置到点击的位置驾车需要";
		        var searchComplete = function (results){
		            if (transit.getStatus() != BMAP_STATUS_SUCCESS){
		                return ;
		            }
		            var plan = results.getPlan(0);
		            //获取分钟数
		            output += plan.getDuration(true) + "\n";                //获取时间
		            //获取总距离
		            output += "总路程为：" ;
		            output += plan.getDistance(true) + "\n";             //获取距离
		        }
		        //创建路线
		        var transit = new BMap.DrivingRoute(map, {
		            renderOptions: {map: map},
		            onSearchComplete: searchComplete,
		            onPolylinesSet: function(){
		                setTimeout(function(){alert(output)},"500");
		            }});
		        //生成驾驶路线
		        transit.search(p2, point);
		    })
		</script>
	</body>
</html>

在这里插入图片描述

5. 案例-WEB服务

5.1 IP定位

得到用户请求的IP并返回用户所在的地址.

5.1.1 Controller
@RestController
public class MapController {

    private final String ak = "iG0Qt0gY2IMtf99aZe0j7d1cNnXxIhwM";

    @Autowired
    private RestTemplate restTemplate;

    @GetMapping("/getAddress")
    public Object getAddressUseIP(HttpServletRequest request) throws URISyntaxException {
        //获取本地IP地址
        String ip = request.getRemoteHost();
        ip="106.115.32.5";
        String url = "http://api.map.baidu.com/location/ip?ak="+ak+"&ip="+ip+"&coor=bd09ll";

        //想百度地图发起请求
        ResponseEntity<Map> forEntity = restTemplate.getForEntity(new URI(url), Map.class);
        Map body = forEntity.getBody();
        return  body;
    }
}
5.1.2 主运行入口
@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

    @Bean
    public RestTemplate restTemplate(){
        return new RestTemplate(new OkHttp3ClientHttpRequestFactory());
    }

}
5.1.3 显示图

在这里插入图片描述

5.1.4 文档位置

在这里插入图片描述

5.2 天气查询

5.2.1 Controller
private final String ak = "iG0Qt0gY2IMtf99aZe0j7d1cNnXxIhwM";

@GetMapping("/getWeather")
   public Object getWeather(String code) throws URISyntaxException {
       //获取本地IP地址
       String url = "http://api.map.baidu.com/weather/v1/?district_id="+code+"&data_type=all&ak="+ak1+"";
       //想百度地图发起请求
       ResponseEntity<String> forEntity = restTemplate.getForEntity(new URI(url), String.class);
       return  forEntity;
   }
5.2.2 主运行入口
@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }

    @Bean
    public RestTemplate restTemplate(){
        return new RestTemplate(new OkHttp3ClientHttpRequestFactory());
    }

}
5.2.3 效果图

在这里插入图片描述

5.2.4 文档位置

在这里插入图片描述

5.3 鹰眼轨迹服务

5.3.1 获取鹰眼服务ID(Serivce ID)

在这里插入图片描述
在这里插入图片描述

5.3.2 创建围栏
	@PostMapping("/createFace")
    public String createFace() throws URISyntaxException {
        String url = "http://yingyan.baidu.com/api/v3/fence/createcirclefence";
        LinkedMultiValueMap map = new LinkedMultiValueMap();
        map.add("ak",ak1);
        map.add("service_id",228519);
        map.add("longitude",114.51189910433335);
        map.add("latitude",36.5822099598885);
        map.add("radius",5000);
        map.add("coord_type","bd09ll");
        ResponseEntity<String> forEntity = restTemplate.postForEntity(new URI(url),map, String.class);
        return forEntity.getBody();
    }

在这里插入图片描述

5.3.3 查询围栏
	 @GetMapping("/queryFace")
	 public String queryFace(String ids) throws URISyntaxException {
	      String url = "http://yingyan.baidu.com/api/v3/fence/list";
	      url+="?ak="+ak1;
	      url+="&service_id="+228519;
	      url+="&fence_ids="+ids;
	      ResponseEntity<String> forEntity = restTemplate.getForEntity(new URI(url),String.class);
	      return forEntity.getBody();
	  }

在这里插入图片描述

5.3.4 删除围栏
	@PostMapping("/deleteFace")
    public String deleteFace(String ids) throws URISyntaxException {
        String url="http://yingyan.baidu.com/api/v3/fence/delete";
        LinkedMultiValueMap map = new LinkedMultiValueMap();
        map.add("ak",ak1);
        map.add("service_id",228519);
        map.add("fence_ids",ids);
        ResponseEntity<String> forEntity = restTemplate.postForEntity(new URI(url), map,String.class);
        return forEntity.getBody();
    }

在这里插入图片描述

5.3.5 创建终端
    @PostMapping("/createEntity")
    public String createEntity(String name) throws URISyntaxException {
        String url = "http://yingyan.baidu.com/api/v3/entity/add";
        LinkedMultiValueMap map = new LinkedMultiValueMap();
        map.add("ak",ak1);
        map.add("service_id",228519);
        map.add("entity_name",name);
        ResponseEntity<String> forEntity = restTemplate.postForEntity(new URI(url), map,String.class);
        return forEntity.getBody();
    }

在这里插入图片描述

5.3.6 终端绑定围栏
	@PostMapping("/addFenceEntity")
    public String  addFenceEntity(int fence,String name) throws URISyntaxException {
        String url = "http://yingyan.baidu.com/api/v3/fence/addmonitoredperson";
        LinkedMultiValueMap map = new LinkedMultiValueMap();
        map.add("ak",ak1);
        map.add("service_id",228519);
        map.add("fence_id",fence);
        map.add("monitored_person",name);
        ResponseEntity<String> forEntity = restTemplate.postForEntity(new URI(url), map,String.class);
        return forEntity.getBody();
    }

在这里插入图片描述

5.3.7 轨迹上传
@PostMapping("/addPoint")
    public String  addPoint(String name,double latitude,double longitude) throws URISyntaxException {
        String url = "http://yingyan.baidu.com/api/v3/track/addpoint";
        LinkedMultiValueMap map = new LinkedMultiValueMap();
        map.add("ak",ak1);
        map.add("service_id",228519);
        map.add("entity_name",name);
        map.add("latitude",latitude);
        map.add("longitude",longitude);
        map.add("loc_time",(long)(new Date().getTime()/1000));
        map.add("coord_type_input","bd09ll");
        ResponseEntity<String> forEntity = restTemplate.postForEntity(new URI(url), map,String.class);
        return forEntity.getBody();
    }

在这里插入图片描述
在这里插入图片描述

5.3.8 查询是否在范围内
	@GetMapping("/queryStatus")
    public String queryStatus(String name) throws URISyntaxException {
        String url = "http://yingyan.baidu.com/api/v3/fence/querystatus";
        url+="?ak="+ak1;
        url+="&service_id="+228519;
        url+="&monitored_person="+name;
        ResponseEntity<String> forEntity = restTemplate.getForEntity(new URI(url),String.class);
        return forEntity.getBody();
    }

在这里插入图片描述
在这里插入图片描述

自学之路←_←
关注
专栏目录
小地图案例：通过百度地图API将整个html渲染出地图
bootstrapsayno的博客
07-18 1048
百度地图API接口文档，渲染超简单小地图。
Web地图服务规范之栅格瓦片地图服务：WMTS(WebMapTileService,网络地图瓦片服务)、TMS(TileMapService，瓦片地图服务)和XYZ
weixin_41364246的博客
01-11 4567
Web地图服务规范之栅格瓦片地图服务：WMTS(WebMapTileService,网络地图瓦片服务)、TMS(TileMapService，瓦片地图服务)和XYZ
15个在线地图瓦片URL分享
最新发布
07-23 1100
在“添加图源”界面中，可设置地图名称和地图类型，并务必输入正确的地图URL、地图投影与瓦片大小等相关参数。PC版最大的优点就是可以进行数据下载，还可以导出大图、瓦片和离线包等多种格式，当然也支持地图标注，功能丰富。这里可以填写以上分享的任何一个URL地址，这里以海洋渲染图为例，设置完成之后即可以查看相应的在线地图。》一文中为你分享了10个地图瓦片URL链接，现在再为你分享5个在线的瓦片地图URL图源！本文为你分享了15个在线瓦片地图URL，以及如何将这些URL生成二维码图源及使用的方法。
百度地图开发案例
06-15
基于百度的地图，实现了定位和搜索功能，希望可以帮到大家
百度地图WEB API
04-26
NULL 博文链接：https://huangyongxing310.iteye.com/blog/2369913
百度地图WebAPI
Courage-Hu的专栏
03-01 1595
百度地图WebAPI 调用百度地图WebAPI实现如下周边配套效果 可以点 这里 查看效果 首先要去百度地图开放平台 申请为百度开发者，然后得到服务秘钥(ak) WEB服务API: http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-placeapi 这里还有JS代码和html页面代码的试例: http://lbsyun...
百度地图开发简单案例(源代码)
51互联云
12-24 1648
html{height:100%} body{height:100%;margin:0px;padding:0px} #main{ float:left; height:95%; width:100%; } #result{ float:left; height: 95%; width: 0%; } 无标题文档
百度地图WebGL离线版V1.0示例,包含3D地球模式
02-23
这些功能的实现依赖于JavaScript和WebGL的结合，以及百度地图API的使用。 4. **离线环境支持**：对于开发者而言，离线环境下的测试和调试至关重要。百度地图WebGL离线版V1.0提供了一种方便的方式，让开发者可以在...
百度地图案例
04-19
此外，还需要遵守百度地图API的使用规定，确保合法合规地使用地图服务。 总之，百度地图API为开发者提供了强大的工具，以实现各种地理位置相关的功能。从简单的保存坐标到复杂的多用户位置展示，都可以通过熟练运用...
百度地图API地图描点示例
07-11
百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口，包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务，提供基本地图展现、搜索、定位、逆/地理编码、路线规划、LBS云存储与检索等功能，适用于PC端、移动端、服务器等多种设备，多种操作系统下的地图应用开发。百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，它能够帮助您在网站中构建功能丰富、交互性强的地图应用程序。百度地图API不仅包含构建地图的基本功能接口，还提供了诸如本地搜索、路线规划等数据服务。适用于PC或移动设备端的基于浏览器的开发。JS版本还为用户开放了开源库，简化开发。
百度地图Demo实例
12-27
根据我的博客百度地图的使用写的一个小实例
百度地图开发指南，开发案例详细步骤
09-10
百度地图开发指南，开发案例详细步骤。百度地图开发指南，开发案例详细步骤百度地图开发指南，开发案例详细步骤。
ASP.NET调用百度地图API实例
05-12
ASP.NET调用百度地图API实例是一个典型的Web应用开发案例，主要涉及了两个核心技术：ASP.NET框架和百度地图API。这个实例中，开发者利用ASP.NET的网页编程能力结合百度地图的JavaScript API，实现了动态地在网页上...
jQuery实现百度地图api选择城市地图效果
09-22
这个话题涉及到jQuery库的使用以及百度地图API的集成，下面将详细解释这两个关键知识点。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画设计和Ajax交互。在实现城市地图选择效果时，...
百度地图开发实战案例:根据起点和终点计算路程和时间
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
04-21 1028
终点数据格式 //终点医院数据; var endData = [ {id: 0, name: '南京市第一医院', lng: 118.79073, lat: 32.023645}, {id: 1, name: '南京市红十字医院', lng: 118.798598, lat: 32.033747}, {id: 2, name: '南京京科医院', lng: 118.789758, lat: 32.092045}, {id: 3.
百度地图开发实例文章（一）
weixin_33915554的博客
01-17 463
一 前言 这是百度地图javascript开发系列文章的第一篇，主要讲如何使用百度地图，介绍了如何通过官方给出的demo和开发文档来在百度地图上面做开发，最后我们将通过一个例子成功运行代码。系列文章对百度第三方库的引用方式都是嵌入script标签的形式，对于vue-BMap等组件方式的使用不作为参考，但是方法实例是基本相同的。 二 正文 ...
百度地图开发入门（1）：案例
--Joern的物联领域--
06-08 2820
将我之前的百度地图入门的一些博文分享一下，这里主要系统讲解地图可视化的开发方式具体可以参考这里：https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/getkey最后当你的应用创建好了，就会得到一个服务密钥然后这里是百度地图的API：https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html第一步是需要显示出地图，这里我们使用html原生方式来讲解 以
百度地图web API应用-基础
m0_61940426的博客
08-14 446
Web服务API，坐标转换，IP定位服务，路线规划
百度地图ak密钥分享
07-28
根据引用\[1\]和引用\[2\]的内容，生成百度地图AK密钥需要获取应用的SHA1值。在调试版本中，可以使用指令"keytool -list -v -keystore debug.keystore"来获取SHA1值，密码默认为"android"。而在发布版本中，需要使用对应的keystore来重新配置Key。根据引用\[3\]的内容，填写应用名称、选择应用类型为"Android SDK"，正确填写SHA1和程序包名后，提交即可生成该应用的AK密钥。在同一个AK中，可以填写开发版SHA1和发布版SHA1，这样在整个开发、测试和发布过程中都不需要改动AK。 #### 引用[.reference_title] - *1* *2* *3* [如何注册和获取百度地图的密钥](https://blog.csdn.net/qq_42257666/article/details/120561838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

自学之路←_←

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值