VUE项目中引入百度地图

最新推荐文章于 2024-11-19 14:10:36 发布

原创

最新推荐文章于 2024-11-19 14:10:36 发布 · 3.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#VUE项目中引入百度地图 #VUE项目中使用地图

本文介绍了如何在Vue项目中引入并使用百度地图API。首先，你需要在百度地图官网申请一个AK秘钥。然后，通过在HTML模板中添加特定的script标签引入API。接着，你可以在组件中实现地图展示的相关代码。

使用百度地图js API 前，需要申请应用的ak 秘钥，在官网上自己申请即可；
普通的 html 文件中只要给定script标签如： <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己的ak秘钥"></script>

如下：

地图下代码如下：

<template>
  <el-row class="warp">
    <el-col :span="24" class="warp-main">
      <div>
        <div id="allmap"></div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
  export default{
 name: 'bd-map',
  props: {
    pname: {
      type: String,
      default: function () {