Vue3使用vue-baidu-map-3x百度地图

枕着光的她

已于 2024-02-05 16:49:04 修改

阅读量1.4k

点赞数 9

分类专栏： Vue 文章标签： vue.js 前端 javascript

于 2023-12-04 18:29:29 首次发布

本文链接：https://blog.csdn.net/m0_69838795/article/details/134790919

版权

Vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

安装vue-baidu-map-3x：

// vue3
$ npm install vue-baidu-map-3x --save

// vue2
$ npm install vue2-baidu-map --save

全局注册/局部注册：

import { createApp } from 'vue'
import App from './App.vue'
import BaiduMap from 'vue-baidu-map-3x'

const app = createApp(App);

app.use(BaiduMap, {
  // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: '百度地图ak',
  // v:'2.0',  // 默认使用3.0
  // type: 'WebGL' // ||API 默认API  (使用此模式 BMap=BMapGL)
});
app.mount('#app');

<template>
  <baidu-map class="bm-view" :zoom="12" :center="{lng: 116.404, lat: 39.915}" >
  </baidu-map>
</template>

<style>
.bm-view {
  width: 100%;
  height: 300px;
}
</style>

局部注册：

<template>
  <baidu-map class="map" ak="BaiduMapAK" v="3.0" type="API" :center="{lng: 116.404, lat: 39.915}" :zoom="15">
  </baidu-map>
</template>

<script setup>
import { BaiduMap } from 'vue-baidu-map-3x'
</script>

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

自定义覆盖物：