Nuxt.js使用百度地图vue-baidu-map

1.首先我们在项目中需要先安装vue-baidu-map包，使用下面命令安装

npm i vue-baidu-map --save-dev

如果遇到安装失败可以采用cnpm，或者yarn的方式进行安装，在这里就不在进行演示了。

2.安装完成后我们要对vue-baidu-map组件进行注册使用，我们找到plugins进行新建map.js文件

import BaiduMap from 'vue-baidu-map'
import Vue from 'vue'
Vue.use(BaiduMap, {
  ak: '申请的百度地图密匙'
})

这里的ak是百度地图的密钥，如果要使用百度地图就必须用到密钥，如果没有密钥可点击该链接进行申请

http://lbsyun.baidu.com/apiconsole/key

3.注册完成后我们要进行一个全局的引用，需要在nuxt.config.js文件中引入

plugins: [
    { src: "~plugins/map.js", ssr: false },
  ],

4.以上步骤都完成后我们就可以使用百度地图的应用了

<template>
  <div>
    <baidu-map class="bdwindow" :dragging="dragging" :center="center" :zoom="zoom" style="height:500px" :scroll-wheel-zoom='scroll'>
          <bm-info-window :position="center" :title="title" :show="show">
              <p class="bdwtext" v-html="contents"></p>
          </bm-info-window>
    </baidu-map>
  </div>
</template>
<script>
export default {
  data () {
        return {
            jump_path:"",
            center: {lng: 120.4373010751, lat: 23.1095638170},
            zoom: 15,  //缩放级别
            title:"标题",
            contents: '地址：具体地址信息',  //标签内容
            show: true,  //显示标签
            scroll:true,  //地图缩放
            dragging:true,  //地图拖拽
        }
    }
}
</script>

这样就我们的百度地图就可以正常使用了

百度地图官方文档：https://dafrok.github.io/vue-baidu-map/#/zh/start/usage，需要什么效果可以去官方找，找到后，把代码复制粘贴到baidu-map标签下就可使用