第18行: | 第18行: | ||
<div class="video-wrap infor"> | <div class="video-wrap infor"> | ||
<div class="video-control"></div><!-- 安卓视频位置 (不写协议)--> | <div class="video-control"></div><!-- 安卓视频位置 (不写协议)--> | ||
− | <pre></pre> | + | <pre>//mapopen-website-wiki.bj.bcebos.com/demos/AndroidVideos/Android平滑移动.mp4</pre> |
</div> | </div> | ||
<div class="video-icon-and"> | <div class="video-icon-and"> | ||
第34行: | 第34行: | ||
<div class="left-qrCode"> | <div class="left-qrCode"> | ||
<!-- 安卓二维码位置 --> | <!-- 安卓二维码位置 --> | ||
− | <div class="qrCode-and">1590746640|</div> | + | <div class="qrCode-and">1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/qrcodes/平滑移动.png</div> |
<div>扫码体验</div> | <div>扫码体验</div> | ||
</div> | </div> |
2020年6月1日 (一) 09:29的版本
平滑移动
功能场景
出行、运动健康类app中动态展示小车、用户的轨迹变化。
Android
iOS
//mapopen-website-wiki.bj.bcebos.com/demos/AndroidVideos/Android平滑移动.mp4
1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/qrcodes/平滑移动.png
扫码体验
下载源码
//mapopen-website-wiki.bj.bcebos.com/demos/iosVideos/iOS示例中心Demo.zip
核心接口
类
接口
描述
PolylineOptions
points
设置Polyline坐标点列表
PolylineOptions
width
设置Polyline宽度
PolylineOptions
customTexture
设置自定义纹理
PolylineOptions
dottedLine
设置Polyline的虚线类型
BaiduMap
addOverlay
向地图添加一个overlay
MarkerOptions
flat
设置 marker设置是否平贴地图
MarkerOptions
anchor
设置 marker 覆盖物的锚点比例,默认(0.5f, 1.0f)水平居中,垂直下对齐
MarkerOptions
icon
设置Marker图标
MarkerOptions
position
设置 marker 覆盖物的位置坐标
MarkerOptions
rotate
设置 marker 覆盖物旋转角度,逆时针
Marker
setPosition
设置Marker位置坐标
BitmapDescriptorFactory
fromResource
根据资源Id创建不适配设备像素密度的bitmap描述信息
核心代码
1.绘制轨迹
JAVA
private void drawPolyLine() { List list = Arrays.asList(latlngs); List<LatLng> polylines = new ArrayList<>(); polylines.addAll(list); polylines.add(latlngs[0]); // 绘制纹理PolyLine PolylineOptions polylineOptions = new PolylineOptions().points(polylines).width(25).customTexture(mGreenTexture) .dottedLine(true); mPolyline = (Polyline) mBaiduMap.addOverlay(polylineOptions); // 添加小车marker OverlayOptions markerOptions = new MarkerOptions() .flat(true) .anchor(0.5f, 0.5f) .icon(mBitmapCar). position(polylines.get(0)) .rotate((float) getAngle(0)); mMoveMarker = (Marker) mBaiduMap.addOverlay(markerOptions); }
复制
深色
复制成功
2.移动小车
JAVA
/** * 循环进行移动逻辑 */ public void moveLooper() { new Thread() { public void run() { while (true) { for (int i = 0; i < latlngs.length - 1; i++) { final LatLng startPoint = latlngs[i]; final LatLng endPoint = latlngs[i + 1]; mMoveMarker.setPosition(startPoint); mHandler.post(new Runnable() { @Override public void run() { // refresh marker's rotate if (mMapView == null) { return; } mMoveMarker.setRotate((float) getAngle(startPoint, endPoint)); } }); double slope = getSlope(startPoint, endPoint); // 是不是正向的标示 boolean isYReverse = (startPoint.latitude > endPoint.latitude); boolean isXReverse = (startPoint.longitude > endPoint.longitude); double intercept = getInterception(slope, startPoint); double xMoveDistance = isXReverse ? getXMoveDistance(slope) : -1 * getXMoveDistance(slope); double yMoveDistance = isYReverse ? getYMoveDistance(slope) : -1 * getYMoveDistance(slope); for (double j = startPoint.latitude, k = startPoint.longitude; !((j > endPoint.latitude) ^ isYReverse) && !((k > endPoint.longitude) ^ isXReverse); ) { LatLng latLng = null; if (slope == Double.MAX_VALUE) { latLng = new LatLng(j, k); j = j - yMoveDistance; } else if (slope == 0.0) { latLng = new LatLng(j, k - xMoveDistance); k = k - xMoveDistance; } else { latLng = new LatLng(j, (j - intercept) / slope); j = j - yMoveDistance; } final LatLng finalLatLng = latLng; if (finalLatLng.latitude == 0 && finalLatLng.longitude == 0) { continue; } mHandler.post(new Runnable() { @Override public void run() { if (mMapView == null) { return; } mMoveMarker.setPosition(finalLatLng); // 设置 Marker 覆盖物的位置坐标,并同步更新与Marker关联的InfoWindow的位置坐标. mMoveMarker.setPositionWithInfoWindow(finalLatLng); } }); try { Thread.sleep(TIME_INTERVAL); } catch (InterruptedException e) { e.printStackTrace(); } } } } } }.start(); }
复制
深色
复制成功