vue整合百度地图BMapGL
vue整合百度地图BMapGL
·
- 现在index.html中添加script
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的ak"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"></script>
- 钩子函数来调init(),切记生命周期,元素的class应写为ref
- script里的函数调用,我是写了一个按钮来出发路径动画的start()
<script>
export default {
name: "home",
data(){
return {
map,
pl
}
},
mounted() {
this.initMap()
},
methods: {
initMap() {
// GL版命名空间为BMapGL
// 按住鼠标右键,修改倾斜角和角度
var bmap = new BMapGL.Map(this.$refs.allmap); // 创建Map实例
bmap.centerAndZoom(new BMapGL.Point(116.297611, 40.047363), 17); // 初始化地图,设置中心点坐标和地图级别
bmap.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
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++) {
point.push(new BMapGL.Point(path[i].lng, path[i].lat));
}
this.pl = new BMapGL.Polyline(point);
setTimeout('start()', 3000);
this.map = bmap
},
start () {
let trackAni = new BMapGLLib.TrackAnimation(this.map, this.pl, {
overallView: true,
tilt: 30,
duration: 20000,
delay: 300
});
trackAni.start();
}
}
}
</script>
- 结果图
详细可以去看百度地图给的API
https://lbs.baidu.com/index.php?title=jspopularGL/guide/trackAnimation
更多推荐
已为社区贡献1条内容
所有评论(0)