前端框架Vue（9）——百度地图使用

最新推荐文章于 2025-05-09 15:39:51 发布

JesusAllen30

最新推荐文章于 2025-05-09 15:39:51 发布

阅读量3.6w

点赞数 6

分类专栏：前端框架Vue系列前端框架 Vue 初体验文章标签：百度地图

本文链接：https://blog.csdn.net/DOCALLEN/article/details/70877925

版权

百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。

该套API免费对外开放。自v1.5版本起，您需先申请密钥（ak）才可使用，接口无使用次数限制。

地址传送门：http://lbsyun.baidu.com/index.php?title=jspopular

文章说是栏目是前端框架Vue结合百度地图，这边还是主讲一下如何引入地图，以及部分 API 的使用。

1、申请密钥

百度地图的使用需要一个专属的密钥（ak）作为路径：

<script src='http://api.map.baidu.com/api?v=2.0&ak=你的密钥&callback=init'></script>

这里写图片描述

按步骤完成，并且激活就能获得一个密钥了，这样我们就可以开始引入地图了。

先来看效果图：

这里写图片描述

整体项目是用Vue做的，百度地图是其中的一个功能模块，这边了解一下如何将地图引入到Vue项目中：

1、首先我用的是vue-cli脚手架,这是目录结构：
这里写图片描述

现在在 index.html 中引入script:

script src='http://api.map.baidu.com/api?v=2.0&ak=你的密钥&callback=init'></script>

解释一下：v = 2.0是版本，ak 则是申请到的密钥，callback 回调初始化地图。

2、给定容器，调用 API 绘图

<template>
    <!--地图容器-->
    <div id="XSDFXPage" class="XSDFXPage"></div>
</template>
<script>
    export default {
        name:'',
        data () {
            return {

            }
        },
        mounted() {
            // 百度地图API功能
            // 创建Map实例

最低0.47元/天解锁文章