hanzhengyi
/
admin1


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<style type="text/css">
		html,body{height:100%;margin:0px;padding:0px;font-family:"微软雅黑";font-size:14px;}
		#allmap{height:100%;width:100%; margin:0 auto;}
		.optionpanel{margin: 10px auto;}
		#r-result{  margin:0 auto; width:500px; position: absolute; top:0px;}
		.anchorBL {display:none;}
		img
			{
			opacity:0.85; 
			}
		
	</style>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=4FjGxlxzQrIkl7BxwMPl6da5yMxsXwp4"></script>
	<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
	<title>个性底图设置模板Demo页</title>
</head>
<body>
	<div id="allmap"></div>
	<div id="r-result">
		<div class="optionpanel">
			<label>选择主题</label>
			<select id="stylelist" onchange="changeMapStyle(this.value)"></select>
		</div>
	请输入:<input type="text" id="suggestId" size="20" value="上海市闵行区莘松六村-34号楼" style="width:220px;" />
	<input type="button" style="margin-left:20px;height:25px;" value="定位" class="button ui-corner-all" onclick="setPlace2();">	
	</div>   
<div id="searchResultPanel" style=" position: absolute; border:1px solid #C0C0C0; width:220px; height:auto; display:none;"></div>
<div id="Panel1" style=" position: absolute; border:1px solid #C0C0C0;  bottom:0px; left:0px; height:auto;"><img src="./images/bj2.png"></div>
<div id="Panel2" style=" position: absolute; border:1px solid #C0C0C0;  bottom:0px; right:0px; height:auto;"><img src="./images/xx.jpg"></div>	

</body>
</html>
<script type="text/javascript" src="http://lbsyun.baidu.com/custom/stylelist.js"></script>
<script type="text/javascript">
	//初始化模板选择的下拉框
	var sel = document.getElementById('stylelist');
	for(var key in mapstyles){
		var style = mapstyles[key];
		var item = new  Option(style.title,key);
		sel.options.add(item);
	}
	var map = new BMap.Map("allmap");
	window.map = map;
	var point = new BMap.Point(121.48,31.22);

	map.addControl(new BMap.NavigationControl());               // 添加平移缩放控件
	map.addControl(new BMap.ScaleControl());                    // 添加比例尺控件
	map.addControl(new BMap.OverviewMapControl());              //添加缩略地图控件
	map.enableScrollWheelZoom();                            //启用滚轮放大缩小
	map.addControl(new BMap.MapTypeControl());          //添加地图类型控件
	map.disable3DBuilding();
	map.centerAndZoom(point, 9); 
	/*map.addEventListener("click",function(e){
		alert(e.point.lng + "," + e.point.lat);
	});*/

	//代码使用如下,即可. 模板页可以查看http://lbsyun.baidu.com/custom/list.htm      
	//map.setMapStyle({style:'midnight'});

	changeMapStyle('midnight')
	sel.value = 'midnight';

	function changeMapStyle(style){
		map.setMapStyle({style:style});
		$('#desc').html(mapstyles[style].desc);
	}
	
//输入搜索	
		function G(id) {
		return document.getElementById(id);
	}
	
		var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
		{"input" : "suggestId"
		,"location" : map
	});

	ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
	var str = "";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1) {
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
		
		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		}    
		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		G("searchResultPanel").innerHTML = str;
	});

	var myValue;
	ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
	var _value = e.item.value;
		myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
		G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
		
		setPlace();
	});

	function setPlace(){
		map.clearOverlays();    //清除地图上所有覆盖物
		function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			console.log(local.getResults());
			map.centerAndZoom(pp, 19);
			map.addOverlay(new BMap.Marker(pp));    //添加标注
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
		  onSearchComplete: myFun
		});
		local.search(myValue);
	}
function setPlace2(){
	  myValue1=document.getElementById("suggestId").value;
	  console.log(myValue1);
	  map.clearOverlays();
	  function myFun(){
			var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
			console.log(local.getPosition());
			map.centerAndZoom(pp, 19);
			map.addOverlay(new BMap.Marker(pp));    //添加标注
		}
		var local = new BMap.LocalSearch(map, { //智能搜索
		 onSearchComplete: myFun
		});
		local.search(myValue1);
	}	
	
	
	//创建小狐狸
	/*var pt = new BMap.Point(121.37401,31.113346);
	
	var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
	map.addOverlay(marker2);              // 将标注添加到地图中	*/
	var myIcon = new BMap.Icon("./images/1.png", new BMap.Size(30,30));
		var data_info = [[121.37401,31.113346,"地址：上海市闵行区莘松六村34栋"],
		                 [121.37426,31.113455,"地址：上海市闵行区莘松六村33栋"]
		                 ,[121.481152,31.235372,"地址：上海市人民广场"]
		                 ,[121.398378,31.237817 ,"地址：上海市普陀区申汉大厦-c座"]
		                 ,[121.399029,31.240878,"地址：上海市普陀区五芳斋大厦"]
		                 ,[121.254655,31.142278,"地址：xxxx"]
		                 ,[121.223156,31.140878,"地址：zzzzzz"]];
	var opts = {
				width : 250,     // 信息窗口宽度
				height: 80,     // 信息窗口高度
				title : "信息窗口" , // 信息窗口标题
				enableMessage:true//设置允许信息窗发送短息
			   };
	for(var i=0;i<data_info.length;i++){
		var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]),{icon:myIcon});  // 创建标注
		var content = data_info[i][2];
		map.addOverlay(marker);               // 将标注添加到地图中
		addClickHandler(content,marker);
	}
	function addClickHandler(content,marker){
		marker.addEventListener("click",function(e){
			openInfo(content,e)}
		);
	}
	function openInfo(content,e){
		var p = e.target;
		var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
		var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
		map.openInfoWindow(infoWindow,point); //开启信息窗口
	}
	
	
</script>