百度地图开发平台

vue2中使用

链接地址：lbsyun.baidu.com/ 页面中点击控制台——>应用管理——>我的应用，查看百度地图ak密钥

用法：

第一：npm i vue-baidu-map --save

第二：入口文件main.js中引入

import BaiduMap from 'vue-baidu-map';

Vue.use(BaiduMap, { 
    ak: '刚才在开发平台控制台获取的密钥ak' 
})

第三:组件中写入

    <template>
        <baidu-map class="bm_view" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true">
        </baidu-map>
    </template>

    <script>
    export default {
        data() {
            return {
                center: { lng: 0, lat: 0 },
                zoom: 3
            };
        },
        methods: {
            handler({ BMap, map }) {
                console.log('========================', BMap, map);
                this.center.lng = 116.404;
                this.center.lat = 39.915;
                this.zoom = 15;
            }
        }
    };
    </script>

    <style lang="scss" scoped>
        .bm_view {
            width: 100%;
            height: 100%;
        }
    </style>

vue3中使用

1、在public/index.html中引入

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

2、渲染地图

<!-- vue 3 引入百度api -->
<template>
  <div id="allmap"></div>
</template>
 
<script>
import { defineComponent, nextTick, onMounted } from "vue";
export default defineComponent({
  setup() {
    onMounted(() => {
      nextTick(() => {
        initMap();
      });
    });
    const initMap = () => {
      let Bmap = window.BMap;
      let map = new Bmap.Map("allmap");
      map.centerAndZoom(new Bmap.Point(104.04263635868074, 30.556100647961866),11);
    };
    return {} ;
  },
});

</script>
<style  scoped>
  #allmap {
    width: 100%;
    height: 400px;
  }
</style>