转载请注明出处

本文为原创

作者：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>

百度地图JS--2的更多相关文章

  1. 百度地图--JS版

    百度地图JS版本 ----选择关键字地图展示对应地址---- CSS body, html { width: %; height: %; margin: ; font-family: "微软 ...

  2. 外部引入的js 判断js脚本加载是否完成，完成后执行 相应的动作(以引入百度地图js为例)

    可以使用JQuery的 $.getScript(url,function(){});方法 $.getScript("http://api.map.baidu.com/getscript?v= ...

  3. 百度地图js根据经纬度定位和拖动定位点

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  4. 百度地图js版定位控件

    一 概述 百度地图在最新版已加入浏览器定位控件,个人认为应该是既高德地图更新了一个浏览器也能定位功能后,百度不甘落后自己简简单单,草草写了个这个功能的定位控件 GeolocationControl 这 ...

  5. 百度地图JS API不能使用position:fixed

    用于放置百度地图的dom元素及其任何一级父元素设置position:fixed属性时,js会报如下错误: Uncaught TypeError: Cannot read property 'offse ...

  6. 百度地图js lite api 支持点聚合

    百度地图lite api 是专门为h5 绘制海量点设计的,但是偏偏忽略掉了点聚合的需求,所以需要自己动手,做一次二次改造. 我们知道点聚合需要引入开源库: MarkerClusterer:  http ...

  7. 百度地图js小结

    1.获取javascript API 服务方法,首先申请密钥(ak),才可成功载入APIJS文件. 用法例如以下: <script type="text/javascript" ...

  8. 百度地图 JS API开发Demo01

    百度地图DEMO     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  9. 关于百度地图js api的getCurrentPosition定位不准确的解决方法

    很久之前帮大叔解决了一个gps坐标转换为百度地图坐标的问题.今天大叔又给我讲百度地图定位不准.我查了一下api,用了官方给出的这样一组函数. //创建查询对象 var geolocation = ne ...

  10. 百度地图 js api 实现 line 居中显示

    项目中有个需求需要在百度地图的中心显示画的线,以前用过mapPanto这个方法,传入坐标就可以将地图平移到这个坐标,不过不知道如何获取线的中心点,看了别人的代码,有以下两个函数可以实现这个功能 get ...

随机推荐

  1. SOAP Handler

    概述 SOAP Handler是一个SOAP message的拦截器,它可以拦截进来或出去两个方向的SOAP message,修改并决定是否放行. 例如: 在服务端启用一个handler,拦截请求的m ...

  2. 浮生半日：探究Python字节码

    好吧!“人生苦短,请用Python”,作为python爱好者以及安全从业者,而且最近也碰到了一些这方面的问题,懂点python字节码还是很有必要的. Python是一门解释性语言,它的具体工作流程如下 ...

  3. Windows命令远程执行工具Winexe

    Windows命令远程执行工具Winexe   在对Windows系统执行渗透测试中,通过各种方式可以获取目标主机的用户名和密码.这时,只要对方主机开启文件共享服务,就可以借助Winexe工具远程执行 ...

  4. Requirejs快速使用

    Requirejs是一个简单,实用,强大的前端模块化js库,它遵循AMD这一客户端模块定义规范,使用它能够使我们前端代码更加清晰高效加载,摆脱了以前前端代码杂乱无序的状态. 使用步骤如下: 1.下载r ...

  5. EasyUI学习总结(四)——parser源码分析（转载）

    本文转载自:http://www.cnblogs.com/xdp-gacl/p/4082561.html parser模块是easyloader第一个加载的模块,它的主要作用,就是扫描页面上easyu ...

  6. 【二分】【字符串哈希】【二分图最大匹配】【最大流】XVII Open Cup named after E.V. Pankratiev Stage 14, Grand Prix of Tatarstan, Sunday, April 2, 2017 Problem I. Minimum Prefix

    给你n个字符串,问你最小的长度的前缀,使得每个字符串任意循环滑动之后,这些前缀都两两不同. 二分答案mid之后,将每个字符串长度为mid的循环子串都哈希出来,相当于对每个字符串,找一个与其他字符串所选 ...

  7. 【动态规划】【滚动数组】Educational Codeforces Round 26 D. Round Subset

    给你n个数,让你任选K个,使得它们乘起来以后结尾的0最多. 将每个数的因子2和因子5的数量求出来,记作a[i]和b[i]. 答案就是max{ min{Σa[i],Σb[i]} }(a[i],b[i]是 ...

  8. 【置换群】poj3270 Cow Sorting

    并不应该叫置换群……只是用到了置换而已,并没有群. 题解看这个吧,我就不写了:http://www.cnblogs.com/kuangbin/archive/2012/09/03/2669013.ht ...

  9. bzoj 3790: 神奇项链

    3790: 神奇项链 Description 母亲节就要到了,小 H 准备送给她一个特殊的项链.这个项链可以看作一个用小写字 母组成的字符串,每个小写字母表示一种颜色.为了制作这个项链,小 H 购买了 ...

  10. 研究人员发现绝大部分酷派（Coolpad）手机暗藏后门(转)

    隐私问题被曝光得越来越多,随着物联网的发展,只会变得越来越严重,不过从当前看来 ,国人对隐私的重视度还远没有国外,期待加强对隐私的保护策略.   转自:http://www.freebuf.com/n ...