Vue cli3 + vue-baidu-map 百度地图学习笔记

小小并不小

于 2020-04-24 13:03:49 发布

阅读量1.9k

点赞数

分类专栏： Vue 文章标签：百度 vue js

本文链接：https://blog.csdn.net/c153284575/article/details/105725083

版权

Vue 专栏收录该内容

30 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成百度地图API，包括创建项目、安装和配置百度地图插件、局部注册组件以及设置地图的基本属性。通过具体代码示例，帮助读者快速上手。

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

1、创建项目
npm create bai-du-map

2、启动项目
cd bai-du-map
npm run serve

3、安装百度地图
npm install vue-baidu-map --save
全局注册

main.js
	import Vue from 'vue'
	import BaiduMap from 'vue-baidu-map'
	Vue.use(BaiduMap, {
	  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
	  ak: 'YOUR_APP_KEY' // 这里填写申请的秘钥
	})

4、创建views->BaiDuMap.vue
局部注册

<template>
  <div class="map-warp">
    <baidu-map
      class="map"
      ak="ufeGpwfCdo4WLZKtSVoOQXfMwykKkyov"
      :center="center"
      :zoom="zoom"
      @ready="handler"
    ></baidu-map>
  </div>
</template>

<script>
  import BaiduMap from 'vue-baidu-map/components/map/Map'
  
  export default {
    name: "BaiDuMap",
    components: {
      BaiduMap
    },
    data() {
      return {
        center: { lng: 0, lat: 0 }, // //经纬度
        zoom: 15 // //地图展示级别
      }
    },
    methods: {
      handler ({BMap, map}) {
        console.log(BMap, map)
        this.center.lng = 118.83500
        this.center.lat = 32.0835479
      }
    },
  }
</script>

<style>
  .map {
    width: 100%;
    height: 400px;
  }
</style>