最近公司项目里要用到百度地图，然后查阅了一些资料，并总结了下；

  1. 首先呢，由于本公司使用的是百度离线地图，那么我们首先需要将百度地图离线包放置static静态文件目录下（我的离线地图包名是“baidu_new_t”），然后在首页入口文件index.html里head标签里引入百度地图需要的js；

     <!DOCTYPE html>
    
     <html>
    
       <head>
    
         <meta charset="utf-8">
    
         <meta name="viewport" content="width=device-width,initial-scale=1.0">
    
         <title>mo</title>
    
         <!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你申请的秘钥"></script> -->//在线
    
         <script type="text/javascript" src="/static/baidu_new_t/js/apiv.2.0-wy.js"></script>
    
      </head>
    
     <body>
    
       <div id="app"></div>
    
       <!-- built files will be auto injected -->
    
    </body>
    
    <script type="text/javascript">

         document.body.onmousedown = function(){
    
             return false;
    
         }
    
    </script>
    
  </html>
  2. 然后在项目里新建一个百度地图组件：地图对象生成方法写在组件mounted方法里面，在需要的地方导入此组件即可使用； 
     <template>
    
     <div id="allmap"></div>
    
 </template>
    
 <script>
    
 //import BMap from 'BMap'
    
 export default {
    
     data(){
    
         return {

         }
    
     },
    
     mounted(){
    
        console.log(123123)
    
         if(BMap){
    
           var map =new BMap.Map("allmap");
    
           var point =new BMap.Point(116.404, 39.915);
    
           map.centerAndZoom(point,15);
    
           map.enableScrollWheelZoom();//启用滚轮放大缩小
    
           var marker =new BMap.Marker(point);
    
             map.addOverlay(marker);
    
         }
    
     }
    
 }
    
 </script>
    
 <style>
    
     #allmap {
    
         width: 200px;
    
         height: 200px;
    
     }
    
 </style>
  3. 注意点
    1. 本人使用的是离线地图，如果想要使用在线地图，再第一步骤里引入在线js即可；
    2. 如果使用vue-cli 3.x版本，需要将百度地图离线包放在public文件夹下；
    3. 需要将script标签写在body标签之前，否则mounted事件里面会存在找不到bmap

vue里使用百度地图的更多相关文章

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

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

  2. vue项目 调用百度地图 BMap is not defined

    这次老板新接了一个四点半官网页面,使用vue来写.emm……我感觉整个人都不好了,两天半解决了20个静态页面.还好vue写页面简直飞快,遇到一个vue的新坑,使用百度地图. 研究了好一会,总是报错BM ...

  3. Vue项目引入百度地图

    先去百度开放平台申请ak.http://lbsyun.baidu.com/ 进来之后 按照步骤走,先登录百度账号,然后申请成为开发者,然后申请ak密钥 填写完毕后提交,会给你邮箱发个激活邮件 点击申请 ...

  4. vue项目使用百度地图API获取经纬度

    一.首先在百度api注册获得ak密钥 二.进行引入 (1).第一种方式: 直接在vue中index.html中用script标签引入. //你的ak密钥需要替换真实的你的ak码 <script ...

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

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

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

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

  7. VUE之使用百度地图API

    利用vue创建点餐系统,在点餐系统中需要知道商家地址信息,这时就需要借用百度地图API. 步骤一:申请百度地图密钥: 步骤二:在index.html中添加百度地图JavaScript API接口: & ...

  8. vue中引入百度地图

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

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

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

随机推荐

  1. Observer(观察者)设计模式[转]

    Observer设计模式中主要包括如下两类对象: Subject:监视对象,它往往包含着其他对象所感兴趣的内容.在本范例中,热水器就是一个监视对象,它包含的其他对象所感兴趣的内容,就是tempratu ...

  2. HDU 5011 NIM博弈

    http://www.cnblogs.com/exponent/articles/2141477.html http://acm.hust.edu.cn/vjudge/contest/122814#p ...

  3. sublime常用设置

    原文地址 https://segmentfault.com/a/1190000002596724 前言 Sublime Text3 在文中简称为ST. ST是个不错的编辑器,我用了有段时间了,所以我觉 ...

  4. C# 读写xml、excel、word、ppt、access

    C# 读写xml.excel.word.access 这里只是起个头,不做深入展开,方便以后用到参考 读写xml,主要使用.net  的xml下的document using System;using ...

  5. Nginx集群（负载均衡）

    一.集群介绍 1.传统web访问模型 (1)传统web访问模型完成一次请求的步骤 1)用户发起请求 2)服务器接受请求 3)服务器处理请求(压力最大) 4)服务器响应请求 (2)传统模型缺点 单点故障 ...

  6. composer 实用总结

    1.在windows 下配置php环境变量 我电脑------右键属性-----高级系统设置-----环境变量---点击path----添加php.exe路径到环境变量 C:\phpStudy\php ...

  7. 自适应布局下echarts引起页面跳帧

    项目上突然遇到一个问题,鼠标快速滑动有echarts画的饼图时,页面出现了跳帧.布局的高度突然发生变化然后恢复正常.高度怎么会变化呢?都是按百分比来的啊? 经过一番仔细观察,在跳帧的时候页面底部闪过了 ...

  8. Linux在Tomcat下部署JavaWeb项目

    一.Linux快速部署War包操作 1.先关闭Tomcat /home/java/tomcat8/bin/shutdown.sh 注意:进入tomcat bin目录下操作 2.进入War包存放目录(可 ...

  9. 使用CKRule实现促销管理系统

    1, 常见的促销模型 促销管理系统在很多地方都有使用,大家去超市就经常体现到,感受到,不少中小型单位都其促销活动,要搞促销活动最好是有应用软件支持,这样就比较灵活管理也方便.而依靠手工处理的话效率会比 ...

  10. Android 马甲包制作流程

    一.马甲包的制作流程 1.配置马甲包的applicationId以及应用名称 在app的build.gradle文件中添加马甲包的配置 android { signingConfigs { confi ...