Fork me on GitHub

vue插件之vue-baidu-map

发表于 | 分类于 | 阅读次数:

1、引入vue-baidu-map

npm install vue-baidu-map --save

2、项目中使用vue-baidu-map组件

我这里需求只有一个地图显示，故采用局部引用了，直接在需要使用的组件里面
import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'
伪代码如下：

template部分

1
2
3
4
5
6
7
8
9
10
<template>
    <baidu-map class="mapDemo"
               :scroll-wheel-zoom="true"
               :center="center"
               :zoom="zoom"
               @ready="handler"
               ak="your ak">
    </baidu-map>
    <!-- ak属性为你自己申请的ak密钥，其他更多属性，下面附带传送门 -->
</template>

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
<script>
	//局部按需引入vue-baidu-map组件
    import BaiduMap from 'vue-baidu-map/components/Map/Map.vue'
    export default {
        name: "shop-info",
        data() {
            return {
                center: {lng: 0, lat: 0},
                zoom: 15
            }
        },
        components: {
            BaiduMap
        },
        methods: {
        	//固定写法
            handler ({BMap, map}) {
                console.log(BMap, map)
                this.center.lng = 116.404
                this.center.lat = 39.915    //天安门经纬度
                this.zoom = 15
            }
        }
    }
</script>

css

1
2
3
4
5
6
<style lang="scss" scoped>
    .mapDemo {
        width: 100%;
        height: 300px;
    }
</style>

效果图如下：
“图片描述”

3、问题

因为项目是微信公众号H5,看着效果图，总感觉地图上的baiduLogo有点怪怪的感觉，那就去掉，改写一下style。
使用深度选择器： /deep/ or >>>
css

1
2
3
4
5
6
7
8
9
<style lang="scss" scoped>
    .mapDemo {
        width: 100%;
        height: 300px;
        /deep/ .anchorBL {
            display: none;
        }
    }
</style>

去掉logo的效果图如下：
“图片描述”
看着就没有那种心理的违和感了，顺便附上vue-baidu-map的文档地址~~~
vue-baidu-map的文档地址：https://dafrok.github.io/vue-baidu-map/#/