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

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

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

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

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



    
	    
    

2、定位


3、放大缩小 

4、标点(就是那个红色的小点点)

所有百度地图的标签都要加在

vue-baidu-map常用控件,功能_第1张图片

 

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 = "";
            }
        },
    },
}

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

你可能感兴趣的:(前端,Vue,vue,vue-baidu-map,百度地图)