[JavaScript知识库]安装并使用百度地图【vue】

1.安装依赖

npm install vue-baidu-map -s

在等待的时候可以去申请百度地图API

2.导入依赖

在main.js中导入

//导入百度地图
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap , {
  ak:'申请的秘钥'
})

申请使用百度地图API

3.创建vue文件

复制下面的代码，才会出现东西

<template>
  <baidu-map
    :center="{ lng: 116.403963, lat: 39.915119 }"
    :zoom="100"
    style="height: 600px; width: 100%"
    :scroll-wheel-zoom="true"
  ></baidu-map>
</template>

• center是经纬度
  • lng：经度
  • lat：维度

可以去 拾取坐标系统 找

• ** zoom这是关键，如果没有会出现下面的现象 **

• scroll-wheel-zoom：滚轮可控制放大缩小

官方API

最终效果