首先第一步 搭建项目的架子 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 >
地图容器必须需要div 包裹起来
在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'}); //地图风格




Logo

前往低代码交流专区

更多推荐