vue-baidu-map相关随笔

一，使用vue-baidu-map

1.下载相关包依赖 npm i vue-baidu-map

 

2.在main.js中import引入相关包依赖，在main.js中添加如下代码：

import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap,{
　　ak:'你在百度地图官网申请的apk'
})

 

3.在页面中引入，只需在页面中添加如下代码：

<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true"  @click="getClickInfo">
　　<bm-view style="width: 100%; height:500px;"></bm-view>
   <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
</baidu-map>
export default {
    data: function () {
        return {
            keyword: "", 
            center: { lng: 116.404, lat: 39.915 }, 
            zoom: 15, 
            autoViewport: true,
        };
    },
    methods: {
        //地图的点击事件
        getClickInfo(e) {
            this.center.lng = e.point.lng;
            this.center.lat = e.point.lat;
            console.log(this.center.lng);
            console.log(this.center.lat);
        },
    },
};

值得注意的是你用来装百度地图的那个容器div必须要设置高度，不然的话百度地图不会显示。

 

二，百度地图相关属性及其控件解释。

A，属性配置：

1.设置地图中心点，就是地图默认展开的坐标点

:center="center"

 

2.设置地图的默认缩放等级

:zoom="zoom"

 

3.是否获取鼠标滚动时的地图缩放等级数

:scroll-wheel-zoom="true"

 

 

B、控件配置：

1.给地图添加点击事件

@click="getClickInfo"

 

2.给渲染百度地图实例可视化区域的容器

<bm-view></bm-view>

 

3.给地图添加一个缩放控件

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

 

5.给地图添加一个定位点，获取您的当前定位

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

 

6.给地图添加一个搜索框，获取搜索内容相关地名及其经纬度

<bm-control :offset="{width: '10px', height: '10px'}">
     <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 999999}">
           <input type="text" placeholder="请输入搜索关键字" class="serachinput" />
     </bm-auto-complete>
</bm-control>