详解vue在项目中使用百度地图


Posted in Javascript onMarch 26, 2019

第一步,去百度地图开发者申请秘钥。

第二步在项目中引入,具体如下

详解vue在项目中使用百度地图

其中index.html存放地图链接,代码如下

详解vue在项目中使用百度地图

然后在APP.vue里面实现,代码如下

<template>
 <div id="app">
  <div id="allmap" ref="allmap"></div>
  <router-view></router-view>
 </div>
</template>
 
<script>
export default {
 name: 'App',
 methods:{
  map(){
   let map =new BMap.Map(this.$refs.allmap); // 创建Map实例
   map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);// 初始化地图,设置中心点坐标和地图级别
   map.addControl(new BMap.MapTypeControl({//添加地图类型控件
    mapTypes:[
     BMAP_NORMAL_MAP,
     BMAP_HYBRID_MAP
    ]}));
   map.setCurrentCity("北京");// 设置地图显示的城市 此项是必须设置的
   map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
  }
 
 },
 mounted(){
  this.map()
 
 }
}
</script>
 
<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
#allmap{
 height: 500px;
 overflow: hidden;
 
}
</style>

以上所述是小编给大家介绍的vue在项目中使用百度地图详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
JavaScript插件化开发教程 (三)
Jan 27 Javascript
JavaScript构造函数详解
Dec 27 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
基于JavaScript实现多级菜单效果
Jul 25 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
解决angular2 获取到的数据无法实时更新的问题
Aug 31 Javascript
vue如何进行动画的封装
Sep 26 Javascript
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 #jQuery
vue进入页面时滚动条始终在底部代码实例
Mar 26 #Javascript
详解原生JS动态添加和删除类
Mar 26 #Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 #Javascript
监听element-ui table滚动事件的方法
Mar 26 #Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 #Javascript
node之本地服务器图片上传的方法示例
Mar 26 #Javascript
You might like
在线竞拍系统的PHP实现框架(二)
2006/10/09 PHP
PHP经典的给图片加水印程序
2006/12/06 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
jQuery使用手册之二 DOM操作
2007/03/24 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
引用jquery框架后出错的解决方法
2016/08/09 Javascript
老生常谈js中的MVC
2017/07/25 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
详解vue-cli@2.x项目迁移日志
2019/06/06 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
python简单实现旋转图片的方法
2015/05/30 Python
在Django中创建第一个静态视图
2015/07/15 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
python读取oracle函数返回值
2016/07/18 Python
Python编程argparse入门浅析
2018/02/07 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python issubclass 和 isinstance函数
2019/07/25 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
解决Django连接db遇到的问题
2019/08/29 Python
Python猜数字算法题详解
2020/03/01 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
Python join()函数原理及使用方法
2020/11/14 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
世界上最大的乐器零售商:Guitar Center
2017/11/07 全球购物
饭店工作计划书
2014/01/10 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
mybatis中sql语句CDATA标签的用法说明
2021/06/30 Java/Android
浅谈MySQL函数
2021/10/05 MySQL