场景和环境:web软件开发,JavaScript API v3.0
1.安装
NPM
$ npm install vue-baidu-map --save
2.配置webpack.base.conf.js
//全局安装后,这里可以不加
externals: {
"BMap": "BMap"
},
3.配置index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue_SeleCou</title>
<!--vue-cli 安装全局bMap后,这里可以不加-->
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=填写你的ak" ></script>
</head>
<link rel="stylesheet" type="text/css" href="/style/common.less">
<body>
<div id="app"></div>
<!--生成的文件将自动注入 -->
</body>
</html>
4.全局注册
main.js
import Vue from 'vue'
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
ak: 'YOUR_APP_KEY' //填写你的ak
})
5.新建一个vue文件
baiduMap.vue
<template>
<!--地图容器-->
<baidu-map
class="bm-view"
:center="this.center"
:zoom="this.zoom" @ready="handler"
:scroll-wheel-zoom="true"
:mapStyle="mapStyle">
</baidu-map>
</template>
<style>
.bm-view {
width: 100%;
height: 800px;
}
</style>
<script>
//引入map实例
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
//模板注册
components: {
BaiduMap
},
data () {
return {
//自定义主题样式
mapStyle: {
styleJson: [
{
"featureType": "all",
"elementType": "geometry",
"stylers": {
"hue": "#007fff",
"saturation": 89
}
},
{
"featureType": "water",
"elementType": "all",
"stylers": {
"color": "#ffffff"
}
}
]
},
center: {lng: 0, lat: 0},
zoom: 15
}
},
methods: {
handler ({BMap, map}) {
console.log(BMap, map)
this.center.lng = 116.404
this.center.lat = 39.915
this.zoom = 15
}
},
//初始化(地图坐标和缩放参数,可有可无)
mounted(){
this.lng = 116.404
this.lat = 39.915
this.zoom = 15
},
}
</script>
6.配置路由
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//懒加载式引入
const baiduMap = r => require.ensure([], () => r(require('@/page/baiduMap.vue')), 'baiduMap');
const routes = [
//路径映射
{
path: '/baiduMap',
component: baiduMap
},
const router=new Router({
mode:"history", //去掉地址栏#
routes,
strict: process.env.NODE_ENV !== 'production',
})
export default router