Vue项目实战引入百度地图（一）

最新推荐文章于 2025-06-27 14:23:14 发布

原创最新推荐文章于 2025-06-27 14:23:14 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用百度地图API创建地图应用。首先，需在百度地图开放平台申请密钥，然后在HTML文件中引入地图API。通过JavaScript代码，可以实现在网页上展示地图、设置地图中心点和缩放级别等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、在 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)
         
  }

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