Vue中百度地图简单应用

百度地图简单应用

1. 前置操作

• 第一步：安装vue-baidu-map插件

    npm i vue-baidu-map --save

• 第二步：全局或局部注册组件

// 全局组件
import BaiduMap from 'vue-baidu-map';
Vue.use(BaiduMap, {
      /* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
      ak: 'YOUR_APP_KEY'
})

<!--组件内部-->
<baidu-map 
    style="width:600px;height:300px;display:none" 
    :center="map.center" 
    :zoom="map.zoom" 
    @ready="handler">
</baidu-map>

<!--局部组件-->
<el-input v-model="addressKeyWord" placeholder="请输入收货地址" @change="getAddressList()" style="width:80%"></el-input>
<baidu-map 
    style="width:600px;height:300px;display:none" 
    :center="map.center" 
    :zoom="map.zoom" 
    @ready="handler"
    ak="YOU_APP_KEY">
    <bm-view style="width:100%;height:100%; flex:1"</bm-view> //地图显示 需要定义显示高度
    <bm-local-search :keyword="addressKeyWord" :auto-viewport="true"></bm-local-search> <!--搜索结果栏-->
</baidu-map>

2. JS部分

<script>
export default {
    data(){
        return{
            map: {
                center: { lng: 121.4472540000, lat: 31.3236200000 }, //地图默认显示,也可以用城市名称
                zoom: 15,  // 地图级别
            },
        }
    },
    mounted(){
        // 百度地图API功能
        var map = new BMap.Map("map");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(121.551257,38.890002), 11);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]}));
        map.setCurrentCity("大连");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    }
}
</script>

如果显示BMap&map找不到，可以在标签中添加ready函数。 哦吼！Problem solving

handler ({ BMap, map }) {
  this.BMap = BMap;
  this.map = map;
},

// 关键字搜索相关地点
function myFun(){
    var pp = local.getResults().Ir;   // Ir关键字搜索出来的相关地点； getio(index).point:获取第index条的point(经纬度)
}
var local = new this.BMap.LocalSearch(this.map,{
    onSearchComplete:myFun  // 检索完成后执行的函数
})
local.search(this.addressKeyWord)  // 通过addressKeyWord关键字来检索相关地点

// 经纬度来获取对应的地点
getAdd(point){
        let geo = new this.BMap.Geocoder();  //Geocoder：逆/地址解析，用于坐标与地址间的相互转换。
        geo.getLocation(point,function(res){ // 根据经纬度获取地址描述
          console.log(res.addressComponents)
        })
        this.map.centerAndZoom(point,zoom)  // 地图是否自动定位到point对应的地点
    })
},

去掉百度地图Logo

.BMap_cpyCtrl {
    display: none;
}
.anchorBL {
    display: none;
}

注释

YOUR_APP_KEY      你的百度地图秘钥