JavaScript API GL

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

一、申请秘钥

在控制台里选择创建应用

选择浏览器端,白名单输入*

Hello World

我们直接把文档内的代码cv过来,加上秘钥就可以直接使用地图了

<!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>Baidu Map </title><style type="text/css">html {height: 100%}body {height: 100%;margin: 0px;padding: 0px}#container {height: 100%}</style>
</head><body><div id="container"></div>
</body>
<script type="text/javascript"src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=******"></script>
<script>var map = new BMapGL.Map("container");          // 创建地图实例 var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 map.centerAndZoom(point, 15);map.enableScrollWheelZoom(true);
</script></html>

显示地址案例

我们向地图添加标注点和信息窗口

<!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>Baidu Map </title><style type="text/css">html {height: 100%}body {height: 100%;margin: 0px;padding: 0px}#container {height: 100%}</style>
</head><body><div id="container"></div>
</body>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=*****"></script>
<script>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);        // 创建标注
marker.enableDragging();
marker.addEventListener("dragend", function(e){    alert("当前位置：" + e.point.lng + ", " + e.point.lat);
})   map.addOverlay(marker);  var opts = {    width : 250,     // 信息窗口宽度    height: 100,     // 信息窗口高度    title : "这里是天安门"  // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("", opts);  // 创建信息窗口对象
map.openInfoWindow(infoWindow, map.getCenter());       // 打开信息窗口
</script></html>

定位功能

我们可以拖动标注点来获取到标注点的坐标

<!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>Baidu Map </title><style type="text/css">html {height: 100%}body {height: 100%;margin: 0px;padding: 0px}#container {height: 100%}</style>
</head><body><div id="container"></div>
</body>
<script type="text/javascript"src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=******"></script>
<script>var map = new BMapGL.Map("container");          // 创建地图实例 var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 map.centerAndZoom(point, 15);map.enableScrollWheelZoom(true);var point = new BMapGL.Point(116.404, 39.915);var marker = new BMapGL.Marker(point);        // 创建标注   map.addOverlay(marker);marker.enableDragging();    marker.addEventListener("dragend", function(e){    alert("当前位置：" + e.point.lng + ", " + e.point.lat);    })
</script></html>

步行导航

我们已经学会使用标注点了
那么我们就可以创建2个标注点来设计步行路线

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><title>步行路线规划</title><script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=*******"></script><style type="text/css">body,html,#container {width: 100%;height: 100%;overflow: hidden;margin: 0;font-family: "微软雅黑";}</style>
</head><body><div id="container"></div><script type="text/javascript">var points = [];var map = new BMap.Map("container");map.centerAndZoom(new BMap.Point(116.404, 39.915), 14);map.addEventListener('click', function (e) {if(points.length==2){map.clearOverlays()points=[];}var point = new BMap.Point(e.point.lng, e.point.lat)points.push(point)var marker = new BMap.Marker(point);map.addOverlay(marker);if (points.length == 2) {var walking = new BMap.WalkingRoute(map, {renderOptions: {map: map,autoViewport: true}});walking.search(points[0], points[1]);}})</script>
</body></html>

搜索功能

使用local.search()来实现搜索功能

<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 {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}#allmap {width: 100%;height: 500px;}.ipt{margin: 20px auto;width: 350px;}input {font-size: 14px;width: 300px;display: inline-block;}</style><script type="text/javascript" src="//api.map.baidu.com/api?v=3.0&ak=****"></script><title>根据关键字本地搜索</title>
</head><body><div class="ipt"><input type="text"><button>搜索</button></div><div id="allmap"></div>
</body></html>
<script type="text/javascript">// 百度地图API功能var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);var local = new BMap.LocalSearch(map, {renderOptions: { map: map }});var ipt=document.querySelector('input');// console.log(ipt)var btn=document.querySelector('button');btn.onclick=function(){// alert('aa')local.search(ipt.value);ipt.value=''}</script>

地铁路线规划

原理跟地图路线规划一样,添加两个标注点,根据标注点来规划路线

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><title>线路规划</title><script type="text/javascript"src="//api.map.baidu.com/api?type=subway&v=1.0&ak=*****"></script><style type="text/css">#container {height: 100%}</style>
</head><body><div id="container"></div><script type="text/javascript">var subwayCityName = '广州';var list = BMapSub.SubwayCitiesList;var subwaycity = null;for (var i = 0; i < list.length; i++) {if (list[i].name === subwayCityName) {subwaycity = list[i];break;}}// 获取广州地铁数据-初始化地铁图var subway = new BMapSub.Subway('container', subwaycity.citycode);var zoomControl = new BMapSub.ZoomControl({anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT,offset: new BMapSub.Size(10, 100)});subway.addControl(zoomControl);var zoomControl = new BMapSub.ZoomControl({anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT,offset: new BMapSub.Size(10, 100)});subway.addControl(zoomControl);var points = [];subway.addEventListener('tap', function (e) {if (points.length == 0) {var startIcon = new BMapSub.Icon('https://api.map.baidu.com/images/subway/start-bak.png',new BMapSub.Size(50, 80));var marker = new BMapSub.Marker(e.station.name, { icon: startIcon });subway.addMarker(marker);subway.setCenter(e.station.name);subway.setZoom(1);points.push(e.station.name)} else {var startIcon = new BMapSub.Icon('https://api.map.baidu.com/images/subway/end-bak.png',new BMapSub.Size(50, 80));var marker = new BMapSub.Marker(e.station.name, { icon: startIcon });subway.addMarker(marker);subway.setCenter(e.station.name);subway.setZoom(1);points.push(e.station.name)var drct = new BMapSub.Direction(subway);drct.search(points[0], points[1]);subway.clearOverlays()points = []}});</script>
</body></html>

百度地图API的使用(附案例)相关推荐

百度地图API的使用教程以及案例
百度地图API的使用教程以及案例一.注册百度地图:掌握当前的位置在网页显示位置,插入地图拖拽,点击事件. 注意:定位距离公交不关心官网: 点我进入百度地图官网应用场景:网页插入百度地图 ...
小地图案例：通过百度地图API将整个html渲染出地图
文章目录前言一.API是什么? 二.百度的API获取 1.搜索 2.找到API文档 3.找到相对应的代码节点 4.前期配置编写地图代码 5.更改配置项 6.最终效果总结(小Tips) 前言家喻 ...
教你用百度地图API抓取建筑物周边位置、房价信息（附代码）
来源:大数据挖掘DT数据分析本文共2465字,建议阅读5分钟. 本文为大家解读怎样用脚本与百度API的交互,爬取百度地图的数据. 需求描述对于数据挖掘工程师来说,有时候需要抓取地理位置信息,比如统 ...
html百度地图秘钥,自己网页调用百度地图API 附API密钥
百度地图API自定义地图地图生成工具基于百度地图JS api v2.0版本开发,使用请申请密匙. 了解如何申请密匙申请密匙 //创建和初始化地图函数: function initMap(){ cr ...
baidumap api MySQL_百度地图API开发笔记一(基础篇)
什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供了诸 ...
【百度地图API】自行获取区域经纬度的工具
原文:[百度地图API]自行获取区域经纬度的工具摘要:上一章教大家如何建立自己的行政区域地图.这次为大家提供一个,可视化选择区域,并且能自动生成经纬度代码的工具.工具的源代码完全公开,并且做了详尽的 ...
【百度地图API】如何激发手机的高分辨率
[百度地图API]如何激发手机的高分辨率原文:[百度地图API]如何激发手机的高分辨率摘要:不少用户使用百度地图API开发在移动浏览器上的应用时发现,明明自己的手机是高分辨率的,但是显示出来的地图 ...
Vue项目使用百度地图api
目录 1.百度开发者认证 2.创建应用 3.引用百度地图API文件 4.展示地图 1.百度开发者认证进入百度地图开放平台官网,(认证需要身份证号码,人脸识别,手机百度APP,邮箱地址) 注册登录完 ...
引用百度地图API完成热力图
近期肺炎疫情信息闹的火热,就该情况完成来沪人员分布热力图以及标注确诊患者足迹.就开发研究中遇到的问题以及解决方案做一下记录,如下所示: 一.效果示意图简述完成效果:百度地图引入,增加热力图,添加比例 ...

百度地图API的使用(附案例)

文章目录

JavaScript API GL

一、申请秘钥

Hello World

显示地址案例

定位功能

步行导航

搜索功能

地铁路线规划

百度地图API的使用(附案例)相关推荐

最新文章

热门文章