高德地图-设置直线路线

1、问题背景

     给点了地图上两个坐标,然后连接两个点,成为一条直线


2、实现源码

<!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"/>
    	<script src="http://webapi.amap.com/maps?v=1.3&key=c2eb520334ddc5ab2bb70a3afe6a58cc"></script>
    	<script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    	<style>
    		html,body{
    			width: 100%;
    			height: 100%;
    			font-family: "微软雅黑";
    			font-size: 12px;
    			font-feature-settings: normal;
    			font-size-adjust: initial;
    			font-stretch: extra-condensed;
    			font-synthesis: initial;
    		}
    		#lineMap{
    			width: 100%;
    			height: 100%;
    			font-size: 12px;
    			font-family: "arial, helvetica, sans-serif";
    		}
    	</style>
	</head>
	<body>
		<div id="lineMap"></div>
		<script>
			//实例化和初始化地图
			var map = new AMap.Map('lineMap', {
        		resizeEnable: true,
        		center: [114.295482,30.582582],
        		zoom: 14
    		});
    		
    		//选定两个坐标
    		var line = [
    			[114.254283,30.567507],
    			[114.328098,30.54489]
    		];
    		
    		//设置连接线样式
    		var polyline = new AMap.Polyline({
        		path: line,          //设置线覆盖物路径
        		strokeColor: "#FF0000", //线颜色
        		strokeOpacity: 0.8,       //线透明度
        		strokeWeight: 1,        //线宽
        		strokeStyle: "dashed",   //线样式
        		strokeDasharray: [10, 10] //补充线样式
    		});
    		
    		polyline.setMap(map);
		</script>
	</body>
</html>

3、实现结果

高德地图-设置直线路线_第1张图片

你可能感兴趣的:(jquery,高德地图)