vue-baidu-map常用控件，功能

看了几天百度地图，才发现这玩意儿虽然不是很难，但是东西真的是太多了，根本学不完，所以就先把目前能用上的先看了一下。很多值也是动态可变的，大家也要多参考一下官方文档。

vue-baidu-map官方文档：https://dafrok.github.io/vue-baidu-map/#/zh/index

1、先来个最基本的搜索功能

大家先看html，看不懂没关系，我在js里面写了注释，写的很清楚每个属性的功能

<bm-local-search :keyword="keyword" :location="location" :auto-viewport="autoViewport":panel="panel" :select-first-result="selectFirstResult":pagecapacity="pageCapacity" @searchcomplete="searchcomplete"></bm-local-search>
<bm-control>
    <bm-auto-complete v-model="keyword" :sugStyle={zIndex:999999}">
	    <el-input v-model="mapvalue" placeholder="请搜索活动地址"></el-input>
    </bm-auto-complete>
</bm-control>

2、定位

<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true":autoLocation="true" @locationSuccess="locationSuccess"></bm-geolocation>

3、放大缩小 

<bm-navigation type="BMAP_NAVIGATION_CONTROL_SMALL" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>

4、标点（就是那个红色的小点点）

<bm-marker :position="{lng: center.lng, lat: center.lat}" :dragging="true"animation="BMAP_ANIMATION_BOUNCE"></bm-marker>

所有百度地图的标签都要加在<baidu-map></baidu-map>

 

5、js代码

export default {
    components: {},
    data() {
        return {
            center: {
                lng: 104.072673, //百度地图经度
                lat: 30.57905, //百度地图纬度
            },
            zoom: 15, //百度地图展示层级
            baiduMap: "", //百度地图
            keyword: "", //百度地图搜索值
            location: "成都", //百度地图默认优先检索地区
            autoViewport:true,//百度地图检索结束后是否自动调整地图视野
            panel:false,//百度地图是否选展现检索结果面板
            selectFirstResult:true,//百度地图是否选择第一个检索结果
            pageCapacity:1,//百度地图设置每页容量，取值范围：1 - 100，对于多关键字检索，每页容量表示每个关键字返回结果的数量（例如当用2个关键字检索时，实际结果数量范围为：2 - 200）。此值只对下一次检索有效
            mapvalue: "", //百度地图搜索框值
        }
    },
    methods: {
        locationSuccess(e) { //百度地图定位完成后
            console.log(e)
            this.center.lng = e.point.lng;
            this.center.lat = e.point.lat;
        },
        searchcomplete(e) { //百度地图搜索框完成之后
            console.log(e)
            if (e) {
                this.center.lng = "";
                this.center.lat = "";
            }
        },
    },
}

最后总结：真心建议大家看着官方文档进行学习，不是很难，但是东西很多很多，官方文档也很详细