1、拾取坐标

http://api.map.baidu.com/lbsapi/getpoint/index.html

2、API

http://lbsyun.baidu.com/jsdemo.htm#a5_2

3、实例

function fillbaiduMap(data){
			var tree = $('#select').combotree('tree');
			var node = tree.tree('getSelected');
			// 百度地图API功能
			var map = new BMap.Map("allmap"); // 创建Map实例,
			//美的
			for(var i = 0;i<data.length;i++){
				if(data[i][3] !="" && data[i][4] !=""){
					if(data[i][1] == node.text){
						var point = new BMap.Point(data[i][3],data[i][4]);
						map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
					}
					var markermd = new BMap.Marker(new BMap.Point(data[i][3],data[i][4]));  // 创建标注
					var mdTitle = new BMap.Label(data[i][1], {
					  position : new BMap.Point(data[i][3],data[i][4]),    // 指定文本标注所在的地理位置
					  offset   : new BMap.Size(30, -30)    //设置文本偏移量
					});  // 创建文本标注对象
					mdTitle.setStyle({
						color : "#fff",
						fontSize : "12px",
						height : "20px",
						lineHeight : "20px",
						fontFamily:"微软雅黑",
						borderColor:"rgba(22,83,120,0.5)",
						backgroundColor:"rgba(22,83,120,0.7)"
					});
					map.addOverlay(mdTitle);   
					map.addOverlay(markermd); 
					(function(i){
						var mdinfo = {
						  width : 300,     // 信息窗口宽度
						  height: 60,     // 信息窗口高度
						  title : data[i][1] , // 信息窗口标题
						  enableMessage:true//设置允许信息窗发送短息
						}
						var infoWindow = new BMap.InfoWindow("用电量:"+data[i][2]+"kWh", mdinfo);  // 创建信息窗口对象 
						markermd.addEventListener("click", function(){     
							map.openInfoWindow(infoWindow,new BMap.Point(data[i][3],data[i][4])); //开启信息窗口
						});
					})(i)
				}
			}
			//美的
			//添加地图类型控件
			/*map.addControl(new BMap.MapTypeControl({
				mapTypes: [
					BMAP_HYBRID_MAP,
					BMAP_NORMAL_MAP
				]
			}));*/
			//markerapl.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
		}

4、效果

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐