1.申请百度地图ak:http://lbsyun.baidu.com/apiconsole/key#/home
点击创建应用:
2.在index.html里引入百度地图脚本
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>
3.在地图组件map.vue里初始化地图
<template>
<div class="map" id="container"></div>
</template>
<script>
export default {
name: '',
data() {
return {
};
},
//加载地图
mounted() {
var map = new BMap.Map("container");// 创建地图实例
var point = new BMap.Point(116.404, 39.915);// 创建点坐标
//定位:代码复制地址http://lbsyun.baidu.com/jsdemo.htm?a#i8_1
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
//获取经纬度
var mk = new BMap.Marker(r.point);
map.addOverlay(mk);
map.panTo(r.point);
alert('您的位置:' + r.point.lng + ',' + r.point.lat);
// 使用定位成功后的经纬度坐标
point = new BMap.Point(r.point.lng, r.point.lat);
} else {
alert('failed' + this.getStatus());
}
// 初始化地图,设置中心点坐标和地图级别
map.centerAndZoom(point, 15);
}, {enableHighAccuracy: true})
}
}
</script>
<style lang="css" scoped>
#container{
width: 100%;
height: 500px;
}
</style>
4.在App.vue中显示组件:
<template>
<div id="app">
<router-view class="content"></router-view>
</div>
</template>
<style>
#app {
height: 500px;
/* 弹性盒从上到下排列 */
display: flex;
flex-direction: column;
}
.content{
/* 贴满剩余高度 */
flex: 1;
}
</style>