Vue项目实战引入百度地图(一)

一、在 http://lbsyun.baidu.com/ 申请 秘钥

二、在index.html文件中引入

<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=Fh9X4hT3ygcBMZnlPbRlMG508r0OCqsk"></script>

三、在需要引入的页面

<div id="allmap" style="height:100%"></div>


methods: {
    ready: function(x, y) {
        var map = new BMap.Map('allmap')//显示标签
        var point = new BMap.Point(x, y)
        
        map.addControl(new BMap.MapTypeControl())
        map.enableScrollWheelZoom(true)//启用滚轮放大缩小,默认禁用
        map.enableContinuousZoom(); //启用地图惯性拖拽,默认禁用
        map.enableDoubleClickZoom(true)
        var marker = new BMap.Marker(point)
      
        
        map.addOverlay(marker)
 
        map.centerAndZoom(point, 15)// 初始化地图,设置城市和地图级别。
        map.centerAndZoom(point, 14)// 初始化地图,设置城市和地图级别。
    },
 },
  mounted(){
      //this.ready(x,y)
      this.ready(120,30)
         
  }

在这里插入图在这里插入图片描述片描述

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值