百度地图开放平台的使用

1.百度开放平台配置

　　注册账号，申请成为开发者

　　获取服务密钥AK

　　进入控制台创建应用获取到AK

　　配置白名单(如果是前端基本是浏览器端，后端的话可以自适应修改为服务器端)

2.Vue部分配置(组件化)

　　使用npm下载安装百度地图

命令:  npm install vue-baidu-map --save

　　main.js中引入

import BaiduMap from 'vue-baidu-map'
Vue.use( BaiduMap, { ak : '上面生成的ak' } )

　　这个是在线版本，如果使用本地版的就需要自己去下载百度地图的包

　　在页面page文件夹内新建components文件夹

　　在新建的components文件夹内新建vue文件，进行配置

直接上代码

<template>
    <div id="container"></div>
</template>
 
<script>
export default {
    name: 'DemoMap',

    data() {
        return {

        };
    },

    mounted() {
        var map = new BMapGL.Map("container");
        var point = new BMapGL.Point(要显示位置的经度，纬度);
        map.centerAndZoom(point, 15);
        map.enableScrollWheelZoom();
        var marker = new BMapGL.Marker(point);
        map.addOverlay(marker);               // 将标注添加到地图中
        marker.setAnimation(BMAP_ANIMATION_BOUNCE);
    },

    methods: {

    },
};
</script>
 
<style lang="less" scoped>
#container {
    width: 1200px;
    height: 400px;
    margin: 100px auto;
}
</style>

做完这些这个组件已经做完了，可以引入到页面内使用了。