实现以下效果,点击按钮地图跳转到对应地址
1.申请百度秘钥,在index.html中引入
2.在webpack.base.conf.js中配置Bmap
3.vue页面中使用
<template>
<div id="all">
<ul>
<li v-for="(item,index) in lists" :key="index" @click="getmap(item)">
<button>{{item}}</button>
</li>
</ul>
<div id="allmap"></div>
</div>
</template>
<script>
export default {
data() {
return {
lists: ["东风西路办税服务厅", "广州体育中心", "五羊新城办税服务厅"],
userlocation: { lng: "", lat: "" }
};
},
mounted() {
this.getmap();
},
methods: {
getmap(item) {
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(113.27, 23.13), 11);
var local = new BMap.LocalSearch(map, {
renderOptions: { map: map }
});
local.search(item);
}
}
};
</script>
<style scoped>
* {
margin: 0;
padding: 0;
list-style: none;
}
#suggestId {
width: 398px;
height: 30px;
}
#allmap {
width: 400px;
height: 400px;
border: 1px solid black;
}
</style>