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 效果

相关推荐
mCell10 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip10 小时前
Node.js 子进程:child_process
前端·javascript
excel13 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel14 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼15 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping15 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙16 小时前
[译] Composition in CSS
前端·css
白水清风17 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix17 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780017 小时前
new、原型和原型链浅析
前端·javascript