當(dāng)前位置：
首頁 >
百度地图 js 在安卓端手指缩放无效_利用百度地图绘制3D轨迹演示
發(fā)布時間：2025/3/20
32
豆豆
生活随笔
收集整理的這篇文章主要介紹了
百度地图 js 在安卓端手指缩放无效_利用百度地图绘制3D轨迹演示
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
簡介
百度地圖很強(qiáng)大，也為開發(fā)者提供很好的開發(fā)接口。今天用3D地圖上路線軌跡可視化的小功能。
使用
第一步：申請ak
ak申請介紹
創(chuàng)建的時候選擇瀏覽器端~第二步：填寫ak
有了 ak 后，復(fù)制下面的 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// 按住鼠標(biāo)右鍵，修改傾斜角和角度var bmap = new BMapGL.Map("allmap"); // 創(chuàng)建Map實(shí)例bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17); // 初始化地圖,設(shè)置中心點(diǎn)坐標(biāo)和地圖級別bmap.enableScrollWheelZoom(true); // 開啟鼠標(biāo)滾輪縮放bmap.setTilt(50); // 設(shè)置地圖初始傾斜角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); //創(chuàng)建標(biāo)注bmap.addOverlay(marker); //將標(biāo)注添加到地圖中}var pl = new BMapGL.Polyline(point,{strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});var trackAni = new BMapGLLib.TrackAnimation(bmap, pl, {overallView: true, // 動畫完成后自動調(diào)整視野到總覽tilt: 30, // 軌跡播放的角度，默認(rèn)為55duration: 20000, // 動畫持續(xù)時長，默認(rèn)為10000，單位msdelay: 3000 // 動畫開始的延遲，默認(rèn)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)拓展
如果你想要制作自己的軌跡地圖，你就要獲取你想要的經(jīng)緯度，獲取的方式為：
百度地圖API -> 坐標(biāo)拾取工具
記錄下來你的經(jīng)緯度并且填入到hellomap.html 中就可以了~
提示：hellomap.html 中的 'lng'代表經(jīng)度；'lat'代表緯度~錯誤
因?yàn)椴捎肍lask 框架部署網(wǎng)頁，因此必須要有一定的規(guī)范，你的文件夾的格式應(yīng)該遵循：
. ├── test.py ├── templates└── hellomap.html總結(jié)
以上是生活随笔為你收集整理的百度地图 js 在安卓端手指缩放无效_利用百度地图绘制3D轨迹演示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： verilog实例_Verilog设计与
- 下一篇： 键盘鼠标录制哪个好用_好看好用还不贵的那