vue加载百度矢量个性离线地图

2022-06-22 走过路过 8001 2

使用vue加载百度离线地图以及百度离线个性地图,主要是加载百度离线js,然后对地图进行初始化。

1. 首先在创建的vue项目中引入js
将离线地图模块放入static静态文件目录中 /static/offlinemap
<script src="/static/offlinemap/map_load.js"></script>
<script src="/static/offlinemap/customstyle/stylejson.js"></script>

2. 创建组件用于显示地图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<template>
<div>
    <div>this is a test</div>
  <div id="map_container" style="width: 100%; height: 500px;"></div>
  </div>
</template>
<script>
    export default {
        data() {
            return{
 
            }
        },
        mounted () {
            this.$nextTick(() => {
                this.drawMap()
            })
        },
        methods: {
            drawMap () {
              var map = new window.BMapGL.Map("map_container");    // 创建Map实例
              //初始化地图,设置中心点坐标和地图级别
              map.centerAndZoom(new BMapGL.Point(121.56847909,29.8100979777), 17)
              //开启鼠标滚轮缩放
              map.enableScrollWheelZoom(true);
 
              var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
              map.addControl(navi3DCtrl);
 
              var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
              map.addControl(scaleCtrl);
 
              var zoomCtrl = new BMapGL.ZoomControl();   // 添加缩放控件
              map.addControl(zoomCtrl);
 
              map.setMapStyleV2({styleJson: stylejson});
            }
        }
    }
 
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html, body, #map_container{
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin:0;
        }
 
        .BMap_cpyCtrl {
            display: none;
        }
 
        .anchorBL {
            display: none;
        }
 
        .BMap_mask {
            z-index: 999;
        }
</style>

3. 配置路由及引用后,即可显示。
完整Demo:百度个性地图3D测试(WebGL V1.0) vue例子.zip

相关推荐
全部评论 最新评论 最早评论
  • 举报
    2022-12-08 10:07:46
    这个页面只能显示东南部分区域,是因为矢量瓦片不完整吗
  • 举报
    大飞 2022-10-25 08:44:58
    有什么办法让页面信息显示的更加详细吗

联系我们

微信公众号
打赏作者