Vue调用百度地图API实现页面地图的显示及相关操作

内附一个百度地图Vue官方调用开发手册：https://dafrok.github.io/vue-baidu-map/#/zh/start/installation
1.项目根目录下下载百度地图插件

npm install vue-baidu-map –save
2.在首页index.html中引入百度地图:

    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=密钥"></script>

百度地图的密钥可以在这里申请—> http://lbsyun.baidu.com/apiconsole/key
3.我项目中个人的地图页面源码

<template>
    <div class="app-container">
     <div class="baidumap" id="allmap"></div>
    </div>
</template>

<script>
export default {
    name: 'pm-distribution',
    components: {
      
    },
    data(){
        return{
            factorList:null,
            

        }
    },
    mqtt: {
        'WebClient/+'(data) {
            const actionType = JSON.parse(data.toString()).actionType
            let receivedData
            if (JSON.parse(data.toString()).data !== null) {
                receivedData = JSON.parse(JSON.parse(data.toString()).data)
                console.log("receivedData")
                console.log(receivedData)
            }
            if (actionType === 'responseHistoryList') {
                this.detail = receivedData
                this.flag = false
                console.log("responseHistoryList" + this.detail)
            } else if (actionType === 'responseOnLineList') {
                this.devices = receivedData
                console.log("responseOnLineList" + this.devices)
            } else if (actionType === 'responseGroupList') {
                this.groups = receivedData
                console.log("responseGroupList" + this.groups)
            }
        }
    },
    mounted() {
        this.baiduMap()
    },
    methods: {
        fetchData() {
            getFactoryList(this.$store.state.user.name).then(response => {
                this.list = response.data
                console.log( this.list  )
            })
        },
        baiduMap() {
            var map = new BMap.Map('allmap') // 创建地图实例

            var point = new BMap.Point(110.331398, 32.897445) // 创建点坐标
            map.centerAndZoom(point, 6) // 初始化地图，设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放

            map.addControl(new BMap.NavigationControl())
            map.addControl(new BMap.ScaleControl())
            map.addControl(new BMap.OverviewMapControl())
            map.addControl(new BMap.MapTypeControl())
            //map.setMapStyle({ style: 'midnight' }) //地图风格

            var marker = new window.BMap.Marker(point) // 创建标注
            map.addOverlay(marker) // 将标注添加到地图中

            //提示信息
            var infoWindow = new BMap.InfoWindow('这是提示信息')
            // 鼠标移上标注点要发生的事
            marker.addEventListener('mouseover', function() {
                this.openInfoWindow(infoWindow)
            })

            // 鼠标移开标注点要发生的事
            marker.addEventListener('mouseout', function() {
                this.closeInfoWindow(infoWindow)
            })
        }
    }



}
</script>


<style >
.baidumap {
    width: 100%;
    height: 650px;


}

/* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
    display: none !important;
}
.baidumap > .anchorBL {
    display: none !important;
}
</style>

如图为调用的百度地图页面