安装

$ npm install vue-baidu-map --save

全局注册

在main.js 里面引入以下代码

import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {ak: '百度地图密钥AK'
})

使用方法

<doc-preview><baidu-map class="map" style="display: flex; flex-direction: column" center="北京"><p style="padding: 0 10px;">以下是使用 `bm-view` 组件渲染的百度地图实例</p><bm-view style="width: 100%; height:100px; flex: 1"></bm-view></baidu-map>
</doc-preview>

局部注册

1.按需加载需要的组件，百度地图提供的所有组件可以在依赖中找到，路径\node_modules\vue-baidu-map\components\index.js

import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch} from 'vue-baidu-map'export default {components: {BaiduMap,BmView,BmControl,BmAutoComplete,BmLocalSearch}
}

<template><baidu-map class="bm-view" v-bind="mapOptions"><bm-control :offset="{width: '10px', height: '10px'}"><bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}"></bm-auto-complete></bm-control><bm-local-search :keyword="keyword" :auto-viewport="true" ></bm-local-search>
</baidu-map></template><script>import {BaiduMap, BmControl, BmView, BmAutoComplete, BmLocalSearch} from 'vue-baidu-map'
export default {components: {BaiduMap,BmView,BmControl,BmAutoComplete,BmLocalSearch},data() {return {mapOptions: {ak: 'ak',center: '广州',scrollWheelZoom: true},keyword: ''}},methods: {}
}
</script><style>
.bm-view {width: 100%;height: 300px;
}
</style>

vue调用百度地图API相关推荐

vue调用百度地图API实现点击相应位置切换地图定位
vue调用百度地图API实现点击相应位置切换地图定位 1.需求分析在页面显示地图,初始状态显示上海市,地图上有特定地点的标注. 左侧为建筑(地点)列表,点击某个地点右侧地图定位到其地理位置并显示具体 ...
vue调用百度地图API输入提示示例下拉列表一直被触发问题
2019独角兽企业重金招聘Python工程师标准>>> 先看图然后点确定,居然下拉框又被触发了,而且在添加页面各种输入框只要一输入文字就会触发地图下拉框展示,很恶心的一个bug,不 ...
【c#】Form调用百度地图api攻略及常见问题
首先,在Form中调用百度地图api,我们需要使用webbrowser控件,这个在前面的文章中已经讲过了,可以参照(http://blog.csdn.net/buptgshengod/article/ ...
C#调用百度地图API入门解决BMap未定义问题
本文主要是最近帮助好友研究JavaScript的百度地图API,同时显示到C# Winform界面.同时遇到了BMap未定义的错误(BMap is not defined)及解决方法.以前写过基于An ...
Vue引用百度地图API
Vue引用百度地图API 一. 通过官网申请ak 1. 打开百度地图官网,在开发文档中找到JavaScript API 2.点击账号和获取密钥 3.按照页面步骤操作即可二. 通过模块化引入 1. 安 ...
调用百度地图API出现 error inflating class com.baidu.mapapi.map.mapview
调用百度地图API出现 error inflating class com.baidu.mapapi.map.mapview 问题如下本来以为解决了,但后来重新运行了一下,又坏了,然后改成原来的样子 ...
python调用百度地图API爬取西安市POI数据
任务前提做该项目之前,首先得有基础知识: 编程语言:python 编译工具:PyCharm 网络爬虫相关知识,xpath库,numpy,pandas等库. 任务准备: 去百度地图开放平台申请密匙:h ...
c语言api获取百度地图,H5调用百度地图API获取地理位置
//获取当前位置 var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(r){ alert ...
java 地图api接口_Java调用百度地图API
本实战代码将使用百度地图的接口来实现以下功能: 1.确定输入地址的坐标 2.两个坐标的距离其他的话,还要使用百度账户申请相关的api,具体见: http://lbsyun.baidu.com/ind ...

vue调用百度地图API

安装

全局注册

使用方法

局部注册

1.按需加载需要的组件，百度地图提供的所有组件可以在依赖中找到，路径\node_modules\vue-baidu-map\components\index.js

vue调用百度地图API相关推荐

最新文章

热门文章