百度地图 js 在安卓端手指缩放无效_利用百度地图绘制3D轨迹演示
生活随笔
收集整理的這篇文章主要介紹了
百度地图 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轨迹演示的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: verilog实例_Verilog设计与
- 下一篇: 键盘鼠标录制哪个好用_好看好用还不贵的那