vue集成百度地图vue-baidu-map

文章目录

  • vue集成百度地图vue-baidu-map
  • [1. Vue Baidu Map文档地址](#1. Vue Baidu Map文档地址)
  • [2. 设置npm数据源](#2. 设置npm数据源)
  • [3. 安装vue-baidu-map](#3. 安装vue-baidu-map)
  • [4. 配置vue-baidu-map](#4. 配置vue-baidu-map)
    • [4.1 main.js全局注册](#4.1 main.js全局注册)
    • [4.2 vue页面设置](#4.2 vue页面设置)
    • [4.3 效果](#4.3 效果)

vue集成百度地图vue-baidu-map

1. Vue Baidu Map文档地址

shell 复制代码
https://dafrok.github.io/vue-baidu-map/#/zh/index

2. 设置npm数据源

shell 复制代码
npm config set registry=https://registry.npmmirror.com

查看npm数据源

shell 复制代码
npm config get registry

3. 安装vue-baidu-map

shell 复制代码
npm install vue-baidu-map --save

4. 配置vue-baidu-map

4.1 main.js全局注册

javascript 复制代码
import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {
  ak: ''
})

4.2 vue页面设置

index.vue

javascript 复制代码
<template>
<baidu-map class="bm-view" :center="center" :zoom="zoom" :scroll-wheel-zoom="true">
			<bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
			<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
			<bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
		</baidu-map>
</template>
  <script>
  export default {
	name: 'Index',
	components: {
	},
	data() {
	  return {
		lineChartData: lineChartData.newVisitis,
		center: {lng: 108.889191, lat:34.274342},
		zoom: 15
	  }
	},
  }
  </script>
<style>
  .bm-view {
	width: 100%;
	height: 500px;
  }
  </style>

4.3 效果

相关推荐
Fantastic_sj18 分钟前
JavaScript 数组方法和属性详解
javascript
JA+31 分钟前
vue 实时数据表格组件 (stk-table-vue)
前端·javascript·vue.js
那年窗外下的雪.42 分钟前
鸿蒙ArkUI布局与样式进阶(十二)——自定义TabBar + class类机制全解析(含手机商城底部导航案例)
开发语言·前端·javascript·华为·智能手机·harmonyos·arkui
IT_陈寒1 小时前
Python性能优化:5个被低估但效果惊人的内置函数实战解析
前端·人工智能·后端
00后程序员张1 小时前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
Rysxt_1 小时前
Electron 与 uni-app 区别教程:如何选择适合你的跨平台开发框架?
javascript·electron·uni-app·跨平台
似水流年QC1 小时前
Electron 实战|Vue 桌面端开发从入门到上线
vue.js·electron·桌面端
前端架构师-老李1 小时前
15、Electron专题:使用 electron-store 进行本地数据存储
前端·javascript·electron
小白学大数据1 小时前
双管齐下:结合显式等待与Timeout处理复杂Ajax网页
前端·javascript·ajax