百度地图模拟打的app路径规划与出租车实时位置距离效果代码
代码语言:html
所属分类:其他
代码描述:百度地图模拟打的app路径规划与出租车实时位置距离效果代码
代码标签: 打的 app 路径 规划 与 出租车 实时 位置 距离 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui, maximum-scale=1, user-scalable=no"> <style> @import url(common.css); body, html { position: relative; font-family: "微软雅黑"; } #map { width: 100%; height: 86%; } #result { width: 100% } .BMap_cpyCtrl,.anchorBL { display: none; } #icon { position: absolute; right: 3%; top: 1em; } #icon span { position: absolute; border-radius: 5em; /* width: 2em; */ font-size: 0.8em; padding: 0.2em 0.5em; left: -7em; background: #fff; border: solid 1px #88898a; } #icon span.get { border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; } #icon span.send { left: -4em; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; } #icon span.select { color: #fff; background: #39c17a; } #footer { position: absolute; bottom: 0; min-height: 14%; width: 100%; background: url(../img/border.png) no-repeat; padding-top: 4%; background-size: contain; } #footer ul { background-color: #fff; } li.list { width: 90%; padding: 0.5em 5%; height: 1em; } .list em { /* background: url(../img/start.png); width: 5.6%; height: 1em; float: left; display: inline-block; background-size: cover; margin-right: 2%; */ background: url(../img/start.png) no-repeat; width: 8%; height: 148%; float: left; display: inline-block; background-size: cover; margin-right: 2%; } .list.send em { background: url(../img/end.png) no-repeat; background-size: 100%; } .list span { /* font-size: 0.8em; */ font-size: 1em; display: inline-block; width: 88%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-overflow: ellipsis; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; -moz-binding: url(ellipsis.xml#ellipsis); float: left; height: 148%; line-height: 148%; } </style> <script type="text/javascript" src="//api.map.baidu.com/api?key=&v=1.3&services=true"></script> <script type="text/javascript" src="//api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script> </head> <body> <div id="map"></div> </body> <script> var map = new BMap.Map("map"); //创建地图实例 //创建起点 var pt_start = new BMap.Point(117.270591, 23.812975); var startIcon = new BMap.Icon("//repo.bfw.wiki/bfwrepo/image/60ee49111de91.png", new BMap.Size(36, 36)); var markerStrat = new BMap.Marker(pt_start, { icon: startIcon }); // 创建标注 map.addOverlay(markerStrat); // 将标注添加到地图中 //创建终点 var pt_end = new BMap.Point(116.885031, 23.689196)//new BMap.Point(115.559445,22.859811); var endIcon = new BMap.Icon("//repo.bfw.wiki/bfwrepo/image/60ee48fd49e8a.png&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0