vue3使用百度地图超详细图文教程.docx

第

vue3使用百度地图超详细图文教程

目录前情提要：申请百度地图AK秘钥开启Vue3使用vue-baidu-map-3x：1.安装2.应用1.初始展示2.控件3.自定义主题4.覆盖物--点总结

前情提要：

提示：该博客vue采用vue3，使用百度地图通过组件vue-baidu-map-3x：

组件官网：/doc/baidu-map.html

下面会从头开始介绍如何使用百度地图以及常用组件功能(附带遇到的问题和解决方案)

申请百度地图AK秘钥

步骤：1.进入百度地图开放平台|百度地图APISDK|地图开发2.打开顶部控制台3.找到应用管理中-我的应用-创建应用

注意：1.前端开发选择浏览器端，2.必须配置白名单，只有该白名单中的网站才能成功发起调用，多个域名之间请用英文半角逗号隔开，如果不想对任何域名做限制，设置为英文半角星号*

接下来复制AK

开启Vue3使用vue-baidu-map-3x：

1.安装

安装vue-baidu-map-3x：npminstallvue-baidu-map-3x--save：

全局注册：在main.js中

局部注册：局部注册这边请

注意事项：1.BaiduMap组件容器本身是一个空的块级元素，如果容器不定义高度，百度地图将渲染在一个高度为0不可见的容器内

2.没有设置center和zoom属性的地图组件是不进行地图渲染的。当center属性为合法地名字符串时例外，因为百度地图会根据地名自动调整zoom的值

3.由于百度地图JSAPI只有JSONP一种加载方式，因此BaiduMap组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的ready事件来执行地图API加载完毕后才能执行的代码，不要试图在vue自身的生命周期中调用BMap类，更不要在这些时机修改model层

2.应用

1.初始展示

注意：地图初始须设置center，zoom否则地图不会初始化，地图须设置高度才能展示，且必须设置宽高

template

baidu-map

:center={lng:116.404,lat:39.915}

:zoom=15

/baidu-map

/template

scriptsetup

/script

stylescoped

.bm-view{

width:100%;

height:80%;

/style

2.控件

控件属性：

1.anchor：控件所在方位可选(BMAP_ANCHOR_TOP_LEFT,BMAP_ANCHOR_TOP_RIGHT,BMAP_ANCHOR_BOTTOM_LEFT，BMAP_ANCHOR_BOTTOM_RIGHT)左上，右上，左下，右下

2.offset：控件偏移值可在anchor基础上进行宽高偏移:offset={height:100,width:100}

缩放控件：

bm-navigationanchor=BMAP_ANCHOR_TOP_RIGHT/bm-navigation

比例尺：

bm-scaleanchor=BMAP_ANCHOR_TOP_RIGHT/bm-scale

地图类型：

bm-map-type:map-types=[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]/bm-map-type分别是二维地图和卫星地图

缩略图：

bm-overview-mapanchor=BMAP_ANCHOR_BOTTOM_RIGHT:isOpen=true/bm-overview-map

版权：

bm-copyrightanchor=BMAP_ANCHOR_TOP_RIGHT:copyright=[{id:1,content:a唯我自知博客/a},]/bm-copyright

城市列表-选择城市搜索城市(支持市级以上搜索)

bm-city-listanchor=BMAP_ANCHOR_TOP_LEFT/bm-city-list

全景控件

bm-panorama/bm-panorama

测距-