高德地图的汽车路线规划的路线颜色样式更改

高德用的汽车路线规划，动画回放的功能，路线颜色改不了，粗细也改不了，所以会很丑。甲方爸爸很生气，后果很严重！！！

先来欣赏一下改之前的长什么样

然后改之后看看：

是不是好看很多！！！

只贴部分代码片段哈，主要用react，下面的代码我是写在componentDidUpdate里面的，用的高德JS API哈~


const { Map, Marker, Size, Pixel } = window.AMapconst AMapIcon = window.AMap.Icon// 有地图的时候设置缩放，这里是因为我们用了高清解决方案，所以在有地图的时候要设置一下scale缩放和字体大小，没有地图的时候不设置，因为之前在iPhoneX上面出现过四分之一屏的现象。if ((currentStatus !== 0 && currentStatus !== 1 && currentStatus !== 8 && currentStatus !== 4 && currentStatus !== 5) && currentStatus !== 13) {console.log('has map')const scale = 0.65window.viewportScale = 1const metaArr = document.head.getElementsByTagName('meta')for (let i = 0; i < metaArr.length; i++) {const metaEl = metaArr[i]if (metaEl.name === 'viewport') {metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${ scale },maximum-scale=${ scale },minimum-scale=${ scale }`)}}document.documentElement.style.fontSize = '75px'}if (!this.map) {// 初始化地图this.map = new Map(this.mapNode, {center: [centerlongitude, centerlatitude],resizeEnable: true,expandZoomRange:true,zoom:19,zooms:[3, 19],})}// 获取司机经纬度const driverPoint = [driver.longitude, driver.latitude]const startIcon = new AMapIcon({// image: require('../img/start-point.png'),image: require('../img/qiche.png'),size:  new Size(78, 34),})this.driverMark = new Marker({position:    driverPoint,icon:        startIcon,autoFitView: true,autoRotation: true,// offset:      new Pixel(-32, -70),offset:      new Pixel(-14, -20),})this.driverMark.setMap(this.map)const endPoint = [destination.longitude, destination.latitude]const endIcon = new AMapIcon({image: require('../img/end-point.png'),size:  new Size(66, 75),})this.endMark = new Marker({position:    endPoint,icon:        endIcon,zoom:        1,autoFitView: true,offset:      new Pixel(-32, -70),})this.endMark.setMap(this.map)this.map.plugin('AMap.Driving', () => {// 我的路线规划const myDriving = new window.AMap.Driving({map:         this.map,hideMarkers: true,isOutline:false,outlineColor:'#28F',autoFitView:  true,policy: window.AMap.DrivingPolicy.LEAST_TIME,})// 司机位置和终点的myDriving.search(driverPoint, endPoint, (status, result) => {console.log('555555')// 解析返回结果，自己生成操作界面和地图展示界面if (status === 'complete') {const { routes = [] } = resultconst { steps = [] } = routes[0]const pathArr = []steps.map(i => {pathArr.push(i.path)return pathArr})const path = flatten(pathArr)// 绘制轨迹const polyline = new window.AMap.Polyline({map: this.map,path,showDir:true,strokeColor: '#04be02',  // 线颜色strokeOpacity: 1,     // 线透明度strokeWeight: 10,      // 线宽strokeStyle: 'solid',  // 线样式lineJoin: 'round',  // 折线拐点的绘制样式zIndex:999,})polyline.setMap(this.map)this.driverMark.moveAlong(path, 1) // 汽车驾驶路线动画回放}})this.map.setFitView([this.driverMark, this.endMark])})

高德地图的汽车路线规划的路线颜色样式更改相关推荐

高德地图-绘制去程和回程路线
1.问题背景设置去程和回程的路线图,并用不同的颜色设置路线 2.实现源码 <!doctype html> <html> <head><meta charse ...
高德地图WebAPI : 驾车路径规划
参考API 一个demo 获取路径规划返回结果中的两点间最短驾车距离 import java.io.BufferedReader; import java.io.BufferedReader; imp ...
高德地图做汽车路线规划的时候清除之前的路线
在做这个汽车路线规划的时候遇到的问题:就是汽车位置到起点的路线,然后变成汽车位置从起点至终点,那么汽车位置到起点的路线没有清除,还留在上面,要强制刷新页面才能清除!这样当然是不行的!!! 解决办法就是 ...
android 地图路线规划,未来行程路线规划-出行路线规划-开发指南-Android 地图SDK | 高德地图API...
自地图 SDK 搜索功能 6.9.0 版本起新增未来行程路线规划,简称ETD. 未来出行规划(ETD)服务已覆盖全国所有城市,可提供未来7天的出行路线规划. 注意:下面介绍的功能使用的是地图SDK的搜 ...
java 高德地图路线规划_高德地图 web 页面里的出行路线规划
高德地图的引入,有两种方式,第一种在引入链接里直接添加 plugin 参数: 第二种是引入链接里不添加 plugin 参数,而是在在使用插件之前,使用AMap.service方法加载插件,然后在回调 ...
Android高德地图配置及实现定位,目的地路线规划的路线绘制
1.第一步进行高德地图的配置 1)高德地图控制台https://lbs.amap.com/dev/index创建应用和所需要的key(注意applicationId 和签名中的SHA1 正确,比如用 ...
Flutter 调用高德地图APP实现位置搜索、路线规划、逆地理编码
1 开发准备 pubspec.yaml 配置文件中添加插件 dependencies:flutter:sdk: flutterurl_launcher: ^6.1.2 iOS 配置 info.plis ...
高德地图之路线规划多点路线规划路线最短原则之二 TSP算法
经过这段时间的使用和研究,我发现点和点之间的最短路线并不是最优的.针对所有点的组合可能, 得到的最短路线才是最好的(也就是TSP方法),然后再结合点对点之间的距离进行比较,得到的才是相对最优方案. 举 ...
java 高德地图路线规划_公交出行路线规划-出行路线规划-开发指南-Android 地图SDK | 高德地图API...
公交路径规划可以根据起终点和公交换乘的数据,使用 BusRouteOverlay 画出公交路线图层,包括起终点和换乘点.另外也可以自定义起终点和换乘点的图标. 目前支持跨城公交路线规划,提供不同城市之 ...

高德地图的汽车路线规划的路线颜色样式更改

高德地图的汽车路线规划的路线颜色样式更改相关推荐

最新文章

热门文章