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

     更新时间:2019年03月26日 16:00:38   作者:爱吃排骨   我要评论

    这篇文章主要介绍了vue在项目中使用百度地图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

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

    然后在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("?#26412;?);// 设置地图显示的城市 此项是必须设置的
       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在项目中使用百度地图详解整合,希望对大家有所帮助,如果大家有任?#25105;?#38382;请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    相关文章

    • 最适应的vue.js的form提交涉及多种插件【推荐】

      最适应的vue.js的form提交涉及多种插件【推荐】

      这篇文章主要介绍了最适应的vue.js的form提交涉及多种插件,涉及到 vue.js动态添加css样式 ,tab?#35874;?,touch,表单提交,验证,toast,数据双向绑定等。需要的朋友可以参考下
      2018-08-08
    • 基于VUE选择上传图片并页面显示(图片可删除)

      基于VUE选择上传图片并页面显示(图片可删除)

      这篇文章主要为大家详细介绍了基于VUE选择上传图片并页面显示,图片可以删除的效果,具有一定的参考价值,感兴趣的小伙伴们可以参?#23478;?#19979;
      2017-05-05
    • JS框架之vue.js(深入三:组件1)

      JS框架之vue.js(深入三:组件1)

      这篇文章主要介绍了JS框架之vue.js component组件的相关资料,本文通过实例详解的方式给大家介绍的非常详细,具有参考借鉴价值,需要的朋友可以参考下
      2016-09-09
    • 浅析vue深复制

      浅析vue深复制

      这篇文章主要介绍了vue深复制的相关资?#24076;?#38750;常不错,具有参考借鉴价值,需要的朋友参考下
      2018-01-01
    • vue.js input框之间赋值方法

      vue.js input框之间赋值方法

      今天小编就为大家分享一篇vue.js input框之间赋值方法具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
      2018-08-08
    • vue.js自定义组件directives的实例代码

      vue.js自定义组件directives的实例代码

      这篇文章主要介绍了vue.js自定义组件directives的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
      2018-11-11
    • 详解如何在vue中使用sass

      详解如何在vue中使用sass

      本篇文章主要介绍了详解如何在vue中使用sass,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
      2017-06-06
    • vue实现引入本地json的方法分析

      vue实现引入本地json的方法分析

      这篇文章主要介绍了vue实现引入本地json的方法,结合实例形式分析了vue.js加载本地json文件及解析json数据相关操作?#35760;?需要的朋友可以参考下
      2018-07-07
    • Vue监听数组变化源码解析

      Vue监听数组变化源码解析

      这篇文章主要为大家详细解析了Vue监听数组变化的源码,具有一定的参考价值,感兴趣的小伙伴们可以参?#23478;?#19979;
      2017-03-03
    • vue-router中的hash和history两种模式的区别

      vue-router中的hash和history两种模式的区别

      大家都知道vue-router有两种模式,hash模式和history模式,这里来谈谈vue-router中的hash和history两种模式的区别。感兴趣的朋友一起看看吧
      2018-07-07

    最新评论

    山东群英会开奖查询
      1. 河南11选5技巧稳赚 1青海11选5开奖结果 福彩浙江快乐12在线 刘伯温心水论坛大全 阿甲升降级2019规则 浙江十一选五开奖时间 排列五合买 极速11选5走势图 双色球基本走势图图表2元 吉林快三合吉林快三走势图 赛马会一波中特 德州扑克在前 福利彩票双色球基本走势图 nba让分胜负怎么判定 体育彩票超级大乐透