Nuxt.js使用百度地图vue-baidu-map
vue-baidu-map文档:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage在plugins新建map.js:import BaiduMap from 'vue-baidu-map'import Vue from 'vue'Vue.use(BaiduMap, {ak: '申请的百度地图密匙'})在nuxt....
·
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:
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>
展现效果:
vue-baidu-map文档:https://dafrok.github.io/vue-baidu-map/#/zh/start/usage
更多推荐
已为社区贡献18条内容
所有评论(0)