﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script src="http://api.map.baidu.com/api?key=&amp;v=1.3&amp;services=true" type="text/javascript"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
	<title></title>
	<style type="text/css">
		html,body{margin:0;padding:0;}
		.info_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
		.info_content {font:12px arial,sans-serif;overflow:visible;padding-top:15px;white-space:-moz-pre-wrap;word-wrap:break-word}
	</style>
</head>

<body scroll="no">

<input type="hidden" id="state" value="" />
<input type="hidden" id="identify" value="/*identify*/" />
<input type="hidden" id="point_x" value="/*经度*/" />
<input type="hidden" id="point_y" value="/*纬度*/" />
<input type="hidden" id="map_level" value="/*等级*/" />
<input type="hidden" id="marker_addr" value="" /> 
<input type="hidden" id="marker_animation" value="/*动态*/" /> 
<input type="hidden" id="marker_title" value="/*标题*/" /> 
<input type="hidden" id="marker_content" value="/*内容*/" />
<input type="hidden" id="cj_state" value="" />
<input type="hidden" id="cj_value" value="0" />
<input type="hidden" id="init_points" value="/*初始标记们*/" />

<div style="width:/*宽度*/px;height:/*高度*/px; " id="dituContent"></div>

</body>

<script type="text/javascript">
	var timer;
	var currMarker;
	var state = document.getElementById("state");
	var identify = document.getElementById("identify");
	var point_x = document.getElementById("point_x");
	var point_y = document.getElementById("point_y");
	var map_level = document.getElementById("map_level");
	var marker_addr = document.getElementById("marker_addr");
	var marker_animation = document.getElementById("marker_animation");
	var marker_title = document.getElementById("marker_title");
	var marker_content = document.getElementById("marker_content");
	var cj_state = document.getElementById("cj_state");
	var cj_value = document.getElementById("cj_value");
	var init_points = document.getElementById("init_points");
	
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
		if(identify.value > -1) {
			if(init_points.value != ""){
				var arys = init_points.value.split("|");
				for(var i=0; i<arys.length; i++) {
					var pot = arys[i].split(",");
					addInitMarker(new BMap.Point(pot[0], pot[1]), pot[2]);
				}
			} else {
				addInitMarker(map.getCenter(), identify.value);
			}
		}
		getCJState(); //监听狐表写回的信息
    }
    
    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(/*经度*/, /*纬度*/);//定义一个中心点坐标
        map.centerAndZoom(point, /*等级*/);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
		var gc = new BMap.Geocoder();//根据坐标解析地址
		window.gc = gc;//存入全局
		var myDis = new BMapLib.DistanceTool(map); //测距对象
		window.myDis = myDis
    }
	
	//地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
		var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
		map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
		var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
		map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
		var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
		map.addControl(ctrl_sca);
		//向地图中添加地图类型控件
		map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]}));
    }
    
    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
		
		map.addEventListener("rightclick", function(e){	//右击地图事件
			addMarker(e.point);
		});
		
		myDis.addEventListener("drawend", function(e) {  //双击关闭测量事件
			cj_value.value = e.distance;
			state.value = "click";
		});
		
		myDis.addEventListener("addpoint", function(e) {  //添加测距点事件
			cj_value.value = e.distance
			state.value = "click"
		});
    }
    
	//监听狐表写回的数据，开启或者关闭测距工具
	function getCJState(){
		if(cj_state.value == "open"){
			cj_value.value = 0;
			cj_state.value = "";
			myDis.open();
		} else if(cj_state.value == "close") {
			cj_state.value = "";
			myDis.close();
		} else if(cj_state.value == "clear") {
			cj_state.value = "";
			map.clearOverlays();
		}
		
		setTimeout("getCJState()",500); //循环，获取狐表写回的信息
	}
	
	//读取狐表写回信息函数
	function getIdentify(){
		if(state.value == ""){
			currMarker.setTitle(identify.value);
			clearTimeout(timer); 
		} else {
			timer = setTimeout("getIdentify()",500); //循环，获取狐表写回的信息
		}
	}
	
	//读取狐表写回信息函数
	function getMarkerInfo(){
		if(state.value == ""){
			var infoWindow = new BMap.InfoWindow("<b class='info_title'>" + marker_title.value + "</b><div class='info_content'>" + marker_content.value + "</div>");
			currMarker.openInfoWindow(infoWindow);
			clearTimeout(timer); 
		} else {
			timer = setTimeout("getMarkerInfo()",500); //循环，获取狐表写回的信息
		}
	}
    
	//加入标记
	function addMarker(point) {
		point_x.value = point.lng;
		point_y.value = point.lat;
		map.clearOverlays();// 清除当前标记
		var marker = new BMap.Marker(point);//产生一个新的标记
		map.addOverlay(marker);//加入到地图中
			
		gc.getLocation(point, function(rs){ //根据坐标得到地址信息
			var addComp = rs.addressComponents;
			marker_addr.value = addComp.province + "," + addComp.city + "," + addComp.district + "," + addComp.street + "," + addComp.streetNumber;
		}); 

		state.value = "map_rc";
		
		marker.enableDragging(true); // 设置标注可拖拽
			
		if(marker_animation.value == "True") {
			marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		}
			
		currMarker = marker;
		timer = setTimeout("getIdentify()",500); //循环，获取狐表写回的信息
			
		marker.addEventListener("click", function(e){ //标记单击标记事件
			identify.value = marker.getTitle();
			marker_title.value = "这里显示标题";
			marker_content.value = "这里显示内容";
			currMarker = marker;
			state.value = "marker_c";
			
			timer = setTimeout("getMarkerInfo()",500); //循环，获取狐表写回的信息
		});
		
		marker.addEventListener("dragend", function(e){  //结束拖动标记
			identify.value = marker.getTitle();
			point_x.value = marker.getPosition().lng;
			point_y.value = marker.getPosition().lat;
			state.value = "marker_drag";
		});
	}
	
	//加入初始标记
	function addInitMarker(point, idx) {
		var marker = new BMap.Marker(point);//产生一个新的标记
		map.addOverlay(marker);//加入到地图中
		
		marker.enableDragging(true); // 设置标注可拖拽
			
		if(marker_animation.value == "True") {
			marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		}
		
		marker.setTitle(idx);
		currMarker = marker;
		state.value = "marker_c";
		timer = setTimeout("getMarkerInfo()",500); //循环，获取狐表写回的信息
			
		marker.addEventListener("click", function(e){ //标记单击标记事件
			identify.value = marker.getTitle();
			marker_title.value = "这里显示标题";
			marker_content.value = "这里显示内容";
			currMarker = marker;
			state.value = "marker_c";
			
			timer = setTimeout("getMarkerInfo()",500); //循环，获取狐表写回的信息
		});
		
		marker.addEventListener("dragend", function(e){  //结束拖动标记
			identify.value = marker.getTitle();
			point_x.value = marker.getPosition().lng;
			point_y.value = marker.getPosition().lat;
			state.value = "marker_drag";
		});
	}
	
    initMap();//创建和初始化地图
</script>
</html>
