zoukankan      html  css  js  c++  java
  • vue中使用百度地图vue-baidu-map

    安装

    npm install vue-baidu-map --save

    全局注册

    全局注册将一次性引入百度地图组件库的所有组件。需在入口文件main.js中引入vue-baidu-map

    import Vue from 'vue'
    import BaiduMap from 'vue-baidu-map'
    
    Vue.use(BaiduMap, {
      // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
      ak: 'YOUR_APP_KEY'
    })

    因为是全局注册的,所以你可以在任何组件中直接使用:

    <template>
      <baidu-map class="bm-view">
      </baidu-map>
    </template>
    
    <style>
    .bm-view {
      width: 100%;
      height: 300px;
    }
    </style>

    局部注册

    如果有按需引入组件的需要,可以选择局部注册百度地图组件,这将减少工程打包后的容量尺寸。局部注册的 BaiduMap 组件必须声明 ak 属性。 所有的独立组件均存放在 vue-baidu-map/components 文件夹下,按需引用即可。 由于未编译的 ES 模块不能在大多数浏览器中直接运行,如果引入组件时发生运行时错误,请检查 webpack 的 loader 配置,确认 include 和 exclude 选项命中了组件库。

    <template>
      <baidu-map class="bm-view" ak="YOUR_APP_KEY">
      </baidu-map>
    </template>
    
    <script>
    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
    export default {
      components: {
        BaiduMap
      }
    }
    </script>
    
    <style>
    .bm-view {
      width: 100%;
      height: 300px;
    }
    </style>

    点我查看官方文档

  • 相关阅读:
    开启防火墙如何部署k8s
    docker及k8s安装consul
    docker安装rocketmq
    docker安装gitlab
    k8s认证与授权
    部署dashboard
    k8sStatefulSet控制器
    k8sSecret资源
    k8sConfigMap资源
    使用nfs制作动态分配存储卷
  • 原文地址:https://www.cnblogs.com/Mrrabbit/p/11098289.html
Copyright © 2011-2022 走看看