如何在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引入
<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'});//地图风格