百度地图4 从0开始

最新推荐文章于 2022-12-02 17:11:19 发布
最新推荐文章于 2022-12-02 17:11:19 发布
阅读量776 收藏
点赞数
文章标签： 动画 echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Js_qishiruhong/article/details/126354059
版权
本文介绍了如何使用百度地图的ViewAnimation和TrackAnimation实现高性能的地图动画。通过关键帧动画数组定义视图动画，并详细说明了ViewAnimationOptions的参数及事件。同时，展示了几个案例，包括手动启动和停止动画的效果，以及如何使用TrackAnimation进行轨迹3D动画的实现，包括构造函数参数和TrackAnimationOptions配置项。
摘要由CSDN通过智能技术生成

百度地图ViewAnimation动画★★★

可以通过类似于css3中关键帧动画的方式来实现高性能的百度地图动画，主要用到ViewAnimation类和地图的startViewAnimation启动动画，当然我们也可以给ViewAnimation动画绑定相关动画事件

一、ViewAnimation类格式如下：

其中：

  1. keyFrames:是一 个关键帧动画数组，里面的每一帧都是一个对象，通过定义关键帧属性，API会补全关键帧之间过渡的动画过程。每个属性含义如下：

属性 类型 描述
center Point 地图中心点，默认值为地图当前状态中心点
zoom Number 地图缩放级别，默认值为地图当前状态缩放级别
tilt Number 地图倾斜角度，默认值为地图当前状态倾斜角度
heading Number 地图旋转角度，默认值为地图当前旋转角度
percentage Number 表示当前关键帧处于动画过程的百分比，取值范围0~1

  1. ViewAnimationOptions 为视角动画的配置，参数如下：

属性 类型 描述
delay Number 动画开始延迟时间，单位ms，默认0
duration Number 动画持续时间，单位ms，默认1000
interation Number | string 循环次数，参数类型为数字时循环固定次数，参数为'INFINITE'无限循环，默认为1

二、ViewAnimation事件如下：

事件 参数 描述
animationstart {} 动画开始时触发，如果配置了delay，则在delay后触发
animationiterations {} 当动画循环大于1次时，上一次结束既下一次开始时触发。最后一次循环结束时不触发
animationend {} 动画结束时触发，如果动画中途被终止，则不会触发
animationcancel {} 动画中途被终止时触发

案例一完整代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
​
      #map {
        width: 1200px;
        height: 800px;
        border: 1px solid #ccc;
        margin: 20px auto;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
  </body>
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=beRaxcBBOVvG8pfZMgaWSmdKSgr44jsh"></script>
  <script>
    let map = new BMapGL.Map("map");
    let point = new BMapGL.Point(116.403963, 39.915119);
    map.centerAndZoom(point, 20);
    map.enableScrollWheelZoom();
    map.setTilt(50);
    map.setHeading(0);
    const keyFrames = [
      {
        center: new BMapGL.Point(116.403963, 39.915119),
        zoom: 21,
        tilt: 50,
        heading: 0,
        percentage: 0,
      },
      {
        center: new BMapGL.Point(116.403963, 39.915119),
        zoom: 21,
        tilt: 50,
        head
最低0.47元/天 解锁文章
气势如虹-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
百度地图(HTML5新特性)-全面详解（学习总结---从入门到深化）
12-12 1587
1、百度地图_自定义标注图标var myIcon = new BMapGL.Icon("markers.png",new BMapGL.Size(50, 50), //指定放置图标区域的大小{//指定地理点跟图标左上角的相对偏移量});2、使用自定义的标注图标创建标注点// 创建标注对象并添加到地图自定义图标之后，地图上标注点就会直接显示自定义的图标。
百度地图android兼容,Android百度地图SDK无法支持64位平台完美解决方案
weixin_28771631的博客
05-26 1997
首先强调下，百度地图早已经处理了对64位平台的支持，而且现在很多手机都用64位处理器了，而且很多应用使用百度地图sdk都没有问题，那么问题就是我们没有使用好百度地图了。最近开发项目时候遇到一个问题，问题报错信息有这么一句话/lib/arm64/libBaiduMapSDK_base_v4_1_0.so" is 32-bit instead of 64-bit。意思应该是我的机器用的是64位的芯片，...
百度地图轨迹回放
weixin_55652851的博客
11-14 630
百度地图轨迹回放
百度地图上，路线轨迹的3D动画展示
算法channel
04-25 6156
效果展示今天换换脑子，来一些可视化的小技巧。百度地图很强大，也为开发者提供很好的开发接口。今天教大家一个3D地图上路线轨迹可视化的小功能。第一步：申请 ak, 很简单，10秒搞定。ak ...
百度地图API开发轨迹回放功能
chedanquestion的博客
03-01 3150
用百度地图开放平台提供的功能做一个轨迹回放，包括暂停、倍速播放、重点点位标注，而且轨迹是逐渐出现，而非一段一段画出来的。 网上有轨迹回放的文章，大多是用线覆盖物一段一段的画，达不到逐渐出现的效果。而百度地图自己提供的new BMapGLLib.TrackAnimation方法，好像无法实现倍速，调整了duration也无法实时的渲染进去，还有就是无法在到达某个点的时候做判断是否添加特殊标注。我看了TrackAnimation的api，可能通过addPath和setDuration可以实现，但是我没有成功.
百度地图——显示小车轨迹动画回放
热门推荐
little xian的博客
09-23 1万+
百度地图，Android显示车辆轨迹动画 初次设计想就用百度自带的显示覆盖物的方式，计算两个坐标点的距离，添加短距离的坐标点，然后在密密麻麻的坐标点之间显示，隐藏覆盖物，形成移动的视觉效果。 后来发现会创建较大的内存，而且效果不佳。 最后选择添加View的方法，利用addView方法添加小车的view，利用Android动画，同步和异步结合显示小车运行。 主要几个注意点和方案是：
vue2+百度离线地图实现多车辆行驶动态轨迹
weixin_39277183的博客
12-02 4049
有个缺点就是如果数据量庞大会导致浏览器性能消耗严重，因为这里使用了定时器实现，应该有更好的办法实现，完成改功能效果需要连个接口，①初始化坐标点接口，②增量坐标点接口。实现多车辆实时轨迹监控，每个10秒监测一次接口，进行动态追加。vue2+百度离线地图实现行驶车辆动态轨迹。
Android studio3.0对于百度地图api开发（4）——百度地图地图覆盖物制作
小晖的博客
09-23 1989
       承接上文未完的继续介绍，上文内容：https://blog.csdn.net/qq_41562408/article/details/82810484主要实现百度地图的定位以及对于地图覆盖物进行简单介绍，这篇文章便是对于地图覆盖物进行，经过阅读开发文档，我们会发现对于百度地图的覆盖物的制作主要有点、线、面、文字等操作，本文针对几个有代表性和常见的地图覆盖物进行介绍。圆形覆盖物、文本覆...
java百度地图逆地址解析_百度地图逆地址解析
weixin_42532473的博客
02-13 918
什么是Geocoding？Geocoding API 是一类简单的HTTP接口，用于提供从地址到经纬度坐标或者从经纬度坐标到地址的转换服务，用户可以使用C# 、C++、Java等开发语言发送HTTP请求且接收JSON、XML的返回数据。Geocoding API包括地址解析和逆地址解析功能：地理编码：即地址解析，由详细到街道的结构化地址得到百度经纬度信息，例如：“北京市海淀区中关村南大街27号”地...
TrackAnimation.js
12-08
BMapGL 轨迹动画指向地球中心(0,0)，轨迹坐标点定位不准、点漂移到几内亚湾
百度地图JSAPI GL版的JavaScript开源工具库
09-07
# BMapGLLib 本代码库是基于百度地图JSAPI GL版的JavaScript开源工具库，如果使用的是2D地图的话，参考旧的[2D开源库](https://github.com/huiyan-fe/BMap-JavaScript-library)。 ## 如何使用 我们在将GL版的开源工具库放到了百度云的BOS存储上，根据github文件目录可以推理出BOS的路径，比如： `<link href="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css" rel="stylesheet">` `<script src="//mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js"></script>`
百度地图marker动画的实现
05-07
百度地图marker动画的实现，动画是基于css3的animation实现的，可以根据需求的不同修改乘不同的动画效果
Android使用View Animation实现动画加载界面
08-27
主要为大家详细介绍了Android使用View Animation实现动画加载界面的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
TrackAnimation.min.js
12-08
BMapGL 轨迹动画指向地球中心(0,0)，轨迹坐标点定位不准、点漂移到几内亚湾
百度地图API-初步使用（2）
damadashen的博客
08-10 1433
百度地图API的使用（获取坐标值、定位获取点、地址的正反解析、轨迹动画、驾车线路规划、交通流量图加载）
百度地图轨迹回放 快进 后退 停止 播放 暂停 的实现
zhounanboa的专栏
08-30 4169
//左边树 var menuTree; //地图 var map; //时间框 var dlg_Edit1; //markerArr var arr; //label var label; //marker var m1; //循环 var interval; //坐标点下标 var counterM = 0; //searchInfoWindow var sea
百度地图api实现轨迹运动效果
weixin_45663625的博客
09-30 4950
百度地图api实现轨迹运动效果 实现逻辑： 实现轨迹运动的效果无非就是将一段路程细化为很多个点，然后不过的根据这些点来画出移动轨迹。 实现流程： 1）使用DrivingRoute，根据起点和终点的位置，自动生成路径点。 2）建立一个定时任务，使用Polyline不断的通过这些点渲染出移动轨迹。 3）使用Marker的setPosition改变标注点位置，实现播放功能。 直接上代码，完全可用： <!DOCTYPE html> <html> <head> <m
Android实现百度地图定位和导航
最新发布
06-07
要实现百度地图定位和导航功能，需要进行以下几个步骤： 1. 在AndroidManifest.xml文件中添加相应的权限和申请百度地图SDK的Key。 2. 在布局文件中添加MapView控件，用于显示地图。 3. 在Java代码中初始化MapView控件和百度地图SDK，并进行定位和导航设置。 4. 通过百度地图SDK提供的定位功能，获取当前位置信息。 5. 通过百度地图SDK提供的导航功能，实现从当前位置到目的地的导航。 下面是一个简单的实现示例： 1. 在AndroidManifest.xml文件中添加以下权限和申请百度地图SDK的Key： ```xml <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.READ_PHONE_STATE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="申请的百度地图SDK Key"/> ``` 2. 在布局文件中添加MapView控件： ```xml <com.baidu.mapapi.map.MapView android:id="@+id/bmapView" android:layout_width="match_parent" android:layout_height="match_parent"/> ``` 3. 在Java代码中初始化MapView控件和百度地图SDK，并进行定位和导航设置： ```java public class MainActivity extends AppCompatActivity { private MapView mMapView; private BaiduMap mBaiduMap; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // 初始化MapView控件 mMapView = (MapView) findViewById(R.id.bmapView); mBaiduMap = mMapView.getMap(); // 初始化定位功能 LocationClient mLocationClient = new LocationClient(getApplicationContext()); MyLocationListener mMyLocationListener = new MyLocationListener(); mLocationClient.registerLocationListener(mMyLocationListener); LocationClientOption option = new LocationClientOption(); option.setOpenGps(true); option.setCoorType("bd09ll"); option.setScanSpan(1000); mLocationClient.setLocOption(option); mLocationClient.start(); // 初始化导航功能 BNOuterLogUtil.setLogSwitcher(true); BaiduNaviManager.getInstance().init(this, getExternalFilesDir(null).getAbsolutePath(), "app_name", new NaviInitListener() { @Override public void onAuthResult(int status, String msg) { if (status == 0) { Log.e("BaiduNaviManager", "百度导航鉴权成功"); } else { Log.e("BaiduNaviManager", "百度导航鉴权失败"); } } @Override public void initSuccess() { Log.e("BaiduNaviManager", "百度导航初始化成功"); } @Override public void initStart() { Log.e("BaiduNaviManager", "百度导航初始化开始"); } @Override public void initFailed() { Log.e("BaiduNaviManager", "百度导航初始化失败"); } }, null); } // 定位回调 private class MyLocationListener implements BDLocationListener { @Override public void onReceiveLocation(BDLocation location) { if (location == null) { return; } MyLocationData locData = new MyLocationData.Builder() .accuracy(location.getRadius()) .direction(location.getDirection()) .latitude(location.getLatitude()) .longitude(location.getLongitude()) .build(); mBaiduMap.setMyLocationData(locData); } } } ``` 4. 通过百度地图SDK提供的定位功能，获取当前位置信息： ```java LocationClient mLocationClient = new LocationClient(getApplicationContext()); MyLocationListener mMyLocationListener = new MyLocationListener(); mLocationClient.registerLocationListener(mMyLocationListener); LocationClientOption option = new LocationClientOption(); option.setOpenGps(true); option.setCoorType("bd09ll"); option.setScanSpan(1000); mLocationClient.setLocOption(option); mLocationClient.start(); ``` 5. 通过百度地图SDK提供的导航功能，实现从当前位置到目的地的导航： ```java // 初始化导航功能 BNOuterLogUtil.setLogSwitcher(true); BaiduNaviManager.getInstance().init(this, getExternalFilesDir(null).getAbsolutePath(), "app_name", new NaviInitListener() { @Override public void onAuthResult(int status, String msg) { if (status == 0) { Log.e("BaiduNaviManager", "百度导航鉴权成功"); } else { Log.e("BaiduNaviManager", "百度导航鉴权失败"); } } @Override public void initSuccess() { Log.e("BaiduNaviManager", "百度导航初始化成功"); } @Override public void initStart() { Log.e("BaiduNaviManager", "百度导航初始化开始"); } @Override public void initFailed() { Log.e("BaiduNaviManager", "百度导航初始化失败"); } }, null); // 开始导航 String startNodeStr = "当前位置"; String endNodeStr = "目的地"; double startLatitude = 0.0; double startLongitude = 0.0; double endLatitude = 0.0; double endLongitude = 0.0; BNRoutePlanNode startNode = new BNRoutePlanNode(startLongitude, startLatitude, startNodeStr, null, BNRoutePlanNode.CoordinateType.BD09LL); BNRoutePlanNode endNode = new BNRoutePlanNode(endLongitude, endLatitude, endNodeStr, null, BNRoutePlanNode.CoordinateType.BD09LL); List<BNRoutePlanNode> list = new ArrayList<>(); list.add(startNode); list.add(endNode); BaiduNaviManager.getInstance().launchNavigator(this, list, 1, true, new DemoRoutePlanListener(startNode), null); ``` 注意：以上代码仅供参考，需要根据实际情况进行修改。同时，百度地图SDK也提供了详细的开发文档和示例代码，可以帮助开发者更好地了解和使用其功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值