百度地图JS--2

浏览数：140 / 时间：2015年06月09日

转载请注明出处

本文为原创

作者：injuer

严禁用于商业用途，仅学习交流

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>My JSP 'index.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
		#container{
	        width:100%;
	        height:100%;
		}
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=*******"></script>
  </head>
  
  <body>
    <div id="container"></div>
  </body>
  <script type="text/javascript">
	    var extMap = {
	    	load : function(data, controls){
	    		var map = new BMap.Map("container");
        		map.centerAndZoom(new BMap.Point(data.lng, data.lat), 12);
        		if(null != controls){
        			for(var i = 0; i < controls.length; i++){
        				map.addControl(controls[i]);
        			}
        		}
        		return map;
	    	},
	    	addData : function(map,data){
	    		var marke = null;
	    		var label = null;
	    		var temp = null;
	    		for(var i = 0; i < data.length; i++){
	    			temp = data[i];
	    			marke = new BMap.Marker(new BMap.Point(temp.lng, temp.lat));
	    			marke.setTitle(temp.title);
	    			if(null != temp.icon && "" != temp.icon){
	    				marke.setIcon(new BMap.Icon(temp.icon, new BMap.Size(temp.icon_width, temp.icon_height)));
	    			}
	    			this.addMenu(marke, temp);
	    			this.addMarkerEventListener(map, marke, temp);
	    			this.addLabel(map, marke, temp);
	    		}
	    		return map;
	    	},
	    	addMenu : function(marke, data){
	    		var ms = data.menu;
	    		var m = null;
	    		m = new BMap.ContextMenu();
	    		for(var i = 0; i < ms.length; i++){
	    			m.addItem(new BMap.MenuItem(ms[i].root, ms[i].fun));
	    		}
	    		marke.addContextMenu(m);
	    	},
	    	addMarkerEventListener : function(map, marke, data){
	    		marke.addEventListener("click", function(event){
	    			var w = extMap.createWindow(data);
	    			marke.openInfoWindow(w);
    			});
    			map.addOverlay(marke);
	    	},
	    	addLabel : function(map, marke, data){
	    		label = new BMap.Label(data.text);
				label.setPosition(new BMap.Point(data.lng  - 0.5 / 1000, data.lat));
				label.show();
				map.addOverlay(label);
	    	},
	    	createWindow : function(data){
	    		var w = new BMap.InfoWindow(data.des, {
	    			height : 0,
	    			maxWidth : 0,
	    			title : data.title,
	    			enableMessage : true,
	    			message : data.msg
	    		});
	    		return w;
	    	}
	    }
	    
	    var data = new Array();
	    
	    for(var i = 0; i < 3; i++){
	    	data.push({
	    		lng : 102.711 + (i /1000),
	    		lat : 25.05 + (i /1000),
	    		icon : null,
	    		text : "这是内容" + i,
	    		title : "<h5>这是标题</h5>" + i,
	    		des : "这是描述" + i,
	    		msg : "这是短信" + i,
	    		icon_width : 0,
	    		icon_height : 0,
	    		menu : [
	    			{
	    				root : "根目录0",
	    				fun : function(){
	    					alert("点击了根目录0");
	    				},
	    			},
	    			{
	    				root : "根目录1",
	    				fun : function(){
	    					alert("点击了根目录1");
	    				}
	    			},
	    			{
	    				root : "根目录2",
	    				fun : function(){
	    					alert("点击了根目录2");
	    				}
	    			}
	    		]
	    	});
	    }
	    
	    var map = extMap.addData(extMap.load(data[0], [
	    	new BMap.ScaleControl(),
	    	new BMap.OverviewMapControl(),
	    	new BMap.NavigationControl()
	    ]), data);
	    
  </script>
</html>