高德地图-设置直线路线

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

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

时间: 2024-11-05 18:40:26

高德地图-设置直线路线的相关文章

高德地图-设置点标注的文本标签

1.问题背景 高德地图中,设置选中位置,并自定义图标和文字提示 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="

高德地图 API 显示跑步路线

模仿对象 此前在尝试制作时,我采用 Nike+ 官网效果为模板仿制.目前 Nike+ 已经升级,看不了之前版本的样式及动态效果,暂且看看样式区别不大的 Nike+ Run Club App 地图,动画部分依然以此前 Nike+ 官网效果为准. 分析一下,想要仿制跑步路线图,其中有两个难点,第一个是画线动态效果,第二个是路线的渐变效果.画线动画是跑步过程的表现,渐变效果则是实时配速的表现. 光看都能感觉到渐变效果比较难,故这边就先不模仿它,搞定画线动画先.之前在 Nike+ 网页端,还在终点显示了

高德地图获取骑行距离,路线规划

1 高德地图路线规划  http://lbs.amap.com/api/javascript-api/reference/route-search 2 获取骑行距离 function getrding() { var map = new AMap.Map("container", { resizeEnable: true, center: [116.397428, 39.90923],//地图中心点 zoom: 16 //地图显示的缩放级别 }); //两个经纬度 自己定位获取到 va

高德地图基础设置

1.引用高德地图 <!DOCTYPE HTML> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <titl

【高德地图API】从零开始学高德JS API(五)路线规划——驾车|公交|步行

先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自定义路线规划功能,这是别家没有做到的.导航,指的是为驾车用户提示路口信息,向左向右,进入匝道等信息. 2.我们这里说的步行导航和驾车导航,严格的说,应该是路线规划.从A地到B地,如果是驾车,路线规划会将公路路网做为搜索数据:如果是步行,过街天桥.地下通道.人行道做为搜索数据. ---------------------------

高德地图AndroidSDK 路线规划详情获取

我们用高德地图SDK在进行路径规划后,除了将线路添加到地图时候,往往还需要获取线路的详细描述信息,比方说路线长度,所需时间.路线的每一段情况等,就如高度地图这样: 我们就简答实现下这个功能,首先进行公交线路查询(不清楚的同学可以看下demo),在查询结果中进行处理: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

【高德地图】逆地址解析 设置和应用

最近自己做了一个小程序,引用了高德地图的逆地址解析API,在此就相关设置和具体应用整理一下: 所谓的逆地址解析:通过经纬度解析出对应的位置. 第一步:要是用API 首先要申请key,页面展示如下: 1.输入key的名称 (起一个名字,便于识别,开发中没用到) 2.我选择的是浏览器 3.点击提交就会生成一个类似GCCBZ-7NMW6-HMOSD-EVWW3-WBN3Z-4XBLZ这样的密钥,请求时,赋值给key 第二步:查看高德地图API说明文档 请求示例:   response示例: 注意: 可

【高德地图Android SDK】视频教学

前两天参加了高德在北航举办的公开课,感觉非常不错.完成老师布置的作业之后,还顺利地拿到了高德开发者认证证书!! 现在来跟大家分享一下,如何快速学习[高德地图Android SDK]的开发.一天包会!连环境如何配置,都在视频里有喔. 基础知识 Android 导航 SDK 是一款针对在线导航的产品,产品功能涵盖路径规划.模拟导航.GPS 定位.自定义导航界面.获取导航播报信息等.此外,该产品的导航路径计算与实时交通信息相结合,力求为用户提供更加合理.准确.人性化的导航服务.Android 导航 S

高德地图API笔记

一.图层类 1 二.调用高德地图 2 三.点标注 2 3.1使用自定义maker标注 2 3.2 Icon参数详情 3 3.3在地图上画圆 3 四.区域搜索 4 4.1 画边界函数 5 五.高德地图服务插件 6 5.1地点搜素 7 六. 海量点 8 一.图层类 var layerName = new AMap.TileLayer.类名 layerName.setMap(map); 类名     说明 TileLayer     切片图层类 TileLayer.Satellite  卫星图层类,继