若要转载请注明出处
本文为原创
作者：injuer
严禁用于商业用途,仅供学习交流
</pre><pre code_snippet_id="368934" snippet_file_name="blog_20140529_1_6382235" name="code" class="html"><!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); 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){ marke.addEventListener("click", function(event){ var overs = map.getOverlays(); var point = null; for(var i = 0; i < overs.length; i++){ if(overs[i] instanceof BMap.Label){ point = new BMap.Point(event.target.getPosition().lng - 0.5 / 1000, event.target.getPosition().lat); if(point.equals(overs[i].getPosition())){ overs[i].show(); }else{ overs[i].hide(); } } } }); 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.hide();map.addOverlay(label); } } var data = new Array(); for(var i = 0; i < 3; i++){ data.push({ lng : 102.711 + (i /1000), lat : 25.05, icon : null, text : "这是内容", title : "这是标题", 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>