# vue 脚手架使用百度地图
申请百度地图Key
百度地图官网,一定要点击JavaScript api
在vue脚手架引入百度地图
在vue脚手架中index.html导入百度地图
在组件中使用百度地图
我自己写了三个按钮对应三个方法,然后跳转到三个位置
<script>
export default {
name: 'my-map',
data() {
return {
city: '郑州',
}
},
methods: {
initMap() {
// 初始化地图
var map = new BMap.Map("allmap");
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.centerAndZoom(this.city, 5); // 用城市名设置地图中心点
window.map = map;
},
change1(changeCity) {
console.log(changeCity);
window.map.centerAndZoom(changeCity, 8); // 用城市名设置地图中心点
},
change2(changeCity) {
console.log(changeCity);
window.map.centerAndZoom(changeCity, 12); // 用城市名设置地图中心点
},
change3(changeCity) {
console.log(changeCity);
window.map.centerAndZoom(changeCity, 15); // 用城市名设置地图中心点
}
},
mounted() {
this.initMap()
// this.resetPostion()
}
}
</script>
也可以封装成一个组件,并添加自己的样式。效果如下
<template>
<div>
<el-card shadow="always">
<h1>where I Am</h1>
<el-divider></el-divider>
<el-button size="small" @click="change1('广东')">广东</el-button>
<el-button size="small" @click="change2('珠海')">珠海</el-button>
<el-button size="small" @click="change3('北京师范大学珠海分校')">北京师范大学珠海分校</el-button>
<div id="allmap"></div>
</el-card>
</div>
</template>
<script>
export default {
name: 'my-map',
data() {
return {
city: '郑州',
}
},
methods: {
initMap() {
// 初始化地图
var map = new BMap.Map("allmap");
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
map.centerAndZoom(this.city, 5); // 用城市名设置地图中心点
window.map = map;
},
change1(changeCity) {
console.log(changeCity);
window.map.centerAndZoom(changeCity, 8); // 用城市名设置地图中心点
},
change2(changeCity) {
console.log(changeCity);
window.map.centerAndZoom(changeCity, 12); // 用城市名设置地图中心点
},
change3(changeCity) {
console.log(changeCity);
window.map.centerAndZoom(changeCity, 15); // 用城市名设置地图中心点
}
},
mounted() {
this.initMap()
// this.resetPostion()
}
}
</script>
<style scoped>
#allmap {
width: 100%;
height: 400px;
background-color: lightgreen;
}
.el-card {
width: 70%;
height: auto;
margin: 0 auto;
margin-bottom: 10%;
}
.el-card p {
padding-left: 10%;
margin: 0;
}
.el-card h1 {
font-family: Courier New, Courier, monospace;
font-size: 1.5rem;
font-weight: bold;
margin: 0;
padding-left: 10%;
}
.el-button {
margin: 0;
}
</style>