<template>
<div class="home_map">
<section>
<div class="map" id="allmap"></div>
</section>
<footer>
<div class="info fb">
<div class="child">
<p class="left_text">
<em>{{streetNumber?streetNumber:''}}</em>
<span>{{address?address:''}}</span>
</p>
<img src="../../../static/imgs/home_map.jpg">
</div>
</div>
</footer>
</div>
</template>
<style scoped lang='scss'>
@import '../../styles/commonscss.scss';
.home_map .map{width: 100vw;height:100vh; position: fixed;}
.home_map .info{width: 100%; height: 5.4rem;padding-top: 0.85rem;z-index: 100; background-color: white;img{width: 2.95rem;height: 2.95rem;}}
.home_map .left_text{width: 15.2rem;padding-top:0.3rem; display: inline-block;text-align: center; vertical-align: top; em{margin-bottom: 0.25rem; font-size: 0.8rem;font-weight: bold;display: block;}span{color:$lg;}}
</style>
<script type="text/babel">
import {host,my_log} from '@/config/config'
export default{
data(){
return{
address:null,
streetNumber:null
}
},
created:function(){
},
mounted:function(){
this.init()
},
methods:{
init:function(){
var _this = this
// 百度地圖API功能
var map = new BMap.Map("allmap");
var point = new BMap.Point(113.335535,22.99421);
map.centerAndZoom(point,15);
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
if(this.getStatus() == BMAP_STATUS_SUCCESS){
var mk = new BMap.Marker(point);
map.addOverlay(mk);
map.panTo(point);
var geoc = new BMap.Geocoder();
geoc.getLocation(point, (rs)=>{
var addComp = rs.addressComponents;
// 所有位置信息都在rs.addressComponents裏面,座標要有標誌性的座標信息纔會全
my_log(rs.addressComponents)
_this.address = addComp.province + addComp.city + addComp.district + addComp.street
_this.streetNumber = addComp.street + addComp.streetNumber
if(_this.streetNumber == '')
_this.streetNumber = '獲取不到具體位置'
console.log(_this.streetNumber)
});
}
else {
alert('failed'+this.getStatus());
}
},{enableHighAccuracy: true})
//關於狀態碼
//BMAP_STATUS_SUCCESS 檢索成功。對應數值“0”。
//BMAP_STATUS_CITY_LIST 城市列表。對應數值“1”。
//BMAP_STATUS_UNKNOWN_LOCATION 位置結果未知。對應數值“2”。
//BMAP_STATUS_UNKNOWN_ROUTE 導航結果未知。對應數值“3”。
//BMAP_STATUS_INVALID_KEY 非法密鑰。對應數值“4”。
//BMAP_STATUS_INVALID_REQUEST 非法請求。對應數值“5”。
//BMAP_STATUS_PERMISSION_DENIED 沒有權限。對應數值“6”。(自 1.1 新增)
//BMAP_STATUS_SERVICE_UNAVAILABLE 服務不可用。對應數值“7”。(自 1.1 新增)
//BMAP_STATUS_TIMEOUT 超時。對應數值“8”。(自 1.1 新增)
}
}
}
</script>
最後在html引入ak在百度地圖開放平臺獲取
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EVEOIF80XN5tuPoetNZOFxNHlTKUgNVs"></script>