百度地图Api进阶教程-弹出信息窗口5.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百度地图</title>


<script type="text/javascript">
	var iscreatr=false;
	function initialize() {
		//---------------------------------------------基础示例---------------------------------------------
		var map = new BMap.Map("allmap",{minZoom:12,maxZoom:20});            // 创建Map实例
		//map.centerAndZoom(new BMap.Point(116.4035,39.915),15);  //初始化时，即可设置中心点和地图缩放级别。
		map.centerAndZoom("成都",13);                     // 初始化地图,设置中心点坐标和地图级别。
		map.enableScrollWheelZoom(true);//鼠标滑动轮子可以滚动
		

		//---------------------------------------------信息窗口(地图上由此只有1个)---------------------------------------------
		var sContent =
"<h4 style='margin:0 0 5px 0;padding:0.2em 0'>哈哈门</h4>" + 
"<img style='float:right;margin:4px' id='imgDemo' src='http://avatar.csdn.net/4/7/8/1_sd0902.jpg' width='139' height='104' title='哈哈门'/>" + 
"<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>哈哈门坐落在中国北京市中心,故宫的南侧,与哈哈门广场隔长安街相望,是清朝皇城的大门...</p>" + 
"</div>";
		var point = new BMap.Point(104.017287, 30.685906);//默认
		var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象

		map.openInfoWindow(infoWindow,point);



	    //---------------------------------------------创建标注---------------------------------------------
		var point = new BMap.Point(104.117287, 30.685906);//默认
		// 创建标注对象并添加到地图  
		var marker = new BMap.Marker(point);  
		map.addOverlay(marker);  
		

		//---------------------------------------------点击标注弹出信息窗口---------------------------------------------
		var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>哈哈，你看见我啦！我可不常出现哦！</p><p style='font-size:14px;'>看看我是如何添加上来的！</p>");
	
		marker.addEventListener("click", function(e){ 
			this.openInfoWindow(infoWindow);
		});
	
	}
 
	function loadScript() {
	   var script = document.createElement("script");
	   script.src = "http://api.map.baidu.com/api?v=1.4&callback=initialize";
	   document.body.appendChild(script);
	}
 
	window.onload = loadScript;
</script>


</head>
 <body>
	<div id="r-result" style="float:left;width:100px;">打印坐标</div>
	<div id="allmap" style="width: 800px; height: 500px"></div>
</body>
</html>

<script type="text/javascript">
	// 移动到某点 map.panTo(new BMap.Point(116.409, 39.918));  
	 // map.setZoom(14);   //放到到14级
</script>
百度地图Api进阶教程-弹出信息窗口5.html

猜你喜欢
