百度地图JavaScript API GL

介绍

百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口。

下面通过一个简单的示例，来学习一下快速创建一张“我的地图”，

百度地图的“Hello World”

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I
"></script><style type="text/css">html {height: 100%}body {height: 100%;margin: 0px;padding: 0px}#container {height: 100%}</style></head><body><div id="container"></div><script type="text/javascript">var map = new BMapGL.Map("container");// 创建地图实例 var point = new BMapGL.Point(116.404, 39.915);// 创建点坐标 map.centerAndZoom(point, 15);// 初始化地图，设置中心点坐标和地图级别 </script></body>
</html>

注意

在HTML文档中引入：

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

向地图添加控件

使用Map.addControl()方法向地图添加控件。

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

向地图中添加标注

var content = "label";var label = new BMapGL.Label(content, {       // 创建文本标注position: point,                          // 设置标注的地理位置offset: new BMapGL.Size(10, 20)           // 设置标注的偏移量})  map.addOverlay(label);                        // 将标注添加到地图中

绘制点线面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I
"></script><style type="text/css">html {height: 100%}body {height: 100%;margin: 0px;padding: 0px}#container {height: 100%}</style></head><body><div id="container"></div><script type="text/javascript">var map = new BMapGL.Map("container");// 创建地图实例 // var point = new BMapGL.Point(116.404, 39.915);var point = new BMapGL.Point(113.6648, 34.7835);// 创建点坐标 map.centerAndZoom(point, 17);// 初始化地图，设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放//记录点的数组var lineArr = [];// 创建标注对象并添加到地图  var marker = new BMapGL.Marker(point);map.addOverlay(marker);map.addEventListener("click", e => {var p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);lineArr.push(p);var m = new BMapGL.Marker(p);map.addOverlay(m);});//双击事件map.addEventListener("dblclick", () => {var polyline = new BMapGL.Polyline(lineArr, {strokeColor: "red",strokeWeight: 2,strokeOpacity: 0.5});//显示线map.addOverlay(polyline);})//控件var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件map.addControl(scaleCtrl);var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件map.addControl(zoomCtrl);var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件map.addControl(cityCtrl);</script></body>
</html>

运行结果：

信息窗口

<!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="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script><title>地图展示</title></head><body><div id="allmap"></div></body>
</html>
<script type="text/javascript">// GL版命名空间为BMapGL// 按住鼠标右键，修改倾斜角和角度var map = new BMapGL.Map("allmap"); // 创建Map实例map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放var opts = {width: 250,     // 信息窗口宽度height: 100,    // 信息窗口高度title: "Hello"  // 信息窗口标题}var infoWindow = new BMapGL.InfoWindow("World", opts);  // 创建信息窗口对象map.openInfoWindow(infoWindow, map.getCenter());        // 打开信息窗口
</script>

地理位置与搜索提示

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>我的第一个地图</title><script type="text/javascript"src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I"></script><script src="./jquery.js"></script><style type="text/css">#container {height: 600px;width: 800px;}/*容器地图的宽高  *//* tip定位 */.tip{position: absolute;top:35px;z-index: 10000;background-color:rgba(203, 253, 255, 0.7);}</style></head><body><input type="text" id="inp"><div class="tip"></div><div id="container"></div><!-- 存放地图的容器 --><script type="text/javascript">var map = new BMapGL.Map("container");// 创建地图实例var point = new BMapGL.Point(113.6648, 34.7835);// 创建点坐标map.centerAndZoom(point, 17);// 初始化地图，设置中心点坐标和地图级别map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放//   创建一个本地搜索var local = new BMapGL.LocalSearch(map, {renderOptions: {map: map},});local.search("景点");//当输入框inp 发送动作时候 发送ajax请求到百度 返回键$(function() {$("#inp").on("input", function() {//  输出文本框的的内容// console.log($("#inp").val())$.ajax({url:`https://api.map.baidu.com/place/v2/suggestion?query=${$("#inp").val()}&region=郑州&city_limit=true&output=json&ak=cVqXBY6pTjuDbTDLLOcqidmTSLQtao1I`,dataType: "jsonp",success: function(res) {console.log(res.result);var str = "";res.result.forEach(item => {str += `<p class ="item">${item.name}</p>`})$(".tip").html(str)}})})})//tip添加单击事件 ,执行搜索$('.tip').on("click", ".item", function() {local.search($(this).text());$(".tip").html("");$("#inp").val("");})</script></body>
</html>

运行结果：

百度地图JavaScript API GL相关推荐

百度地图JavaScript API GL—简易行政区划图层
map开发百度地图JavaScript API GL-简易行政区划图层 administrator 2022年6月6日简易行政区划图层更新时间:2022年3月12日简介 DistrictLay ...
百度地图JavaScript API GL 实现车辆轨迹功能
百度地图JavaScript API GL是百度地图提供的一种基于WebGL技术的地图展示方式.它可以在现代浏览器中以更高效的方式呈现3D地图场景,同时支持自定义图层和动画效果,可以应用于各种地图应用 ...
解决百度地图JavaScript API GL v1.0版本重新加载页面
首先我们简单描述一下问题:home 和 about 点击之后可以切换路由,并且home和about都是含有百度地图的页面.再经过多次切换路由之后,页面会重新加载! 在经过多次点击之后,我们打开f12发 ...
百度地图 JavaScript API GL
文章目录一.引入二.添加控件三.绘制点线面四.标注信息五.位置检索一.引入首先获取秘钥 1.进入百度地图官网:https://lbsyun.baidu.com/ 2.注册百度账号 3.首 ...
百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版简介 JavaScript API大众版 JavaScript API功能介绍百度地图Jav ...
百度地图 JavaScript API
文章目录 1.账号申请 2.创建应用 3.使用地图介绍示例 4.具体使用控件个性地图带高度的点(标记地点.覆盖物) 点击事件参考资料: 入门百度地图 JavaScript API | 8月 ...
百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
Java经纬度画轨迹图_利用百度地图JavaScript API绘制运动轨迹
写在前面欢迎访问我的博客如果需要使用百度地图javasript api,需先进行开发者认证,balalalala写上一堆理由之后认证就行,然后创建浏览器端的应用,得到可用的Ak,详情见百度地图开放 ...

百度地图JavaScript API GL

介绍

向地图添加控件

向地图中添加标注

绘制点线面

信息窗口

地理位置与搜索提示

百度地图JavaScript API GL相关推荐

最新文章

热门文章