2. it技术
  3. 百度Api简单使用

百度Api简单使用

it2026-01-09  8
<!DOCTYPE html> <html lang="en"> <!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="//api.map.baidu.com/api?type=webgl&v=1.0&ak=GHXDEbjB7YBYEHkzY0DZjpzEa1I5H7ed"></script> <title>地图展示</title> </head> <body> <h1>Hello world</h1> <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),5); // 初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 map.addControl(new BMap.NavigationControl()); </script>`在这里插入代码片`

map.setZoom(10)//设置地图级别 map.getZoom()// 获取地图级别 map.setCenter(point); // 设置地图中心点 map.getCenter()//获取中心点 var point = new BMapGL.Point(lng, lat);// point对象 通过方法方式设置地图允许的最大最小级别 map.setMinZoom(4); map.setMaxZoom(20); 创建地图实例时，通过opts方式设置地图允许的最大最小级别 var map = new BMapGL.Map(‘container’, { minZoom: 5, maxZoom: 20 }); var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件 显示放大公里数 map.addControl(scaleCtrl); var navi3DCtrl = new BMapGL.NavigationControl3D(); // 添加3D控件 map.addControl(navi3DCtrl); var mapType1 = new BMap.MapTypeControl( { mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP], anchor: BMAP_ANCHOR_TOP_LEFT } );

添加缩略图 var mapType1 = new BMap.MapTypeControl( { mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP], anchor: BMAP_ANCHOR_TOP_LEFT } ); var overView = new BMap.OverviewMapControl(); var overViewOpen = new BMap.OverviewMapControl({isOpen:true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT}); //添加地图类型和缩略图 function add_control(){ map.addControl(mapType1); //2D图，混合图 map.addControl(overView); //添加默认缩略地图控件 map.addControl(overViewOpen); //右下角，打开 } //移除地图类型和缩略图 function delete_control(){ map.removeControl(mapType1); //移除2D图，混合图 map.removeControl(overView); map.removeControl(overViewOpen); }

// 创建点标记 var marker1 = new BMapGL.Marker(new BMapGL.Point(116.404, 39.925)); // 在地图上添加点标记 map.addOverlay(marker1); //点标记可以拖拽 var marker = new BMapGL.Marker(point, { enableDragging: true//可拖拽 }); map.addOverlay(marker); 轨迹视角动画 var path = [{ ‘lng’: 116.297611, ‘lat’: 40.047363 }, { ‘lng’: 116.307223, ‘lat’: 40.056379 }]; var point = []; for (var i = 0; i < path.length; i++) { point.push(new BMapGL.Point(path[i].lng, path[i].lat)); } var pl = new BMapGL.Polyline(point); setTimeout(‘start()’, 3000); function start () { trackAni = new BMapGLLib.TrackAnimation(bmap, pl, { overallView: true, tilt: 30, duration: 20000, delay: 300 }); trackAni.start(); } trackAni.pause();//轨迹暂停 trackAni.continue();//轨迹继续 点击获取经纬度 map.addEventListener(‘click’, function (e) { alert(‘点击位置经纬度：’ + e.latlng.lng + ‘,’ + e.latlng.lat); }); map.setMapType(BMAP_EARTH_MAP); // 设置地图类型为地球模式

// 覆盖区域图层测试 map.addTileLayer(new BMap.PanoramaCoverageLayer()); var stCtrl = new BMap.PanoramaControl(); //构造全景控件 stCtrl.setOffset(new BMap.Size(20, 20)); map.addControl(stCtrl);//添加全景控件 //关键字检索 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); var local = new BMap.LocalSearch(map, { renderOptions:{map: map} }); local.search("景点"); //多关键字本地搜索 var myKeys = ["酒店", "加油站"]; var local = new BMap.LocalSearch(map, { renderOptions:{map: map, panel:"r-result"}, pageCapacity:5 }); local.searchInBounds(myKeys, map.getBounds()); <title>关键字输入提示词条</title> </head> <body> <div id="l-map"></div> <div id="r-result">请输入:<input type="text" id="suggestId" size="20" value="百度" style="width:150px;" /></div> <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 function G(id) { return document.getElementById(id); } var map = new BMap.Map("l-map"); map.centerAndZoom("北京",12); // 初始化地图,设置城市和地图级别。 var ac = new BMap.Autocomplete( //建立一个自动完成的对象 {"input" : "suggestId" ,"location" : map }); ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件 var str = ""; var _value = e.fromitem.value; var value = ""; if (e.fromitem.index > -1) { value = _value.province + _value.city + _value.district + _value.street + _value.business; } str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value; value = ""; if (e.toitem.index > -1) { _value = e.toitem.value; value = _value.province + _value.city + _value.district + _value.street + _value.business; } str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value; G("searchResultPanel").innerHTML = str; }); var myValue; ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件 var _value = e.item.value; myValue = _value.province + _value.city + _value.district + _value.street + _value.business; G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue; setPlace(); }); function setPlace(){ map.clearOverlays(); //清除地图上所有覆盖物 function myFun(){ var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果 map.centerAndZoom(pp, 18); map.addOverlay(new BMap.Marker(pp)); //添加标注 } var local = new BMap.LocalSearch(map, { //智能搜索 onSearchComplete: myFun }); local.search(myValue); } </script>
最新回复(0)