map.html 25.3 KB

Edit Raw Blame History

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>附近车场</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <link rel="stylesheet" href="../iconfont/iconfont.css" />
    <link rel="stylesheet" href="js/tcyd.css" />
    <link rel="stylesheet" href="../js/bootstrap/bootstrap.css" />
    <style type="text/css">
        .amap-marker .marker-route {
            position: absolute;
            width: 40px;
            height: 44px;
            color: #e90000;
            background: url(http://webapi.amap.com/theme/v1.3/images/newpc/poi-1.png) no-repeat;
            cursor: pointer;
        }
        .amap-marker .marker-marker-bus-from {
            background-position: -334px -180px;
        }
        .amap-geolocation-con{
            /*bottom:30% !important;*/
            position: absolute;
            z-index: 9999;
            left: 20px;
            top:50%;
        }
        .onepark{
            width:100%;
            position: absolute;
            bottom:0;
            z-index:887;
            padding: 8px 10px;
            box-sizing: border-box;

        }
        .neir{
            width:100%;
            background: #0D9BF2;
			/*border-radius: 5px;*/
			border:1px solid #9B9B9B;
            display: table;
            background: #307ff5;
        }
        .neir>div{
            display: inline-block;
            height:100px;
            padding:10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            vertical-align: middle;
            display: table-cell;
        }
        .neir>div.leftinfo{
            background: #fff;
            width:80%;
        }
        .neir>div.rightinfo{
            width:20%;
            text-align: center;
            color: #fff;
            font-size: 14px;
        }
        .neir>div.rightinfo i{
        	font-size: 30px;
        	color: #fff;
        }
        .marker-marker-bus-from>span>span{
            position: absolute;
            top:-30px;
            display: inline-block;
            height: 30px;
            line-height: 30px;
            background: #fff;
            padding: 0 3px;
            box-shadow: 0 0 5px rgba(0,0,0,0.2);
        }
        .mark>span>span{

            display: none;
        }
        .list{
            left:10px;
            top:70px;
            /*bottom:30%;*/
            margin-bottom:-50px;
        }
        /*list 样式*/
        .leftinfo{
            padding:0 10px;
        }
        .leftinfo>div{
            /*margin-bottom:4px;
            margin-top:4px;*/
        }
        .leftinfo .lname{
            font-size:14px;
            margin-bottom:8px;
            height: 20px;
            overflow: hidden;
        }
        .leftinfo .bg00f{
            background: #00ff00;
            color: #fff;
            border-radius: 3px;
            font-size:12px;
            padding:3px 5px;
        }
        .leftinfo .lnum,.leftinfo .ladres{
            font-size:13px;
            color: #ACB3BB;
        }
        .leftinfo .font00f{
            color: #0f0;
        }
        .leftinfo .ladres .font0f0{
            color: #00f;
        }
        .iconlist{
        	background: #fff;
        	font-size: 25px;
        	text-align: center;

        	/*padding-top: 2px; */
        }
        .iconlist.iconfont{
        	color: #666;
        	font-size: 14px !important;
        }
        .search{
        	position: absolute;
        	width: 100%;
        	padding:0 10%;
        	top: 15px;
        	box-sizing: border-box;
        	z-index: 887;
        	height: 40px;
        }
        .search .psearch{
        	background: #fff;
        	width: 100%;
        	height: 100%;
        	box-shadow: 0 0 10px rgba(0,0,0,0.3);
        	border-radius: 4px;
        }
        .search .psearch>div{
        	float: left;
        	height: 40px;
        	line-height: 40px;
        	font-size: 13px;
        	color: #C0C0C0;
        }
        .search .psearch>div:first-child{
        	width: 87%;
        	padding-left: 10px;
        	box-sizing: border-box;
        }
        .search .psearch>div:first-child>div{
        	height: 40px;
        	background: #C0C0C0;
        	width: 1px;
        	float: right;
        }
        .search .psearch>div:last-child{
        	width: 13%;
        	text-align: center;
        }
        .amap-ui-control-theme-normal{
        	top: 60px !important;
        }
        .P{
			width: 30px;
			height: 30px;
			border-radius: 50%;

			margin:200px auto;
			padding: 3px;
			background: #fff;
			box-sizing: border-box;
			position: relative;
			box-shadow: 0 0 10px rgba(0,0,0,0.4);
		}
		.P>div{
			background: #00FF00;
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.P>span{
			display: inline-block;
			position: absolute;
			width: 5px;
			height: 5px;
			transform: rotate(135deg);
			background: #CE3C39;
			bottom: -2px;
			left: 11px;
			background: #fff;
		}

		.amap-simple-marker-label {
		    line-height: 30px;
		    color: #fff;
		}
		.layui-layer-demo .layui-layer-content{
			padding: 10px;
			border-radius: 6px;
		}
    </style>
    <script  type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js" ></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.1&key=07e0b709d42482d580741c326f0fa13c"></script>
    <!--07e0b709d42482d580741c326f0fa13c-->
    <!--自己的 key  4ffd877f121218774f565671ba9d3b10-->
</head>
<body>
<div class="search" onclick="javascript:window.location.href = 'search.html';">
	<div class="psearch">
		<div>
			搜索
			<div></div>
		</div>
		<div>
			<i class="icon iconfont">&#xe64f;</i>
		</div>
	</div>
</div>
<div id="container"></div>
<div class="amap-ui-control-container amap-ui-mobile amap-ui-retina amap-ui-control-theme-normal" style="border-radius: 4px;right: 19px; top: 102px !important;box-shadow: 1px 1px 2px silver;border: solid 1px silver;background: #fff;overflow: hidden;width: 32px;height: 32px;">
	<div class="amap-ui-control-traffic" onclick="parklist();">
    	<div class="iconlist icon iconfont">&#xe69f;</div>
	    <div class="amap-ui-control-traffic-text">列表</div>
	</div>
</div>
<div class="onepark" style="display: none;" onclick="gaodec();">
    <div class="neir">
        <div class="leftinfo">
            <div class="lname">
                <span class="bg00f" id="status">充足</span>
                <span id="parkname">放技能粗人哦</span>
            </div>
            <div class="lnum">
                <!--当前车位：<span class="font00f" id="kongnum"></span>/<span id="allnum">1500</span>-->
            </div>
            <div class="ladres">
                <span id="laddre">菱湖大道200号</span>&nbsp;&nbsp;
                <span id="distace" class="font0f0">距离您0km</span>
            </div>
        </div>
        <div class="rightinfo" >
        	<div><i class="icon iconfont">&#xe6ce;</i></div>
        	<div>导航</div>
        </div>
    </div>
</div>
<script src="../js/jquery-3.2.1.min.js"></script>
<script src="../js/bootstrap/bootstrap.js"></script>
<script src="../js/layui/layui/layui.js"></script>
<!--md5 start-->
<script src="../js/md5.min.js"></script>
<!--md5 end-->
<script src="../js/url.js"></script>
<script src="../js/ajax.js"></script>
<script type="text/javascript" src="js/tcyd.js" ></script>
<script src="js/main.js"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script>
	var plon=plat=null;
	var iii = 0;
	var markers = [];
	var mapObj = new AMap.Map('container');
	var src = location.href;
	var s = src.split('?')[1];
	layui.use(['layer'], function(){});
	if(s){
		var local = s.split('&');
		plon = local[0].split('=')[1];
		plat = local[1].split('=')[1];
		mapObj.setZoomAndCenter(15, [plon, plat]);
		console.log('src dtaa '+plon);
	}
	$(function(){
		//点击覆盖层
		$('div.layui-layer-shade').on('click',function(){
			console.log('点击影');
			//return false;
		});
		//点击覆盖层
		$('body').on('click','.layui-layer-content p',function(){
			console.log($(this).attr('id'));
		});
	})

	var bb = 0;
	var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
	AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker', 'overlay/SimpleInfoWindow'],
        function(MarkerList, SimpleMarker, SimpleInfoWindow) {
        	var markerList = new MarkerList({
                //关联的map对象
                map: mapObj,
                zoom:mapObj.getZoom(),
                autoSetFitView:false,
                //列表的dom容器的id
                //返回数据项的Id
                getDataId: function(dataItem, index) {
                    return dataItem.id;
                },
                //返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.79, 39.90]
                getPosition: function(dataItem) {
                    return dataItem.position;
                },
                //返回数据项对应的Marker
                getMarker: function(dataItem, context, recycledMarker) {
                    //存在可回收利用的marker
                    if (recycledMarker) {
                    	//直接更新内容返回
                       // recycledMarker.setIconLabel(dataItem.icon);
                        //recycledMarker.setIcon(dataItem.icon);
                        //recycledMarker.setIconStyle(dataItem.position);
                        //return recycledMarker;
                    }
                    var iconlabel = 0;
                    var img = '';
                    var cnum = parseInt(dataItem.extData.idleberths);
                    if(dataItem.idleberths>10){
                    	img = 'a4.png';//充足
                	}else if(dataItem.idleberths<10&&dataItem.idleberths>0){
                		img = 'a1.png';//紧张
                	}else if(dataItem.idleberths<=0){
                		img = 'a3.png';//停满
                	}
                	if(dataItem.idleberths>99){
            			iconlabel = '99';
            		}else if(dataItem.idleberths<=99){
            			iconlabel = dataItem.idleberths;
            		}
                    if(dataItem.extData.type==3){
                    	img = 'a4.png';//充足
                    	iconlabel = 'P';
                    }
                    /*return new AMap.Marker({
				        map: mapObj,
			            position: [dataItem.position[0], dataItem.position[1]],
			            clickable:true,
			            title:dataItem.extData.name,
			            content:'1',
			            icon: new AMap.Icon({            
				            size: new AMap.Size(40, 50),  //图标大小
				            image: "http://webapi.amap.com/theme/v1.3/images/newpc/way_btn2.png",
				            imageOffset: new AMap.Pixel(0, -60)
				        }),
				        
						extData:dataItem.extData,
				    });*/
                    //返回一个新的Marker
                    return new SimpleMarker({
                    	map: mapObj,
			            position: [dataItem.position[0], dataItem.position[1]],
			            clickable:true,
			            title:dataItem.extData.name,
			            iconStyle: {
                            src: img,
                            style: {
                                width:'30px',
                                color:'#fff'
                            }
                    	},
                    	iconLabel:iconlabel,
						extData:dataItem.extData,
                    });
                },
                //返回数据项对应的infoWindow
                getInfoWindow: function(dataItem, context, recycledInfoWindow) {
                    var tpl = dataItem.extData.name;
	                //MarkerList.utils.template支持underscore语法的模板
	                var content = MarkerList.utils.template(tpl, {
	                    dataItem: dataItem,
	                    dataIndex: context.index
	                });
	                var n1 = [plon,plat];
					var n2 = [dataItem.extData.longitude,dataItem.extData.latitude];
					var d = distances(n2);
	                datax(dataItem.extData.idleberths,dataItem.extData.name,dataItem.extData.totalberths,dataItem.extData.address,d,dataItem.extData.latitude,dataItem.extData.longitude);
        			$(".onepark").css('display','block');
        			$(".onepark").attr('data-parkCode',dataItem.extData.pklNo);
        					/*infoWindow.setContent(name);
							infoWindow.open(mapObj, ds.position);*/
	                //返回一个新的InfoWindow
	                return new AMap.InfoWindow({
	                    offset: new AMap.Pixel(0, -23),
	                    content: content
	                });
                },
            });
			//监听Marker和ListElement上的点击
	        markerList.on('markerClick ', function(event, record) {
	            //console.log('6777');
	            //JSON.stringify(info)
	        });
	        mapObj.on('dragend',function(e){

		        var zuob = mapObj.getCenter();
		        var lng = zuob.lng;
		        var lat = zuob.lat;
		        console.log('tuodong'+lng+"  "+lat);
		        iii=0;
		        smarker(lng,lat,function(data){
		        	markerList.render(data);
		        });
		        mapObj.setZoom(15);

		    });
		    /*if(sessionStorage.getItem('rntlonandlat')){
		    	var lon = sessionStorage.getItem('rntlonandlat');
		    	lon = JSON.parse(lon);
		    	var lng,lat;
		    	if(lon!=''){
		    		lng = lon.plon;
		    		lat = lon.plat;
		    	}*/
		    if(plon&&plat&&plon!=null&&plat!=null){
		    	//if(plon&&plat&&plon!=null&&plat!=null){}
		    	console.log('有经纬度时候、');
		    	if(!markers||markers==null||markers==undefined||markers==''){
		    		console.log('有经纬度时候、无值时候');
		    		iii=0;
		    		var str = smarker(plon,plat,function(data){
		    			console.log('ii5788888888888888888888888888888888');
		    			markerList.render(data);
		    		});
		    	}else{
		    		console.log('有经纬度时候、有值值时候');
		    		console.log('markers2   '+markers+"  "+typeof(markers));
		    		markerList.render(markers);
		    	}
		    }else{
		    	console.log('执行1');
		    	//需要定位得到数据
			    mapObj.plugin('AMap.Geolocation', function () {
				    geolocation = new AMap.Geolocation({
				        enableHighAccuracy: true,//是否使用高精度定位，默认:true
				        timeout: 10000,          //超过10秒后停止定位，默认：无穷大
				        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
				        convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
				        showButton: true,        //显示定位按钮，默认：true
				        buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
				        buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
				        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
				        showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
				        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
				        zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
				    });
				    mapObj.addControl(geolocation);
				    geolocation.getCurrentPosition();
				    AMap.event.addListener(geolocation, 'complete', function(data){
				    	plon = data.position.lng;
				    	plat = data.position.lat;
				    	iii=0;

				    	var localtion = {
							plon:plon,
							plat:plat
						};
						sessionStorage.setItem('rntlonandlat',JSON.stringify(localtion));

				    	smarker(plon,plat,function(datas){
							markerList.render(datas);
						});
				    });//返回定位信息
				    AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
				});
				/*plon = 120.365681;
				plat = 31.502592;
				var localtion = {
					plon:plon,
					plat:plat
				};
				sessionStorage.setItem('rntlonandlat',JSON.stringify(localtion));
				mapObj.setZoomAndCenter(15, [plon, plat]);
				smarker(plon,plat,function(datas){
					markerList.render(datas);
				});*/

				//markerList.render(markers);
		    }
	});
	function onComplete(data){
    	//console.log(data);
    	plon = data.position.lng;
    	plat = data.position.lat;
    	iii=0;
    	smarker(plon,plat,function(datas){
			markers = datas;
		});
    	//markers = smarker(data.position.lng,data.position.lat);
    }
    function onError(data){
    	console.log(data);
    }
	//点击调用高德
	function gaodec(){
		var idleberths = $(".onepark").attr('data-idleberths');
		var dic = $(".onepark").attr('data-dic');
		var lon = $(".onepark").attr('data-lon');
		var lat = $(".onepark").attr('data-lat');
		var status = $(".onepark").attr('data-status');
		var name = $(".onepark").attr('data-name');
		var parkCode = $(".onepark").attr('data-parkCode');
		//console.log('空余车位：'+idleberths+"距离："+dic+"状态："+status+"名称："+name);
		console.log('缓存经纬度  '+sessionStorage.getItem('rntlonandlat'));
		if(status=='1'){
			var salt = jsajax.salt(32);
			var deviceInfo = mUrl.getDevice();
			var sortd = [
				{keyname:'app_id',value:'0eca8f5373ca4866aec2f8e9d9367104'},
				{keyname:'deviceInfo',value:deviceInfo},
				{keyname:'salt',value:salt},
				{keyname:'sign_type',value:'md5'},
				{keyname:'parkCode',value:parkCode},
				{keyname:'parkName',value:name},
				//{keyname:'token',value:''},
				{keyname:'localongitude',value:lon},
				{keyname:'localatitude',value:lat},
				{keyname:'idleberths',value:idleberths},
				{keyname:'distance',value:dic},
			];

			var mdsign = jsajax.getsign(sortd);
			var jsond = {
				app_id:'0eca8f5373ca4866aec2f8e9d9367104',
				deviceInfo:deviceInfo,
				salt:salt,
				sign_type:'md5',
				parkCode:parkCode,
				parkName:name,
				sign:mdsign,
				//token:'',
				localongitude:lon,
				localatitude:lat,
				idleberths:idleberths,
				distance:dic,
			}
			jsajax.defaultReq(
				mUrl.sendFreepark,
				JSON.stringify(jsond),
				function(data){
					console.log(JSON.stringify(data));
					if(data.code=='0'){
						if(data.data&&data.data.parkCode){
							var pklNo = data.data.parkCode;
							var cn = data.data.idleberths;
							var n2 = data.data.parkName;
							var positiona = [data.data.longitude,data.data.latitude];
							var d2 = toDecimal2((parseFloat(distances(positiona))*0.001));
							if(pklNo==parkCode){
								ktrnty(name,dic,cn,positiona);
							}else{
								var p = [lon,lat];
								ktrntw(name,dic,idleberths,p,n2,d2,cn,positiona)
							}
						}else{
							var p = [lon,lat];
							ktrnty(name,dic,idleberths,p);
						}

					}else{
						console.log(data.message);
					}
				}
			);
		}else{
			var positiona = [lon,lat];
			wktrnt(name,dic,positiona);
		}
		//点击哦     layui-layer-shade
		//var lon = $(".onepark").attr('data-lon');
		//var lat = $(".onepark").attr('data-lat');
		//window.location.href = '//uri.amap.com/navigation?from='+plon+','+plat+',startpoint&to='+lon+','+lat+',endpoint&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=1';
	}

	function click(){
		console.log('11');
	}
	//返回数据
	function smarker(lon,lat,success){
		//console.log('shuuju   '+lon+"  "+lat);
    	var markersz = [];
    	var marks = [];
    	var salt = jsajax.salt(32);
    	var sortd = [
    		{keyname:'app_id',value:'0eca8f5373ca4866aec2f8e9d9367104'},
    		{keyname:'deviceInfo',value:'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E'},
    		{keyname:'latitude',value:lat},
    		{keyname:'limit',value:'2000'},
    		{keyname:'longitude',value:lon},
    		{keyname:'salt',value:salt},
    		{keyname:'sign_type',value:'md5'},
    		{keyname:'type',value:'01'}
    	];
    	var mdsign = jsajax.getsign(sortd);
    	var jsondata = {
    		app_id:'0eca8f5373ca4866aec2f8e9d9367104',
    		deviceInfo:'BC0703A4-AFB0-4B51-9089-9B7487C0CC6E',
    		latitude:lat,
    		longitude:lon,
    		salt:salt,
    		sign_type:'md5',
    		type:'01',
    		limit:'2000',
    		isShowOther:'0',
    		sign:mdsign
    	};
    	jsajax.defaultReq(
    		mUrl.ParkingLots,
    		JSON.stringify(jsondata),
    		function(data){
    			//console.log(JSON.stringify(data));
    			if(data.code==0){
    				//console.log('正确之后的数据   ');
    				var datas = data.data;
    				markers = datas;
    				for(var i=0;i<datas.length;i++){
    					var address = datas[i].address;
    					var chargeDetail = datas[i].chargeDetail;
         				var distance = datas[i].distance;
        				var idleberths = datas[i].idleberths;
        				var latitude = datas[i].latitude;
        				var longitude = datas[i].longitude;
        				var name = datas[i].name;
        				var phone = datas[i].phone;
        				var pklNo = datas[i].pklNo;
        				var totalberths = datas[i].totalberths;
        				var type = datas[i].type;
        				var ds = {
        					content: '<div class="marker-route marker-marker-bus-from"></div>',
					        position: [longitude, latitude],
					        extData:datas[i],
					        idleberths:idleberths
        				}
        				if(i==0&&iii==0){
        					var n2 = [longitude,latitude];
        					var d = distances(n2);
        					datax(idleberths,name,totalberths,address,d,latitude,longitude);
        					$(".onepark").css('display','block');
        					$(".onepark").attr('data-parkCode',pklNo);
        					infoWindow.setContent(name);
							infoWindow.open(mapObj, ds.position);
        					iii++;
        				}
        				markersz.push(ds);
        			}
    				success(markersz);
    			}
    		}
    	);
    }
	function parklist() {
    	if(plon&&plat&&plon!=''&&plat!=''){
    		window.location.href = 'parklist.html?plon='+plon+'&plat='+plat;
    	}
    }
    //mapObj.setFitView();
    //数据填写
    function datax(idleberths,name,totalberths,address,distance,latitude,longitude){
    	if(idleberths>10){
        	$("#status").text('充足');
        	$("#status").css('background','#0f0');
        }else if(idleberths>0&&idleberths<10){
        	$("#status").text('紧张');
        	$("#status").css('background','#ff9e04');
        }else if(idleberths==0&&totalberths&&totalberths!=0&&totalberths!='0'){
        	$("#status").text('停满');
        	$("#status").css('background','#f00');
        }else {
			$("#status").text('充足');
        	$("#status").css('background','#0f0');
		}
        $("#parkname").text(name);
        /*var n2 = [longitude,latitude];
        var dic = distances(n2);*/
        $(".onepark").attr('data-name',name);
        $(".onepark").attr('data-lon',longitude);
        $(".onepark").attr('data-lat',latitude);
        $(".onepark").attr('data-idleberths',idleberths);
        $(".onepark").attr('data-dic','0');
        if(totalberths&&totalberths!=0&&totalberths!='0'&&idleberths){
        	$(".onepark").attr('data-status','1');
        	var yt = parseInt(totalberths) - parseInt(idleberths);

			$(".lnum").html('当前车位：<span class="font00f" id="kongnum">'+idleberths+'</span>/<span id="allnum">'+totalberths+'</span>');
        	//console.log(totalberths+"  "+idleberths+"  "+yt);
        }else{
        	$(".onepark").attr('data-status','0');
			$(".lnum").html('<span class="flan">暂未开通丹阳行</span>');
        }
        $("#laddre").text(address);

        if(distance&&distance!='null'){
        	var distancep = toDecimal2((parseFloat(distance)*0.001)) ;
            $("#distace").text('距离您'+distancep+'km');
            $(".onepark").attr('data-dic',distancep);
        }else{
        	$("#distace").text('距离您0km');
        }

    }
    function distances(n2){
    	/*var lnglat = new AMap.LngLat(plon, plat);
	    AMap.event.addDomListener(document.getElementById('calc'), 'click', function() {
	        var dist = lnglat.distance(n2);
	        dist = dist*0.001;
	        return dist;
	    });*/
	    if(sessionStorage.getItem('rntlonandlat')){
	    	var lon = sessionStorage.getItem('rntlonandlat');
	    	lon = JSON.parse(lon);
	    	var lng,lat;
	    	if(lon!=''){
	    		lng = lon.plon;
	    		lat = lon.plat;
	    	}

		    var lnglat = new AMap.LngLat(lng, lat);
		    console.log('两点间距离   '+lnglat.distance(n2));
		    return lnglat.distance(n2);
	    }
	    /*AMap.event.addDomListener(document.getElementById('calc'), 'click', function() {
	        alert('两点间距离为：' + lnglat.distance([116.387271, 39.922501]) + '米');
	    });
	    
	    * */
    }
    //制保留2位小数，如：2，会在2后面补上00.即2.00
    function toDecimal2(x) {
        var f = parseFloat(x);
        if (isNaN(f)) {
            return false;
        }
        var f = Math.round(x*100)/100;
        var s = f.toString();
        var rs = s.indexOf('.');
        if (rs < 0) {
            rs = s.length;
            s += '.';
        }
        while (s.length <= rs + 2) {
            s += '0';
        }
        return s;
    }
     //实时交通控件//路况//实时路况图层
    AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
        var traffic = new BasicControl.Traffic({
            showButton: true,
            theme: 'normal',
            open:true
        });

        mapObj.addControl(traffic);
    });
</script>
</body>
</html>