天地图引用及设置导航路线

<!DOCTYPE html>
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"/><meta name="keywords" content="天地图"/><title>天地图－地图API－范例－设置途经点</title><script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=ca0f6a193803471f59c909e5768c8860"></script><script src="http://lbs.tianditu.gov.cn/js/lib/jquery/jquery-1.7.2.min.js"></script><style type="text/css">body, html {width: 100%;height: 100%;margin: 0;font-family: "微软雅黑";}#mapDiv {height: 400px;width: 100%;}input, p {margin-top: 10px;margin-left: 5px;font-size: 14px;}</style><script>var map, drivingRoute;var zoom = 12;var startIcon = "http://lbs.tianditu.gov.cn/images/bus/start.png";  //起点图标var endIcon = "http://lbs.tianditu.gov.cn/images/bus/end.png";      //终点图标var mid = "http://lbs.tianditu.gov.cn/images/driving/routeWayPoint.png";var startLngLat;var endLngLat;var mid1;var mid2;var infoWin = null;function onLoad() {map = new T.Map('mapDiv');map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);var config = {policy: 0,  //驾车策略onSearchComplete: searchResult  //检索完成后的回调函数};console.log(map);drivingRoute = new T.DrivingRoute(map, config);console.log(drivingRoute);searchDrivingRoute()}function searchDrivingRoute() {map.clearOverLays();startLngLat = new T.LngLat(116.267620, 39.800100);endLngLat = new T.LngLat(116.608890, 40.026560);mid1 = new T.LngLat(116.306080, 39.960810);mid2 = new T.LngLat(116.455420, 39.874440);//驾车路线搜索drivingRoute.search(startLngLat, endLngLat, [mid1, mid2])}function createRoute(lnglats, lineColor) {//创建线对象var line = new T.Polyline(lnglats, {color: "#2C64A7", weight: 5, opacity: 0.9});//向地图上添加线map.addOverLay(line);}//添加起始点function createStartMarker(result) {var startMarker = new T.Marker(result.getStart(), {icon: new T.Icon({iconUrl: startIcon,iconSize: new T.Point(44, 34),iconAnchor: new T.Point(12, 31)})});map.addOverLay(startMarker);var endMarker = new T.Marker(result.getEnd(), {icon: new T.Icon({iconUrl: endIcon,iconSize: new T.Point(44, 34),iconAnchor: new T.Point(12, 31)})});map.addOverLay(endMarker);var midMarker1 = new T.Marker(mid1, {icon: new T.Icon({iconUrl: mid,iconSize: new T.Point(22, 23),iconAnchor: new T.Point(12, 23)})});map.addOverLay(midMarker1);var midMarker2 = new T.Marker(mid2, {icon: new T.Icon({iconUrl: mid,iconSize: new T.Point(22, 23),iconAnchor: new T.Point(12, 23)})});map.addOverLay(midMarker2);}function searchResult(result) {console.log(result);//添加起始点createStartMarker(result);obj = result;var resultList = document.createElement("div");//获取方案个数var routes = result.getNumPlans();for (var i = 0; i < routes; i++) {//获得单条驾车方案结果对象var plan = result.getPlan(i);//显示单个方案面板var div = document.createElement("div");div.style.cssText = "font-size:12px; cursor:pointer; border:1px solid #999999";//显示方案内容var describeStr = "<strong>总时间：" + plan.getDuration() + "秒，总距离：" + Math.round(plan.getDistance()) + "公里</strong>";describeStr += "<div><img src='" + startIcon + "'/>" + "116.267620,39.800100" + "</div>";//显示该方案每段的描述信息var numRoutes = plan.getNumRoutes();for (var m = 0; m < numRoutes; m++) {var route = plan.getRoute(m);describeStr += (m + 1) + ".<span>" + route.getDescription() + "</span><br/>"//显示该方案每段的详细描述信息var numStepsStr = "";var numSteps = route.getNumSteps();for (var n = 0; n < numSteps; n++) {var step = route.getStep(n);numStepsStr += "<p>" + (n + 1) + ")<a href='javascript://' onclick='showPosition(\"" + step.getPosition().getLng() + "\",\"" + step.getPosition().getLat() + "\",\"" + step.getDescription() + "\");'>" + step.getDescription() + "</a></p>";}describeStr += numStepsStr;}describeStr += "<div><img src='" + endIcon + "'/>" + "116.608890,40.026560" + "</div>";div.innerHTML = describeStr;resultList.appendChild(div);//显示驾车线路createRoute(plan.getPath());//显示最佳级别map.setViewport(plan.getPath());}//显示公交搜索结果document.getElementById("driving_way").appendChild(resultList);}//定位关键点function showPosition(lng, lat, des) {if (infoWin) {map.removeOverLay(infoWin);infoWin = null;}var lnglat = new T.LngLat(lng, lat);infoWin = new T.InfoWindow(des, new T.Point([0, 0]));infoWin.setLngLat(lnglat);map.addOverLay(infoWin);}</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本例演示设置途经点进行驾车换乘查询</p>
<div id="driving_way">
</div></body>
</html>

天地图引用及设置导航路线相关推荐

仿滴滴打车地图选点(包含地图选点，离线地图，导航路线)
根据项目的需要今天做一个百度地图得功能: 百度地图API使用详解 1.百度地图状态改变监听,用户拖动地图(可以设置只能在半径范围内活动)可以实时展示经纬度 2.接入全国各省市离线 ...
高德地图，坐标转换，自定义导航路线
背景:项目本来用的百度地图,后来发现百度地图的导航路线图颜色看不清.所以换了高德地图. 因为这个原因换地图,还是很无语的. 其实现在想想,应该还是可以通过css改变颜色的. 1.更换地图第一个要解决的 ...
【腾讯地图API】制作多途经点的线路导航——路线坐标规划
面试:你懂什么是分布式系统吗?Redis分布式锁都不会?>>> 最近百度地图转腾讯地图以前用过百度地图实现路线坐标规划,不过搜索了一些没有搜索到腾讯地图的路线坐标规划,于是参数 ...
iOS 地图导航路线规划详解
虽然是转载的,还是说几句吧.网上百度地图导航路线规划倒是挺多的,苹果自带的高德导航确实挺少,研究了好久发现就这个讲的稍微全一点,把需要用到的类什么的都讲清楚了.不过高德有个方法可以跳转到它自己的地图上 ...
安卓系统的导航仪怎么设置导航启动路径为高德地图_界面功能焕然一新！高德地图10.0新版体验...
[PConline应用]近日高德地图10.0安卓版与iOS版同时上线,作为一名资深高德迷,我自然第一时间下载并更新了它.没让我失望的是,此次新版不但用上了全新的扁平式UI,各项功能模块也有了大幅进步, ...
vue使用高德地图导航路线失败，获取驾车数据失败：INVALID_USER_SCODE(解决方法)
高德地图使用路线导航最近做大屏项目,里面有地图定位,路线导航等方面的功能,在做路线定位是一直都是获取不到导航的路线,经过好长时间的百度看高德api文档终于找到解决方法. 解决方法添加高德地图安全密 ...
前端实现街道地图_HTML5实现地图上定位导航路线-前端H5/JS/CSS-敏捷大拇指-一个敢保留真话的IT精英社区...
本帖最后由 h5lover 于 2015-11-14 07:49 编辑 HTML5实现地图上定位导航路线 2.jpg (82.45 KB, 下载次数: 31) HTML5实现地图上定位导航路线 2 2 ...
百度地图导航路线起点、终点、途经点删除的方法
最近使用百度地图做项目时,需要利用百度地图的导航路线画两个收费站的车流路线图.因为要用不同颜色表示车流量的大小.所以要先利用百度地图的导航功能找到路路线,再覆盖折线,从而设置不同的颜色.为了更准确的找 ...
安卓系统的导航仪怎么设置导航启动路径为高德地图_2019春节温暖回家路，高德地图6大实用功能逐一看...
最近在高德地图群里,这句话很暖心:即使回家有100种困难,我也有101种方式回家! 手机导航已经成为了出行必装的APP,在国内,车载导航的巨头凯立德也已经被手机导航彻底打败,地图不再是导航功能,已经成 ...

天地图引用及设置导航路线

天地图引用及设置导航路线相关推荐

最新文章

热门文章