1.项目根目录下下载百度地图插件

  npm install vue-baidu-map –save

2.在首页index.html中引入百度地图:

  <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=秘钥"></script>

  我申请的密钥为  :3bVHdeo2ZZaZO4QczC63d0kMsbA55ZSD

3.在显示地图的组件中 template 中:

   <div class="baidumap" id="allmap"></div>    //地图的容器

4.在显示地图的组件中 script 中: 

export default {
name: 'pm-distribution',
components: { },
mounted() {
this.baiduMap()
},
methods: {
baiduMap() {
var map = new BMap.Map('allmap') // 创建地图实例 var point = new BMap.Point(116.331398, 39.897445) // 创建点坐标
map.centerAndZoom(point, 15) // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom(true) //开启鼠标滚轮缩放 map.addControl(new BMap.NavigationControl())
map.addControl(new BMap.ScaleControl())
map.addControl(new BMap.OverviewMapControl())
map.addControl(new BMap.MapTypeControl())
//map.setMapStyle({ style: 'midnight' }) //地图风格 var marker = new window.BMap.Marker(point) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中 //提示信息
var infoWindow = new BMap.InfoWindow('这是提示信息')
// 鼠标移上标注点要发生的事
marker.addEventListener('mouseover', function() {
this.openInfoWindow(infoWindow)
}) // 鼠标移开标注点要发生的事
marker.addEventListener('mouseout', function() {
//this.closeInfoWindow(infoWindow)
})
}
}
}

5.在显示地图的组件中 style 中改变一下默认样式:   

.baidumap {
width: 1000px;
height: 500px;
border: 1px solid red;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
} /* 去除百度地图版权那行字 和 百度logo */
.baidumap > .BMap_cpyCtrl {
display: none !important;
}
.baidumap > .anchorBL {
display: none !important;
}

完成!!!!

vue中实现百度地图的更多相关文章

  1. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

  2. Vue中使用百度地图——根据输入框输入的内容,获取详细地址

    知识点:在Vue.js项目中调用百度地图API,实现input框,输入地址,在百度地图上定位到准确地址,获得到经纬度 参考博客:  百度地图的引用,初步了解参考博客:http://blog.csdn. ...

  3. Vue --》 如何在vue中调用百度地图

    1.项目根目录下下载百度地图插件 npm install vue-baidu-map –save 2.在首页index.html中引入百度地图: <script type="text/ ...

  4. vue 中结合百度地图获取当前城市

    首先需要去百度地图开发者平台申请 ak http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5 在index.html 中引入script ...

  5. vue中引入百度地图

    xxx.vue <template> <div> <el-input v-model="inputaddr"> </el-input> ...

  6. vue中使用百度地图vue-baidu-map

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

  7. VUE 中引入百度地图(vue-Baidu-Map)

    1.安装 $ npm install vue-baidu-map --save 2.全局注册,在main.js中引入以下代码 import BaiduMap from 'vue-baidu-map' ...

  8. vue 中引用 百度地图

    1.在 http://lbsyun.baidu.com/ 申请 秘钥 2.在index.html文件中引入 <script src="http://api.map.baidu.com/ ...

  9. vue中使用百度地图,悬浮窗搜索功能

    https://www.cnblogs.com/shuaifing/p/8185311.html 侵删 <template> <div id="all"> ...

随机推荐

  1. C数据结构(文件操作,随机数,排序,栈和队列,图和遍历,最小生成树,最短路径)程序例子

    文件操作 文件打开方式               意义     ”r” 只读打开一个文本文件,只允许读数据     ”w” 只写打开或建立一个文本文件,只允许写数据     ”a” 追加打开一个文本 ...

  2. MATLAB数值计算——0

    目录 MATLAB数值计算 1.solve() 2.fzero() 3.fsolve() MATLAB数值计算 MATLAB中文论坛基础板块常见问题归纳(出处: MATLAB中文论坛) 登录http: ...

  3. python让你再也不为文章配图与素材发愁,让高清图片占满你的硬盘! #华为云·寻找黑马程序员#

    欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...

  4. springboot整合activiti

    1.第一步添加bpmn文件得插件,不然没法查看和编辑bpmn文件,添加插件的方法各自百度即可,很简单 2.安装好bpmn插件后开始新建bpmn文件,也就是画流程图 一般是在代码中进行指定流程审批人的, ...

  5. 数据库Oracle的子查询练习

    1.写一个查询显示与 Zlotkey 的 在同一部门的雇员的 last name和 hire date,结果中不包括 Zlotkey --1.写一个查询显示与 Zlotkey 的 在同一部门的雇员的 ...

  6. openlayers5-webpack 入门开发系列结合 turf.js 实现等值线(附源码下载)

    前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...

  7. variable fonts - 更小更灵活的字体

    原文链接 variable fonts(下文中vf为缩写)是数字时代制作的字体技术,用更小的文件大小在web上提供更丰富的排版,但是一项新的技术往往伴随着新的挑战和复杂未知的情况.不过,我们要拥抱技术 ...

  8. FIve in a row

    Alice and Bob play 5-in-a-row game. They have a playing field of size 10 × 10. In turns they put eit ...

  9. CodeForces-1006B-Polycarp's Practice

    B. Polycarp's Practice time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  10. cmd 窗口中运行 Java 程序

    1.CMD 命令提示符(Command Processor)(CMD) CMD命令:开始->运行->键入 cmd(在命令行里可以看到系统版本.文件系统版本) 2.对文件夹操作的部分命令 启 ...