百度地图 js 在安卓端手指缩放无效_利用百度地图绘制3D轨迹演示

简介

百度地图很强大，也为开发者提供很好的开发接口。今天用3D地图上路线轨迹可视化的小功能。

使用

第一步：申请ak

ak申请介绍

创建的时候选择浏览器端~

第二步：填写ak

有了 ak 后，复制下面的 hellomap.html 文件到 templates 文件夹里，并在hellomap.html 文件写入你申请的ak

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}</style>    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=（此处填写申请的ak）"></script><script type="text/javascript" src="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script><title>绘制轨迹</title>
</head><body><div id="allmap"></div>
</body>
</html>
<script type="text/javascript">// GL版命名空间为BMapGL// 按住鼠标右键，修改倾斜角和角度var bmap = new BMapGL.Map("allmap");    // 创建Map实例bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17);  // 初始化地图,设置中心点坐标和地图级别bmap.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放bmap.setTilt(50);      // 设置地图初始倾斜角var path = [{'lng': 116.297611,'lat': 40.047363}, {'lng': 116.302839,'lat': 40.048219}, {'lng': 116.308301,'lat': 40.050566}, {'lng': 116.305732,'lat': 40.054957}, {'lng': 116.304754,'lat': 40.057953}, {'lng': 116.306487,'lat': 40.058312}, {'lng': 116.307223,'lat': 40.056379}];var point = [];for (var i = 0; i < path.length; i++) {var poi = new BMapGL.Point(path[i].lng, path[i].lat);point.push(poi);var marker = new BMapGL.Marker(poi); //创建标注bmap.addOverlay(marker); //将标注添加到地图中}var pl = new BMapGL.Polyline(point,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});var trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {overallView: true, // 动画完成后自动调整视野到总览tilt: 30,          // 轨迹播放的角度，默认为55duration: 20000,   // 动画持续时长，默认为10000，单位msdelay: 3000        // 动画开始的延迟，默认0，单位ms});trackAni.start();
</script>

第三步：Flask 部署

from flask import Flask
from flask import render_templateApp = Flask(__name__)@App.route('/')
def index():return render_template('hellomap.html')if __name__ == "__main__":App.run(debug=True)

拓展

如果你想要制作自己的轨迹地图，你就要获取你想要的经纬度，获取的方式为：

百度地图API -> 坐标拾取工具

记录下来你的经纬度并且填入到hellomap.html 中就可以了~

提示：hellomap.html 中的 'lng'代表经度；'lat'代表纬度~

错误

因为采用Flask 框架部署网页，因此必须要有一定的规范，你的文件夹的格式应该遵循：

.
├── test.py
├── templates└── hellomap.html

百度地图 js 在安卓端手指缩放无效_利用百度地图绘制3D轨迹演示相关推荐

android js 双指事件,JS实现移动端双指缩放和旋转方法
JS实现移动端双指缩放和旋转方法发表于 2020-2-25|标签javascript js实现移动端双指缩放和旋转,具体代码如下所示: ```javascript var initHeading = ...
python批量爬取小网格区域坐标系_Python爬虫实例_利用百度地图API批量获取城市所有的POI点...
上篇关于爬虫的文章,我们讲解了如何运用Python的requests及BeautifuiSoup模块来完成静态网页的爬取,总结过程,网页爬虫本质就两步: 1.设置请求参数(url,headers,co ...
php滑动轮播效果,js实现移动端手指滑动轮播图效果
本文主要为大家分享一篇js原生实现移动端手指滑动轮播图效果的示例,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧,希望能帮助到大家. 如下所示: Document html{heigh ...
Java经纬度画轨迹图_利用百度地图JavaScript API绘制运动轨迹
写在前面欢迎访问我的博客如果需要使用百度地图javasript api,需先进行开发者认证,balalalala写上一堆理由之后认证就行,然后创建浏览器端的应用,得到可用的Ak,详情见百度地图开放 ...
java 地图定位_利用百度地图进行定位
1.引入地图js 2.js /** * 定位地区 * @author xiaohei 2019-05-14 */ function locateRegion(){ console.log('定位地区' ...
python图像识别步骤_利用百度智能云结合Python体验图像识别(转载来自qylruirui)
利用百度智能云结合Python体验图像识别只要注册了百度账号就可以轻松体验百度智能云中图像识别功能的魅力! 1. 所需要的工具一个百度账号(大家都有哈) 一个可以运行python代码的编译器(Py ...
python 菜品识别_利用百度智能云结合Python体验图像识别(来自qylruirui)
利用百度智能云结合Python体验图像识别只要注册了百度账号就可以轻松体验百度智能云中图像识别功能的魅力! 1. 所需要的工具一个百度账号(大家都有哈) 一个可以运行python代码的编译器(Py ...
百度网盘备份mysql数据库_利用百度云免费备份SQL数据库
我们开发了一个会员管理系统,随着使用的人越来越多,异地备份数据库就显得十分重要,万一硬盘出问题了怎么办呢.所以就着手做这个工作. 首先呢,找到了几个专门用来提供备份数据库的网站,一年好几百,好贵.放弃 ...
使用hammer.js实现移动端手指滑动切换轮播图教程
今天面试前端开发时,要求在移动端实现手指滑动切换轮播图这里我用到 bootsrap 的轮播图组件 + hammer.js 库文章参考: Hammer.js - 李林峰的园子 - 博客园 (cnbl ...

百度地图 js 在安卓端手指缩放无效_利用百度地图绘制3D轨迹演示

简介

使用

第一步：申请ak

第二步：填写ak

第三步：Flask 部署

拓展

错误

百度地图 js 在安卓端手指缩放无效_利用百度地图绘制3D轨迹演示相关推荐

最新文章

热门文章