百度地圖 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