(以“<div id="examples_center"> <!-- 页面标题 --> <div class="title-hd">平滑移动</div><!-- 标题下子标题及简介,可有多个 --> <div class="...”为内容创建页面) |
|||
第359行: | 第359行: | ||
<div class="video-wrap infor"> | <div class="video-wrap infor"> | ||
<div class="video-control"></div><!-- ios视频位置 --> | <div class="video-control"></div><!-- ios视频位置 --> | ||
− | <pre>//mapopen-website-wiki.bj.bcebos.com/demos/iosVideos/ | + | <pre>//mapopen-website-wiki.bj.bcebos.com/demos/iosVideos/iOS平滑移动.mov</pre> |
</div> | </div> | ||
<div class="video-icon-ios"> | <div class="video-icon-ios"> |
2020年5月30日 (六) 20:23的版本
平滑移动
功能场景
出行、运动健康类app中动态展示小车、用户的轨迹变化。
Android
iOS
1590746640|
扫码体验
下载源码
//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(); }
复制
深色
复制成功