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

傷城~ 2023-05-28 05:17 76阅读 0赞

**vue-baidu-map文档：[https://dafrok.github.io/vue-baidu-map/\#/zh/start/usage][https_dafrok.github.io_vue-baidu-map_zh_start_usage]**

安装vue-baidu-map

npm i vue-baidu-map -D

在plugins新建map.js:

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

在nuxt.config.js中引入：

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

在页面中使用：

<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>

展现效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70][]

**vue-baidu-map文档：[https://dafrok.github.io/vue-baidu-map/\#/zh/start/usage][https_dafrok.github.io_vue-baidu-map_zh_start_usage]**

[https_dafrok.github.io_vue-baidu-map_zh_start_usage]: https://dafrok.github.io/vue-baidu-map/#/zh/start/usage
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70]: /images/20230528/9b12cc2535b2417ca155cae087f68ace.png