百度地图API已测试

最新推荐文章于 2020-09-04 11:31:57 发布

xuchen_si

最新推荐文章于 2020-09-04 11:31:57 发布

阅读量596

点赞数

本文链接：https://blog.youkuaiyun.com/xuchen_si/article/details/21556653

版权

这篇博客展示了如何利用百度地图API创建一个交互式的地图应用。内容包括设置地图的基本属性，如中心点、缩放级别，添加导航、缩放和比例尺控制，以及创建标记和绘制直线。同时，博客还提及了点击地图获取坐标的功能，但遇到了在IE浏览器中显示问题的挑战。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>
			百度地图应用
		</title>
		<link href="map.css" rel="stylesheet" type="text/css" />
		<script src="http://api.map.baidu.com/api?key=39F3441E2E86BC2D50B3CE74DBCA6653B093C056&v=1.0&services=false">
		</script>
	</head>
	<body>
		<div id="map">
		</div>
		<div id="open">
		</div>
		<script>
			var map = new BMap.Map("map");
			var point = new BMap.Point(116.404, 39.915);
			map.centerAndZoom(point, 6);
			//map.disableDragging();
			var opt = {
				anchor: BMAP_ANCHOR_BOTTOM_LEFT,
				offset: new BMap.Size(10, 10)
			}
			//var kjwg = {type:BMAP_NAVIGATION_CONTROL_SMALL}
			map.addControl(new BMap.NavigationControl(opt)); //显示地图的缩放空间
			map.addControl(new BMap.ScaleControl()); //显示地图的标尺和版权
			map.addControl(new BMap.OverviewMapControl());

			/******实现地图添加一个div按钮实现放大*****/
			/*function ZoomControl(){
	 this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;
	 this.defaultOffset = new BMap.Size(20,20);
	 }
ZoomControl.prototype = new BMap.Control();
ZoomControl.prototype.initialize = function(map){
	var div=document.createElement("div");
	div.appendChild(document.createTextNode("放大"));
	div.style.cursor="pointer";
	div.style.border="1px solid #f00";
	div.style.backgroundColor="white";
	div.οnclick=function(e){
		map.zoomTo(map.getZoom()+3);
		}
		map.getContainer().appendChild(div);
		return div;
	}
var myZoomCtrl= new ZoomControl();
map.addControl(myZoomCtrl);*/
			/******实现地图添加一个div按钮实现放大*****/

			/**添加地图默认标注**/

			/**添加地图默认标注**/
			var x = [116.304, 118.504, 119.404];
			var y = [32.915, 37.915, 35.915];
			for (var i = 0; i < 3; i++) {
				point = new BMap.Point(x[i], y[i]);
				marker = new BMap.Marker(point);
				map.addOverlay(marker);
			}
			/**自定义图片标注**/
			/*function addMarker(point,index){
	var icon = new BMap.Icon("map.gif",new BMap.Size(32,32),{
													 offset:new BMap.Size(10,25),
													 imageOffset:new BMap.Size(0,0-index*25)
													 });
	var marker = new BMap.Marker(point,{icon:icon});
	map.addOverlay(marker);
	}
var bounds=map.getBounds();
var lngSpan=bounds.maxX-bounds.minX;
var latSpan=bounds.maxY-bounds.minY;
for(var i=0;i<10;i++){
	var point=new BMap.Point(bounds.minX+lngSpan*(Math.random()*0.7+0.15),bounds.minY+latSpan*(Math.random()*0.7+0.15));
	addMarker(point,i);
	}*/
			/**自定义图片标注**/

			/**添加信息窗口**/
			/*var opt={
	width:250,
	height:100,
	title:"你好",
	};
var infoWindow=new BMap.InfoWindow("word",opt);
map.openInfoWindow(infoWindow,map.getCenter());***********************此处有问题解决不了/
/**添加信息窗口**/

			/**地图上画直线**/
			var polyline = new BMap.Polyline([new BMap.Point(119.404, 35.915), new BMap.Point(116.304, 32.915), new BMap.Point(118.504, 37.915), new BMap.Point(119.404, 35.915), ], {
				strokeColor: "#336600",
				strokeWeight: 2,
				strokeOpacity: 1
			});
			map.addOverlay(polyline);

			/在ie下面不显示  不知道为什么  有待解决    ie下必须用VML绘制折线 IE不支持此功能
			/**地图上画直线**/

			/**点击点图获取地图上的坐标**/
			var points = [];
			map.addEventListener("click",
			function(e) {
				//此处结合jquery让表单提交到数据库 用于前台的景点坐标打标机  
				//	扩展的是  点击地图就打一个标记到地图上
			});
			/**点击点图获取地图上的坐标**/
			
		</script>
	</body>

</html>