码迷,mamicode.com
首页 > 其他好文 > 详细

高德地图-设置直线路线

时间:2019-02-14 13:21:09      阅读:554      评论:0      收藏:0      [点我收藏+]

标签:XML   att   zoom   高德   das   height   enter   htm   实例   

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、实现结果

 

技术图片

再分享一下我老师大神的人工智能教程吧。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow

高德地图-设置直线路线

标签:XML   att   zoom   高德   das   height   enter   htm   实例   

原文地址:https://www.cnblogs.com/odejsjhshw/p/10373891.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!