高德用的汽车路线规划,动画回放的功能,路线颜色改不了,粗细也改不了,所以会很丑。甲方爸爸很生气,后果很严重!!!
先来欣赏一下改之前的长什么样
然后改之后看看:
是不是好看很多!!!
只贴部分代码片段哈,主要用react, 下面的代码我是写在componentDidUpdate里面的,用的高德JS API哈~
const { Map, Marker, Size, Pixel } = window.AMap
const 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.65
window.viewportScale = 1
const 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 = [] } = result
const { 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])
})