详解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 相关文章推荐
Jquery 自定义动画概述及示例
Mar 29 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
jquery 设置style:display的方法
Jan 29 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
AngularJS实现网站换肤实例
Feb 19 Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
Vue实现商品分类菜单数量提示功能
Jul 26 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
JS实现页面侧边栏效果探究
Jan 08 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 IP及IP段进行访问限制的代码
2008/12/17 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
PHP7 list() 函数修改
2021/03/09 PHP
改变javascript函数内部this指针指向的三种方法
2010/04/23 Javascript
JS自定义功能函数实现动态添加网址参数修改网址参数值
2013/08/02 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
JS去掉字符串前后空格或去掉所有空格的用法
2017/03/25 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
vue监听用户输入和点击功能
2019/09/27 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
python中enumerate的用法实例解析
2014/08/18 Python
Python with的用法
2014/08/22 Python
Python将阿拉伯数字转换为罗马数字的方法
2015/07/10 Python
详解 Python 与文件对象共事的实例
2017/09/11 Python
浅谈Pandas 排序之后索引的问题
2018/06/07 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
简单介绍django提供的加密算法
2019/12/18 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
DTD的含义以及作用
2014/01/26 面试题
环境科学专业大学生自荐信格式
2013/09/21 职场文书
培训演讲稿范文
2014/01/12 职场文书
中药专业毕业自荐书范文
2014/02/08 职场文书
房屋买卖授权委托书
2014/09/27 职场文书
表彰大会新闻稿
2015/07/17 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
docker 制作mysql镜像并自动安装
2022/05/20 Servers