beifenmap.html 14 KB

Edit Raw Blame History Permalink

<!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" />
    <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:9999;
            padding: 8px 10px;
            box-sizing: border-box;

        }
        .neir{
            width:100%;
            background: #0D9BF2;
			/*border-radius: 5px;*/
			border:1px solid #9B9B9B;
            display: table;
        }
        .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;
        }
        .search{
        	position: absolute;
        	width: 100%;
        	padding:0 10%;
        	top: 15px;
        	box-sizing: border-box;
        	z-index: 9999;
        	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;
		}
    </style>
    <script  type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js" ></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.1&key=4ffd877f121218774f565671ba9d3b10"></script>

</head>
<body>

<div class="search">
	<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;width: 32px;height: 32px;">
	<div class="amap-ui-control-traffic">
    	<div class="iconlist icon iconfont">&#xe69f;</div>
	    <div class="amap-ui-control-traffic-text">列表</div>
	</div>
</div>

<div class="onepark">
    <div class="neir">
        <div class="leftinfo">
            <div class="lname">
                <span class="bg00f" id="status">充足</span>
                <label id="name">中国传感网家开始打扫傻逼主管</label>
            </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">距离您0.1km</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>
<!--md5 start-->
<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.js?v=1.1"></script>
<script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.min.js?v=1.1"></script>
<!--md5 end-->
<script src="../js/ajax.js"></script>
<script src="../js/url.js"></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type="text/javascript">
    var mapObj = new AMap.Map('container');
	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', onComplete);//返回定位信息
	    AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
	});
    function onComplete(data){
    	console.log(data);
    	alert(data.position.lng);
    	smarker(data.position.lng,data.position.lat);
    }
    function onError(data){
    	console.log(data);
    }

    //获取病设置多个点标记

    var zIndex = 100;
    var m = 0;
    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
    function smarker(lon,lat){
    	var markers = [];
    	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:'50'},
    		{keyname:'longitude',value:lon},
    		{keyname:'salt',value:salt},
    		{keyname:'sign_type',value:'md5'},
    		{keyname:'type',value:'02'}
    	];
    	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:'02',
    		limit:'50',
    		sign:mdsign
    	};
    	jsajax.defaultReq(
    		mUrl.ParkingLots,
    		JSON.stringify(jsondata),
    		function(data){
    			//alert(JSON.stringify(data));
    			if(data.code==0){
    				var datas = data.data;
    				for(var i=0;i<datas.length;i++){
    					var address = datas[i].address;
    					var chargeDetail = datas[i].chargeDetail;
				        /*		var chargeDetail" : [
				            {
				               "standard" : "3元一次"
				            }
				        ],*/
         				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]
        				}
    					markers.push(ds);
    				}
					AMapUI.loadUI(['overlay/SimpleMarker'], function(SimpleMarker) {
						markers.forEach(function(marker) {
					        var mark = new SimpleMarker({
					            map: mapObj,
					            position: [marker.position[0], marker.position[1]],
					            clickable:true,

					            title:marker.extData.name,
					            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)
						        }),
					            iconLabel: {
					                innerHTML: '',
					                style: {
					                    color: "#fff"
					                }
					            },
								extData:marker.extData,
					            //offset: new AMap.Pixel(-12, -36),
					        });
					        mark.on('click', function(e){
					        	var  ss= marker.extData.name;
						        infoWindow.setContent(ss);
						        infoWindow.open(mapObj, e.target.getPosition());
						        datax(marker.extData.idleberths,marker.extData.name,marker.extData.totalberths,marker.extData.address,marker.extData.distance);
					        });
					        marks.push(mark);
					   });
					});

    			}
    		}
    	);
    }
    function markerClick(e) {

    }
    mapObj.setFitView();
    //数据填写
    function datax(idleberths,name,totalberths,address,distance){
    	if(idleberths>10){
        	$("#status").text('充足');
        	$("#status").css('background','#0f0');
        }else if(idleberths>0&&idleberths<10){
        	$("#status").text('紧张');
        	$("#status").css('background','#ff0');
        }else if(idleberths<0){
        	$("#status").text('停满');
        	$("#status").css('background','#f00');
        }
        $("#name").text(name);
        $("#kongnum").text(idleberths);
        $("#allnum").text(totalberths);
        $("#laddre").text(address);
        if(distance&&distance!='null'){//
            var distancep = toDecimal2((parseFloat(distance)*0.001)) ;
            $("#distace").text('距离您'+distancep+'km');
        }
        //mark.setContent('<div class="marker-route marker-marker-bus-from"><span><span>1222</span></span></div>');// = '';

    }
    //制保留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);
    });

    //当地图缩放时
    /*mapObj.on('zoomend',function(e){
        var zuob = mapObj.getCenter();
        var lng = zuob.lng;
        var lat = zuob.lat;
        smarker(lng,lat)
    });*/
    //拖动地图时触发
    mapObj.on('dragend',function(e){
        var zuob = mapObj.getCenter();
        var lng = zuob.lng;
        var lat = zuob.lat;
        smarker(lng,lat);
    });

    $(function(){
    });
</script>
</body>
</html>