dispatchMap.html 9.98 KB
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <title>算法测试</title>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=b64407a9a60c945f80270b17f9c4eabd"></script>
    <style>
        #iMap {
            height: 560px;
            width:  100%;
            float: left;
        }

        .info {
			padding: .75rem 1.25rem;
			margin-bottom: 1rem;
			border-radius: .25rem;
			position: fixed;
			top: 1rem;
			background-color: white;
			width: auto;
			min-width: 22rem;
			border-width: 0;
			right: 1rem;
			box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
        }

        label {
            width: 80px;
            float: left;
        }

        .detail {
            padding: 10px;
            border: 1px solid #aaccaa;
        }

        textarea {
            width: 650px;
            height: 100px;
        }
		
		.input-card {
			display: flex;
			flex-direction: column;
			min-width: 0;
			word-wrap: break-word;
			background-color: #fff;
			background-clip: border-box;
			border-radius: .25rem;
			width: 22rem;
			border-width: 0;
			border-radius: 0.4rem;
			box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);
			position: fixed;
			bottom: 1rem;
			right: 1rem;
			-ms-flex: 1 1 auto;
			flex: 1 1 auto;
			padding: 0.75rem 1.25rem;
		}
		
		
    </style>
</head>

<body onload="mapInit()">
	  <div id="iMap"></div>
 <div class="input-card" style="width:19rem">
    <h4>设置地图显示要素(Features)</h4>
    <div id="map-features">
      <div class="input-item">
        <input type='checkbox' name='mapStyle' value='bg' checked>
        <span class="input-text">区域面(bg)</span>
      </div>
      <div class="input-item">
        <input type='checkbox' name='mapStyle' value='road' checked>
        <span class="input-text">道路(road)</span>
      </div>
      <div class="input-item">
        <input type='checkbox' name='mapStyle' value='building' checked>
        <span class="input-text">建筑物(building)</span>
      </div>
      <div class="input-item">
        <input type='checkbox' name='mapStyle' value='point' checked>
        <span class="input-text">标注(point)</span>
      </div>
    </div>
  </div>
</body>
<script language="javascript">
    var mapObj;
    var lnglatXY;
    var polygon;
    //初始化地图
    function mapInit() {
        var opt = {
			center: [120.61485,31.338806],
			zoom: 10
        }
        mapObj = new AMap.Map("iMap", opt);
		
		
		// 技术员路线
		var colors = ["6EA7C1","6B55AE","E67FA2","FFEFA1","000000","4E4FEB","068FFF","EEEEEE","F2D8D8","5C8984","545B77","374259","525FE1","F86F03","FFA41B","FFF6F4","E90064","B3005E","FF5F9E","F29727"];
		var lines = ["120.76816,31.337805;120.697426,31.344814;120.68631,31.327042;120.678375,31.1497;120.64272,31.277918;120.606636,31.292015;120.59893,31.29718;120.59721,31.294006;120.64205,31.296389;120.63973,31.32923;120.62434,31.361689;120.636055,31.289328","120.6044,31.349966;120.70851,31.248646;120.65462,31.098804;120.7856,31.097727;120.93813,31.39614;120.96615,31.389332;121.1351,31.441648;121.10443,31.453363;121.03973,31.400562;120.89863,31.749332","120.731804,31.30081;120.61632,31.402105;120.622215,31.333418;121.10754,31.479542;120.68517,31.471252;120.60602,31.398212;120.61584,31.316616","120.95982,31.402082;120.95665,31.45979;120.61631,31.385715;120.66465,31.316366;120.95982,31.402082;120.54942,31.376686","121.077576,31.563578;121.077774,31.560303;120.777725,31.63616;120.574295,31.321478;120.48594,31.334295;120.66449,31.282887;120.606636,31.292015;120.63281,31.173964;120.59747,31.285217","120.687675,31.443468;120.748436,31.684465;120.566185,31.855965;120.49468,31.996065;120.45148,31.938889;120.52668,31.863775;120.523636,31.85848;120.548645,31.842596;120.77099,31.682884;120.60523,31.394392","120.615364,31.186789;120.606255,31.268433;120.95982,31.402082;121.14493,31.461554;120.70512,31.25788;120.74764,31.310646;120.84248,31.284855","120.58707,31.28353;120.53037,31.853617;120.68722,31.253326;120.62997,31.270552","120.5893,31.3104;120.6051,31.296944;120.591995,31.292225;120.596176,31.283587;120.63211,31.286827;120.60004,31.295101;120.58446,31.322863;120.69683,31.275637;120.71991,31.382978;120.76982,31.342066;120.60652,31.404533","121.14414,31.422735;121.10754,31.479542;121.12028,31.465136;120.861145,31.08092;120.724625,31.487646;120.60187,31.148426","120.65577,31.393114;120.79071,31.683098;120.74307,31.677162;120.76508,31.697775;120.74307,31.677162;120.95982,31.402082;120.8475,31.42479;120.622215,31.333418;120.66449,31.282887","120.65423,31.337011;120.67349,31.297058;120.64918,31.303238;120.748604,31.317585;120.65577,31.393114;120.72142,31.487408;120.622215,31.333418;120.62099,31.129614;120.65046,31.225727","120.754295,31.337414;120.625145,31.257837;120.625145,31.257837;120.65172,31.278748;120.625145,31.257837;120.63281,31.173964;120.86825,31.041384;120.9829,31.440903;120.96453,31.349257","120.625145,31.257837;120.493614,31.24607;120.60706,31.398127;120.616486,31.402948;120.62853,31.368942;120.66541,31.32013;120.677185,31.149534;120.731804,31.30081","120.530754,31.281025;120.61113,31.250816;120.62647,31.224566;120.6124,31.194302;120.63425,31.18814;120.612114,31.189907;120.633514,31.153463;120.526886,31.3738;120.634384,31.374594;120.75658,31.336275;120.65062,31.176804","120.63211,31.286827;120.69381,31.304455;120.74544,31.304665;120.74749,31.340815;120.74853,31.324368;120.77035,31.312695;120.7614,31.311754;120.71575,31.29945;120.72181,31.303003;120.88319,31.287842","120.60638,31.391924;120.748604,31.317585;120.67937,31.28781;120.8475,31.42479;120.68036,31.325298;121.077576,31.563578;121.08832,31.5656;121.077576,31.563578;120.62853,31.368942","120.64402,31.77468;120.64402,31.77468;120.597916,31.348755;120.60638,31.391924;120.6232,31.470324;120.72691,31.592422;120.72691,31.592422;120.724625,31.487646;120.72794,31.254622","120.777725,31.63616;120.60602,31.398212;120.70277,31.33351;120.73205,31.30597;120.95665,31.45979;121.10611,31.480717;120.9829,31.440903;120.98225,31.417492;120.68517,31.471252","120.72691,31.592422;120.84455,31.013903;120.95665,31.45979;121.077774,31.560303;120.72691,31.592422;120.68517,31.471252;120.63992,31.306425;120.686195,31.327166;120.61475,31.309742;120.64402,31.77468"];
		lines.forEach(function(line,index){
			showLine(line,colors[index]);
		});
		
		// 仓库起点
		var depot = "120.61485,31.338806";
		addMarker2(depot);
		
		// 技术员偏好中心点
		var preferredlocation = "120.753876,31.312792;120.60937,31.37701;120.59335,31.314192;120.6781,31.312456;120.694275,31.230944;120.68786,31.631952;120.62794,31.25647;120.630035,31.153814;120.53737,31.36919;120.597626,31.18977;120.62713,31.29919;120.69743,31.234127;120.634636,31.298191;120.72335,31.296595;120.39913,31.233416;120.72677,31.3044;120.66996,31.272655;120.6085,31.126905;120.385025,31.351074;120.736176,31.337831";
		preferredlocation.split(';').forEach(function(xy,index){
			addCircle(xy,colors[index]);
		});
		
    }

    // 画线
    // 多边形轮廓线的节点坐标数组
    function showLine(bounds,color) {
        if ('' == bounds) {
            alert("请输入坐标串");
            return;
        }
        var path = bounds.split(';').map(xy => {
            var segs = xy.split(',');
            return new AMap.LngLat(segs[0], segs[1]);
        });
        // alert(path.length + "个坐标");
        var polygon = new AMap.Polyline({
            path: path,
            strokeColor: '#'+color, // 颜色
            strokeWeight: 5, // 线条宽度,默认为 1
			strokeOpacity: 0.8,  //线透明度
            strokeStyle: 'solid', // 线条样式
			showDir: true, //白色方向箭头
        });
        mapObj.add(polygon);
    }
	
	// 实例化点标记
    function addMarker(bounds,image) {
		//var bounds = document.getElementById("markers").value;
        if ('' == bounds) {
            alert("请输入坐标串");
            return;
        }

		bounds.split(';').map(xy => {
            var segs = xy.split(',');
			var marker = new AMap.Marker({
				icon: image,
				position: [segs[0], segs[1]],
				//anchor: 'bottom-center', //设置锚点
				//offset: new AMap.Pixel(-13, -30)
			});
			marker.setMap(mapObj);
            return new AMap.LngLat(segs[0], segs[1]);
        });
    }
	
	// 实例化点标记
    function addMarker2(bounds) {
        if ('' == bounds) {
            alert("请输入坐标串");
            return;
        }
		
		 // 创建一个 Icon
		var startIcon = new AMap.Icon({
			// 图标尺寸
			size: new AMap.Size(25, 34),
			// 图标的取图地址
			image: 'http://a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
			// 图标所用图片大小
			imageSize: new AMap.Size(135, 40),
			// 图标取图偏移量
			imageOffset: new AMap.Pixel(-9, -3)
		});

		bounds.split(';').map(xy => {
            var segs = xy.split(',');
			var marker = new AMap.Marker({
				icon: startIcon,
				position: [segs[0], segs[1]],
				//anchor: 'bottom-center', //设置锚点
				offset: new AMap.Pixel(-13, -30)
			});
			marker.setMap(mapObj);
            return new AMap.LngLat(segs[0], segs[1]);
        });
    }
	
	// 实例化圆形标记
    function addCircle(bounds,color) {
        if ('' == bounds) {
            alert("请输入坐标串");
            return;
        }

		bounds.split(';').map(xy => {
            var segs = xy.split(',');
			
			// 构造矢量圆形
			var circle = new AMap.Circle({
				center: new AMap.LngLat(segs[0], segs[1]), // 圆心位置
				radius: 2000,  //半径
				strokeColor: "#"+color,  //线颜色
				strokeOpacity: 1,  //线透明度
				strokeWeight: 3,  //线粗细度
				fillColor: "#"+color,  //填充颜色
				fillOpacity: 0.8 //填充透明度
			});
			mapObj.add(circle);
            return new AMap.LngLat(segs[0], segs[1]);
        });
    }
	
    //设置地图显示要素
    function setMapFeatures() {
      var features = [];
      var inputs = document.querySelectorAll("#map-features input");
      inputs.forEach(function(input) {
        if (input.checked) {
          features.push(input.value);
        }
      });
      mapObj.setFeatures(features);
    }
    //绑定checkbox点击事件
    var inputs = document.querySelectorAll("#map-features input");
    inputs.forEach(function(checkbox) {
      checkbox.onclick = setMapFeatures;
    });
	

</script>

</html>