Vue中引入百度地图

骚年，你说我说的对不对呀！

附上一波百度地图的兼容性

• 浏览器：IE 6.0+、Firefox 3.6+、Opera 9.0+、Safari 3.0+、Chrome
• 操作系统：Windows、Mac、Linux
• 移动平台：iPhone、Android

直接怼代码

• 在index.html文件中直接引用

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

• 关于ak密钥自己去开发者中心去申请哈，给你们开个传送门
  传送门：申请ak密钥

• 地图的组件代码

    <template>
        <div style="height:100%;">
            <div class="map" id="Map">
            </div>
        </div>
    </template>
  
    <script>
    export default {
        name: "bdMap",
        components: {},
        data() {
            return {};
        },
        mounted() {
            const map = new BMap.Map("Map");
            // 创建地图实例
            const point = new BMap.Point(116.404, 39.915);
            // 创建点坐标
            map.centerAndZoom(point, 15);
            // 初始化地图，设置中心点坐标和地图级别
        }
    };
  </script>
  
  <style scoped>
    .map {
        width: 100%;
        height: 500px;
    }
   </style>
  

• 效果图

  
  效果图

是不是看到左下角没有百度地图的logo和版本信息

• 直接在index.html中加入如下代码即可

        <style>
            .BMap_cpyCtrl {
                display: none;
            }
            .anchorBL {
                display: none;
            }
        </style>
  

这里卿洋
愿喜❤️