百度地图 api

时间 2019-12-18 标签百度地图 api

首先在百度开发者中心申请akjavascript

在页面head中引用必要的css样式和js脚本css

<script type="text/javascript" src="http://api.map.baidu.com/api?ak=我的申请的AK&v=2.0&services=false"></script>
<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>

地图展现页面，具体的功能已经注释 java

<body>
	<div id="content" class="content">
		<input type="text" value="" id="keyword" /> <input type="button"
			name="" id="" value="查询" onclick="search()" />
		<div style="width: 600px; height: 500px; border: 0px solid gray"
			id="container"></div>
		<p id="tx"></p>
		<script type="text/javascript">
			//建立Map实例
			var map = new BMap.Map("container");
			var point = new BMap.Point(116.404, 39.915);
			//设置中心点
			map.centerAndZoom(point, 11);
			map.setCurrentCity("北京");
			//添加鼠标滚动缩放
			map.enableScrollWheelZoom();

			//添加缩略图控件
			map.addControl(new BMap.OverviewMapControl({
				isOpen : false,
				anchor : BMAP_ANCHOR_BOTTOM_RIGHT
			}));
			//添加缩放平移控件
			map.addControl(new BMap.NavigationControl());
			//添加比例尺控件
			map.addControl(new BMap.ScaleControl());
			//添加地图类型控件
			map.addControl(new BMap.MapTypeControl());

			var cr = new BMap.CopyrightControl({
				anchor : BMAP_ANCHOR_TOP_RIGHT
			});
			//设置版权控件位置
			var bs = map.getBounds();
			//返回地图可视区域
			cr.addCopyright({
				id : 1,
				content : "<a href='#' style='font-size:16px;'>版权控件</a>",
				bounds : bs
			})
			//添加版权控件
			map.addControl(cr);
			//全景控件
			map.addControl(new BMap.PanoramaControl());
			//是否显示路况提示面板
			var ctrl = new BMapLib.TrafficControl({
				showPanel : false
			});
			ctrl.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);
			map.addControl(ctrl);
			//圆形覆盖物
			var circle = new BMap.Circle(new BMap.Point(116.404, 39.915), 1000,
					{
						fillColor : "red"
					});
			map.addOverlay(circle);

			//设置标注的图标
			//var icon = new BMap.Icon("map-marker-icon.png",new BMap.Size(50,50));
			// 建立标注
			var marker = new BMap.Marker(new BMap.Point(116.404, 39.915));
			//把标注添加到地图上
			map.addOverlay(marker);
			//信息窗口
			var content = "<table>";
			content = content + "<tr><td> 地点：北京市区</td></tr>";
			content = content + "<tr><td> 时间：2016-1-9</td></tr>";
			content += "</table>";
			var infowindow = new BMap.InfoWindow(content);
			marker.addEventListener("mouseover", function() {
				this.openInfoWindow(infowindow);
			});
			marker.addEventListener("mouseout", function() {
				this.closeInfoWindow();
			});
			//点击地图，获取经纬度坐标
			map.addEventListener("click", function(e) {
				document.getElementById("tx").innerHTML = "经度坐标：" + e.point.lng
						+ "  纬度坐标：" + e.point.lat;
			});

			//关键字搜索
			function search() {
				var keyword = document.getElementById("keyword").value;
				var local = new BMap.LocalSearch(map, {
					renderOptions : {
						map : map
					}
				});
				local.search(keyword);
			}
		</script>
	</div>
</body>

实现效果图以下：api

按照惯例，最后附一个百度在线api：http://developer.baidu.com/map/jsdemo.htm#i1_1this

其实，每一个新功能经过api都有详细的demo,因此好的api事半功倍spa