百度地图 api

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

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

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

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

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

其实，每个新功能通过api都有详细的demo,所以好的api事半功倍

相关文章