首先第一步 搭建项目的架子 vue init webpack + 项目名称
第二部就是申请密钥 http://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5
申请密钥后 看一下百度开放平台问题反馈 http://lbsyun.baidu.com/index.php?title=FAQ/jsapi
在index.html引入
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥也就是ak值"></script>
<!DOCTYPE html
>
<
html
>
<
head
>
<
meta
charset=
"utf-8"
>
<
meta
name=
"viewport"
content=
"width=device-width,initial-scale=1.0"
>
<
title
>map
</
title
>
</
head
>
<
style
>
/* 去掉地图左下角的百度LOGO */
.anchorBL {
display:
none
}
</
style
>
<
script
type=
"text/javascript"
src=
"https://api.map.baidu.com/api?v=2.0
&
ak="
></
script
>
<
body
>
<
div
id=
"app"
></
div
>
<!-- built files will be auto injected -->
<
div
id=
"allmap"
></
div
>
</
body
>
</
html
>
在webpack.base.conf.js里面 配置
module.
exports = {
context:
path.
resolve(
__dirname,
'../'),
entry: {
app:
'./src/main.js'
},
externals: {
"BMap"
:
"BMap"
},
}
在需要使用百度地图的组件中导入
import
BMap
from
'BMap'
最后一步 就是查看地图的api http://lbsyun.baidu.com/jsdemo.htm#lite_2_0 进行使用了
一定记住需要在mounted钩子函数里面操作API 因为地图需要在所以的dom树加载完毕后才能操作
<
template
>
<
div
>
<
div
id=
"allmap"
class=
"allmap"
></
div
>
</
div
>
</
template
>
<
script
>
import
BMap
from
'BMap'
export
default {
name:
'HelloWorld',
data () {
return {
}
},
created () {
},
mounted() {
// var lng='';
// var lat='';
var
map =
new
BMap.
Map(
"allmap");
// 创建地图实例
var
point =
new
BMap.
Point(
116.331398,
39.897445);
// 创建点坐标
map.
centerAndZoom(
point,
15);
// 初始化地图，设置中心点坐标和地图级别
map.
enableScrollWheelZoom(
true);
//开启鼠标滚轮缩放
map.
addControl(
new
BMap.
NavigationControl());
map.
addControl(
new
BMap.
ScaleControl());
map.
addControl(
new
BMap.
OverviewMapControl());
map.
addControl(
new
BMap.
MapTypeControl());
map.
setCurrentCity(
"武汉");
// 仅当设置城市信息时，MapTypeControl的切换功能才能可用
// var opts = {type: BMAP_NAVIGATION_CONTROL_ZOOM}
// map.addControl(new BMap.NavigationControl(opts)); 自定义控件
map.
setMapStyle({
style:
'midnight'});
//地图风格