百度地图(vue-baidu-map)的使用

最新推荐文章于 2024-04-25 20:43:12 发布

just_xiaowei

最新推荐文章于 2024-04-25 20:43:12 发布

阅读量274

点赞数

分类专栏：地图文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/just_xiaowei/article/details/128945899

版权

地图专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue项目中安装和使用vue-baidu-map插件，通过npm或yarn安装后，导入并配置ak，然后在模板中创建地图，设置中心点和缩放级别。示例中展示了添加一个可拖动且有弹跳动画的标记（bm-marker），以及设置标签（bm-label）的内容、样式和偏移位置。

摘要由CSDN通过智能技术生成

网址（中文）：https://dafrok.github.io/vue-baidu-map/#/zh/index

安装

npm install vue-baidu-map --save
或者
yarn add vue-baidu-map

引入

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

使用

<template>
  <div>
    <baidu-map class="map" :center="{ lng: 116.404, lat: 39.915 }" :zoom="15">
      <!-- “BMAP_ANIMATION_NONE”，无动画效果、“BMAP_ANIMATION_DROP”，点标掉落果、“BMAP_ANIMATION_BOUNCE”，点标弹跳效果  -->
      <bm-marker
        :position="{ lng: 116.404, lat: 39.915 }"
        :dragging="true"
        animation="BMAP_ANIMATION_BOUNCE"
      >
      <!-- labelStyle文本样式 -->
      <!-- offset标注的位置偏移值 -->
        <bm-label
          content="哭唧唧"
          :labelStyle="{ color: 'red', fontSize: '16px' }"
          :offset="{ width: -20, height: 30 }"
        />
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
export default {};
</script>

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