百度地图 使用两条平行线表示路线
生活随笔
收集整理的這篇文章主要介紹了
百度地图 使用两条平行线表示路线
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
根據(jù)他人的程序修改的，原文是如何利用百度地圖JSAPI畫帶箭頭的線？
在此，使用兩條平行線表示路線。
1.坐標(biāo)計算：
2.代碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/"; %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"><title>值班員主界面</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body,html {width: 100%;height: 100%;margin: 0;font-family: "微軟雅黑"; }#allmap {height: 100%;width: 100%; } </style> <script type="text/javascript"src="http://api.map.baidu.com/api?v=2.0&ak=Tv58ayKXGwWUzEcg2WoBw1qQrIkVww9B"></script> <!-- ak表示的是百度地圖的key值 --> </head><body><div id="allmap"></div> </body> </html><script type="text/javascript">var routeLine = [ "114.402781,30.498467", "114.402759,30.498304","114.402723,30.498086", "114.402683,30.497872","114.402647,30.497627", "114.402543,30.49751","114.402341,30.497569", "114.402265,30.497592","114.401367,30.497751", "114.400917,30.497806","114.400792,30.497829", "114.400644,30.497849","114.400446,30.497872", "114.400194,30.497915","114.400096,30.497934", "114.400028,30.497771","114.40001,30.497569", "114.400001,30.497456","114.400006,30.49725", "114.399988,30.497106","114.399925,30.496946", "114.399898,30.49688","114.399884,30.496849", "114.399875,30.496818", ];var point_local = new BMap.Point(114.399916, 30.493214); //屏幕中心點坐標(biāo)// 初始化百度地圖API功能// 創(chuàng)建Map實例,并設(shè)置地圖允許的最小/大級別(可選)var map = new BMap.Map("allmap");var localhost_Icon = new BMap.Icon("images/Point_local.png", new BMap.Size(32, 49), {anchor: new BMap.Size(16, 48)});//設(shè)置引用圖標(biāo)的名字以及大小，并設(shè)置圖片相對于所加的點的位置map.centerAndZoom(point_local, 16); // 初始化地圖,設(shè)置中心點坐標(biāo)(經(jīng)度，緯度)和地圖縮放級別map.enableScrollWheelZoom(true); // 開啟鼠標(biāo)滾輪縮放map.addOverlay(new BMap.Marker(point_local, {icon: localhost_Icon}));drawRouteLine(routeLine); // 描繪軌跡線路// 描繪軌跡線路function drawRouteLine(routeLine) {if(routeLine.length<2) return;var routeLineArray = [];for ( var i = 0; i < routeLine.length; i++) {var x = routeLine[i].split(",")[0];var y = routeLine[i].split(",")[1];routeLineArray[i] = new BMap.Point(x, y);}var polyline = new BMap.Polyline(routeLineArray, {strokeColor:"red", strokeWeight:2, strokeOpacity:0.5}); //創(chuàng)建折線 // map.addOverlay(polyline); var linePoint = polyline.getPath(); //線的坐標(biāo)串 var length = 1; //管子半徑var LinePointUp=new Array(), LinePointDown=new Array();for (var i=0; i<linePoint.length; i++) {var pixelStart;var pixelEnd;var PixelArr;if(i==0){pixelStart = map.pointToPixel(linePoint[i+1]); //坐標(biāo)轉(zhuǎn)換為可視區(qū)域坐標(biāo)pixelEnd = map.pointToPixel(linePoint[i]);}else {pixelStart = map.pointToPixel(linePoint[i-1]);pixelEnd = map.pointToPixel(linePoint[i]);}//計算偏差點坐標(biāo)PixelArr = getPixel(pixelStart, pixelEnd, length);var pixelPointa = map.pixelToPoint(new BMap.Pixel(PixelArr[0],PixelArr[1]));var pixelPointb = map.pixelToPoint(new BMap.Pixel(PixelArr[2],PixelArr[3]));if(i==0){ //第一個點需要交換處理var pixelPointTem = pixelPointa;pixelPointa=pixelPointb;pixelPointb=pixelPointTem;}LinePointUp[i] = pixelPointa;LinePointDown[i] = pixelPointb;}var PixelLine1a = new BMap.Polyline(LinePointUp, {strokeColor:"green", strokeWeight:2, strokeOpacity:0.5}); map.addOverlay(PixelLine1a); var PixelLine2b = new BMap.Polyline(LinePointDown, {strokeColor:"green", strokeWeight:2, strokeOpacity:0.5}); map.addOverlay(PixelLine2b); }function getPixel(pixelStart, pixelEnd, length){var r = length; //管子半徑var delta = 0; //主線斜率，垂直時無斜率 var param = 0; //代碼簡潔考慮 var pixelXa, pixelYa, pixelXb, pixelYb;//計算偏差點坐標(biāo)if (pixelEnd.x - pixelStart.x == 0) { //斜率不存在是時 if (pixelEnd.y > pixelStart.y) {pixelXa = pixelEnd.x-r;pixelXb = pixelEnd.x+r;}else{pixelXa = pixelEnd.x+r;pixelXb = pixelEnd.x-r;}pixelYa = pixelEnd.y; pixelYb = pixelEnd.y;} else { //斜率存在時 delta = (pixelEnd.y - pixelStart.y)/(pixelEnd.x-pixelStart.x); //斜率param = Math.sqrt(delta * delta + 1);//已知直角三角形兩個點坐標(biāo)及其中一個角，求另外一個點坐標(biāo)算法 if (pixelEnd.x > pixelStart.x) { //第一、四象限 pixelXa = pixelEnd.x-r*delta/param; pixelYa = pixelEnd.y+r/param; pixelXb = pixelEnd.x+r*delta/param; pixelYb = pixelEnd.y-r/param;}else{ //第二、三象限 pixelXa = pixelEnd.x+r*delta/param; pixelYa = pixelEnd.y-r/param;pixelXb = pixelEnd.x-r*delta/param; pixelYb = pixelEnd.y+r/param; }}return [pixelXa,pixelYa, pixelXb, pixelYb];}</script>現(xiàn)在的問題：在拐角的轉(zhuǎn)折做的不好，特別是在外角部分。
轉(zhuǎn)載于:https://www.cnblogs.com/anyuan9/p/6171525.html
總結(jié)
以上是生活随笔為你收集整理的百度地图 使用两条平行线表示路线的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 6-5-3：STL之stack和queu
- 下一篇： 6-5-2：STL之stack和queu