每天学习一点点 编程PDF电子书、视频教程免费下载:
http://www.shitanlife.com/code

vue 使用百度地图GL - 3D效果


<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=CWmiAPiwuHW6sGdMbAReZdqU"></script>



<template>
<div class="drawer">

<div id="allmap" style="width:100%; height:500px;"></div>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
props: {},
data () {
return {
open: false,
isActive: false,
isClose: false
}
},
mounted () {
// GL版命名空间为BMapGL
// 按住鼠标右键,修改倾斜角和角度
var map = new BMapGL.Map('allmap') // 创建Map实例
map.centerAndZoom(new BMapGL.Point(116.280190, 40.049191), 19) // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
map.setHeading(64.5)
map.setTilt(73)

var marker = new BMapGL.Marker(new BMapGL.Point(116.280190, 40.049191)) // 创建点
map.addOverlay(marker)
},
methods: {
}
}
</script>




 在eslintrc.js中进行全局声明

globals: {
BMap: true
}

posted @ 2019-12-26 17:19  漫步CODE人生  阅读(...)  评论(...编辑  收藏
每天学习一点点 编程PDF电子书、视频教程免费下载:
http://www.shitanlife.com/code