• 欢迎访问春风博客

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

运维笔记 yongchao, li 2年前 (2020-06-19) 1415次浏览 0个评论

vue-baidu-map文档:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage

安装vue-baidu-map:npm i vue-baidu-map -D

在plugins新建map.js:(名字是,map.js):

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

在页面中使用:

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

 


ChunBlog.Com , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Nuxt.js使用百度地图vue-baidu-map
喜欢 (19)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址