如何在vue-cli中使用百度地图

首先第一步 搭建项目的架子 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引入

 type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥也就是ak值">

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 >

< 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'}); //地图风格