百度Api简单使用

<!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>

猜你喜欢