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）:
|
1 2 3 4 5 |
import BaiduMap from 'vue-baidu-map' import Vue from 'vue' Vue.use(BaiduMap, { ak: '申请的百度地图密匙' }) |
在页面中使用：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<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> |
