vue.js的vue-cli脚本架中使用 百度地图js API

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

    1.申请密钥(百度地图开放平台-->开发文档-->web开发-->JavaScript  API-->立即使用-->创建应用)

    2.密钥申请成功后

第二步,在项目的需要模板中引入,具体如下:

项目路径

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

在百度地图开放平台 服务介绍中 选择我们所需要的地图类型  demo演示可查看

选择我们所需哪种百度地图的类型:http://lbsyun.baidu.com/index.php?title=jspopular

然后在某模板  例: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(114.30, 30.60), 11);// 初始化地图,设置中心点坐标(经纬度/城市的名称)和地图级别  
          map.addControl(new BMap.MapTypeControl({//添加地图类型控件  
            mapTypes:[  
              BMAP_NORMAL_MAP,  
              BMAP_HYBRID_MAP  
            ]}));  
          map.setCurrentCity("武汉");// 设置地图显示的城市 此项是必须设置的  
          map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放  
          //map.setMapStyle({style:'midnight'});//地图风格
        }  
      },  
      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>  

在html页面中使用百度接口步骤也如上面所示




如有不足请谅解!希望给您带来帮助。

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值