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

Posted 2021-03-20 scode2

<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>