skyversation
/
meidu2021


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357
							<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<script src = "plug-in/tools/jquery.tips.js"></script>		
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Cq7aZVbka0L3UXDLgkKFoiFqnZAwPdS4"></script>
<body style="overflow-y: hidden" scroll="no">
<style type="text/css">
body{font-size:13px;margin:0px}
#container{width:100%;height:88%;}
.label{margin-left:20px;font-weight:bold;font-size:14px}
.lng-lat{
	margin: 0 0 30px 0px;
}
.lng-lat .item{
	margin: 10px;
}
.angle{
    display: inline-block;
    width: 0px;
    height: 0px;
    position: absolute;
    bottom:-60px;
    border: 14px solid;
    left: 15px;
    bottom: -25px;
    opacity: 0.8;
    border-color: #333333 transparent transparent transparent;
}

.datagrid-btable .datagrid-cell{text-overflow:ellipsis;white-space: nowrap;}  
</style>
<div id="main_list" class="easyui-layout" fit="true">
<div style="margin:10px">搜&ensp;&ensp;&ensp;&ensp;索: <input type="text" id="suggestId" size="30" value="百度" style="width:300px;" /></div>
		<div class="lng-lat">
	      	<div class="item">
	          当前经度:
	          <input type="text" id="jing" type=""/>
	        </div>
	        <div class="item">
	         当前纬度:
	          <input type="text" id="wei" />
	          
	          <span style="display:-moz-inline-box;display:inline-block;float: right;margin-right: 10px;" >
	          &ensp;&ensp;&ensp;&ensp;集约化项目分类:
	          <t:dictSelect field="intensiveProjectType" type="radio"   typeGroupCode="intensiveProjectType"  defaultVal="qpshuiwusuo" hasLabel="false"  title="发送时间类型" ></t:dictSelect>
	          &ensp;&ensp;&ensp;&ensp;项目名称:
	          <input type="text" id="name" class="text"  />
				<a href="#" class="easyui-linkbutton l-btn" iconcls="icon-add" style="margin-left: 50px;"	onclick="addPoint()" id="">
					<span>保存此点位</span>
				</a>
				<a href="#" class="easyui-linkbutton l-btn" iconcls="icon-view" onclick="showAllPoint()"  id="upexport">
					<span>显示全部项目点位</span>
				</a>
			</span>
	        </div>
	      </div>
	<div id="container"></div>
 </div>
 
 </body>
 <script type="text/javascript">
 $(function(){
	/* var newtitle =  '【' +'${schedule.carname}' + '】' + '${schedule.start}' + '~' +'${schedule.end}'+' 作业途径点位列表';  //
	$("#detailList").datagrid({title:newtitle}); */
		  /*  if($("#tasktype").val().length == 0)
			   document.getElementById("tasktype").readonly=false; */
});
function addPoint(){
	if(!$('#jing').val()){
		tip('请先在地图上选择位置，然后再添加到路径点');
		return;
	}
	if (!$('#name').val())
	{
		tip('请输入项目名称，请重新录入');
		return;
	}
	$.ajax({
	    url:"intensiveController.do?doAddFromMap",
	    data:{name:$('#name').val(),
	    	lng:$('#jing').val(),
	    	lat:$('#wei').val(),
	    	intensiveProjectType:$('input:radio[name="intensiveProjectType"]:checked').val()
	    	},
		type:"Post",
	    dataType:"json",
	    success:function(data){
		    if(data.success){
		    	tip(data.msg);
		    	/* $("#detailList").datagrid('reload'); */
		    	$('#name').val('');
		    }else{
		    	$.messager.alert('提示信息',data.msg);
		    }
	  }});
	/* //添加完刷新表格
	$('#detailList').datagrid({
	      queryParams:{scheduleid:$('#scheduleid').val()}
	  });
	$("#detailList").datagrid('reload'); */
}
var myLabels = [];
function showAllPoint(){
	$.ajax({
	    url:"intensiveController.do?all",
	    data:{
	    	},
		type:"Post",
	    dataType:"json",
	    success:function(data){
		    if(data.status=="success"){
		    	map.clearOverlays();
		    	var point = new BMap.Point(data.details[0]['lng'],data.details[0]['lat']);
		    	map.centerAndZoom(point,13);
		    	myLabels = [];
		    	for(var i =0; i < data.details.length;i++){
		    		var maker = addMarker(new BMap.Point(data.details[i]['lng'], data.details[i]['lat']),data.details[i]['intensiveProjectType']);
                    addInfoWindow(maker, data.details[i]['name'],data.details[i]['intensiveProjectType']);
		    	}
		    }else{
		    	$.messager.alert('提示信息',"未查询到项目位置信息");
		    }
	  }});
}
//添加信息窗口
function addInfoWindow(marker, content,type) {
	var offsetSize = new BMap.Size(0, 0);
    var labelStyle = {
        color: "#fff",
        backgroundColor: "0.05",
        border: "0"
    };

    //不同数字长度需要设置不同的样式。
    /* switch((number + '').length) {
        case 1:
            labelStyle.fontSize = "14px";
            offsetSize = new BMap.Size(4, 2);
            break;
        case 2:
            labelStyle.fontSize = "12px";
            offsetSize = new BMap.Size(2, 4);
            break;
        case 3:
            labelStyle.fontSize = "10px";
            offsetSize = new BMap.Size(-2, 4);
            break;
        default:
            break;
    } */
    var label = new BMap.Label('');
    label.setStyle(labelStyle);
    marker.setLabel(label);
    
    var label = new window.BMap.Label(content, { offset: new BMap.Size(20, -10) });
    marker.setLabel(label);
}

//添加标注
function addMarker(point,type) {
	var imageoffsetValue = 10;
	if(type == 'qpgonganju')//青浦公安局
		imageoffsetValue = 11;
	if(type == 'qpshuiwuxitong')//青浦水务系统
		imageoffsetValue = 10;
	if(type == 'qpshuiwusuo')//青浦税务所
		imageoffsetValue = 12;
	
	var myIcon;
	myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png", new BMap.Size(23, 25), {
        offset: new BMap.Size(10, 25), // 指定定位位置
        imageOffset: new BMap.Size(0, 0 - imageoffsetValue * 25) // 设置图片偏移
    });
	if(type == 'qpmain')//青浦主要项目
	{
		myIcon = new BMap.Icon(
	　　　　　　　　"images/location.png",//"images/location.png",  
	　　　　　　　　new BMap.Size(48,48), // 视窗大小
	　　　　　　　　{
					 anchor:new BMap.Size(24,48),
	　　　　　　　　　　imageSize: new BMap.Size(48,48), // 引用图片实际大小
	　　　　　　　　　　imageOffset:new BMap.Size(0,0)  // 图片相对视窗的偏移
	　　　　　　　　}
	　　　　 );
	}else if(type == 'songjiang'){//松江
		myIcon = new BMap.Icon(
		　　　　　　　　"images/location-lowblue.png",//"images/location.png",  
		　　　　　　　　new BMap.Size(24,24), // 视窗大小
		　　　　　　　　{
						 anchor:new BMap.Size(12,24),
		　　　　　　　　　　imageSize: new BMap.Size(24,24), // 引用图片实际大小
		　　　　　　　　　　imageOffset:new BMap.Size(0,0)  // 图片相对视窗的偏移
		　　　　　　　　}
		　　　　 );
	}
    var marker = new BMap.Marker(point,{icon:myIcon});
    map.addOverlay(marker);
    return marker;
}
function deletePoine(){
	$.ajax({
	    url:"carScheduleDetailController.do?doDelByPoint",
	    data:{scheduleid:$('#scheduleid').val(),
	    	lng:$('#jing').val(),
	    	lat:$('#wei').val()},
		type:"Post",
	    dataType:"json",
	    success:function(data){
		    if(data.status=="success"){
		    }else{
		    	$.messager.alert('提示信息',"添加到路径点失败");
		    }
	  }});
}
function showPoint(lng,lat,address){
	 //清除地图上的marker
    map.clearOverlays();
    var marker = new BMap.Marker(new BMap.Point(lng, lat));
    var myLabel = setLabelStyle(address);
    marker.addEventListener("mouseover", function() {
    	marker.setLabel(myLabel) //鼠标移入maker显示文字标签
    });
    marker.addEventListener("mouseout", function (e) {
    	map.removeOverlay(marker.getLabel()) //鼠标移除maker隐藏文字标签
    });
	map.addOverlay(marker);
}
function setLabelStyle(content) {
    //左偏移  右偏移
    var offsetSize = new BMap.Size(0, 0);
    var labelStyle = {
        color: "#fff",
        backgroundColor: "#333333",
        border: "0",
        fontSize : "14px",
        width:"200px",
        opacity:"0.8",
        verticalAlign:"center",
        borderRadius: "2px",
        whiteSpace:"normal",
        wordWrap:"break-word",
        padding:"7px",
    };
    //用于设置样式
    var spanA="<span class='angle'><span>";
    //不同数字长度需要设置不同的样式。
    var num=parseInt(content.length/10)
    switch(num) {
        case 0:
            offsetSize = new BMap.Size(-20, -40);
            break;
        case 1:
            offsetSize = new BMap.Size(-20, -40);
            break;
        case 2:
            offsetSize = new BMap.Size(-20, -60);
            break;
        case 3:
            offsetSize = new BMap.Size(-20, -80);
            break;
        default:
            break;
    }
 
    var label = new BMap.Label(content+spanA, {
        offset: offsetSize
    });
    label.setStyle(labelStyle);
    return label;
}
var lng = document.getElementById('jing');
var lat = document.getElementById('wei');
var map = new BMap.Map("container");
var point = new BMap.Point(121.130254,31.156433);
var myGeo = new BMap.Geocoder();// 将地址解析结果显示在地图上,并调整地图视野
map.centerAndZoom(point,13);
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl()); //缩放按钮 
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) {    //鼠标点击下拉列表后的事件
	lng.value = '';
	lat.value = '';
	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(){// 创建地址解析器实例
myGeo.getPoint(myValue, function(point){
  if (point) {
	lng.value = point.lng;
	lat.value = point.lat;
    map.centerAndZoom(point, 16);
    map.addOverlay(new BMap.Marker(point));
  }
}, "上海");
}
 
map.addEventListener('click', function (e) {
 
	lng.value = e.point.lng;
	lat.value = e.point.lat;
	 //清除地图上的marker
    map.clearOverlays();
	var pt = e.point;
    var marker = new BMap.Marker(new BMap.Point(pt.lng, pt.lat));
	map.addOverlay(marker);
	//myGeo.getLocation(pt, function(rs){
        //addressComponents对象可以获取到详细的地址信息
        //var addComp = rs.addressComponents;
        //var site = addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber;
        //$("#address").val(site);
        //设置放大倍数
        //map.centerAndZoom(new BMap.Point(pt.lng, pt.lat), 18);
        //将对应的HTML元素设置值
        //$("#addressLonglat").val(pt.lng+","+pt.lat);
   // });
})
/* function onloaded(){
	var _grid = $('#detailList');
         var tableTd = $('div.datagrid-body td[field="address"]'); 
         tableTd.each(function () {
             var $this = $(this);
             var index = $this.parent('tr').attr('datagrid-row-index');
             var rows = _grid.datagrid('getRows');
             var currentRow = rows[index];
             var content = '<div style="font-size:16px; max-width:700px;word-break: break-all; word-wrap: break-word;">' + currentRow.address + '</div>'; 
             $this.tips({ content: content, wrapColor: 'black' });
         });
 } */
 </script>