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

相关推荐
慢半拍iii11 分钟前
JAVA Web —— A / 网页开发基础
前端
gnip29 分钟前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty36 分钟前
基于hiprint的票据定位打印系统开发实践
javascript
新手村领路人2 小时前
Firefox自定义备忘
前端·firefox
乖女子@@@2 小时前
css3新增-网格Grid布局
前端·css·css3
百思可瑞教育2 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
伐尘3 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e3 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
非凡ghost3 小时前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
UrbanJazzerati3 小时前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试