父组件：
<template><div>
<button @click="addressShow(v,type)">展开</button>
<div v-if="this.showMap" class="myIndexWrap">
<div class="addrMapWrapper">
<span class="cursor" @click="close">关闭</span>
<div class="addrWrapper">
<ShowMap class="showMapBox" :selAddrlat="prj_lat" :selAddrlng="prj_lng" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "1",
data(){
return{
showMap:false
}
},
methods:{
addressShow(v,type) {
this.mapShowHandler(v,type);
},
mapShowHandler(v,type){
if( response.data && response.data.prj_lat && response.data.prj_lat != '' ){
this.showMap = true
}else{
}
},
}
}
</script>
<style scoped lang="scss">
.myIndexWrap {
display: flex;
flex-flow: column;
position: absolute;
bottom: 19%;
// 地图标记
.addrMapWrapper {
.addrWrapper{
margin-left: 60px;
box-shadow: 0 0 7px #d5d4d4;
}
span{
float: right;
right: 2%;
position: absolute;
z-index: 9999;
top: 2%;
background-color: #fff;
padding: 4px 8px;
font-size: 1.4rem;
border-radius: 50px;
box-shadow: 0 0 7px #d5d4d4;
}
}
}
</style>
子组件
<template>
<baidu-map class="showMapWrapper" @ready="mapHandle" :scroll-wheel-zoom='true' :center="center"></baidu-map>
</template>
<script>
export default {
name: 'ShowMap',
components: {},
props: {
selAddrlng: {
type: String,
default: ''
},
selAddrlat: {
type: String,
default: ''
},
},
data() {
return {
center:{lng: 106.2667, lat: 38.4667},
position:{lng:this.selAddrlng,lat:this.selAddrlat},
BMap:null,// 地图组件是否就绪
address:''
};
},
methods: {
mapHandle({ BMap, map }) {
console.log(this.position.lat)
var point = new BMap.Point(this.position.lat,this.position.lng);
map.centerAndZoom(point, 15)
// var icon = new BMap.Icon(require("../assets/logo.png"),new BMap.Size(74,84));
var marker = new BMap.Marker(point) // 创建标注
map.addOverlay(marker) // 将标注添加到地图中
var opts = {
position: point, // 指定文本标注所在的地理位置
offset: new BMap.Size(30, -30) // 设置文本偏移量
};
var myGeo = new BMap.Geocoder();
myGeo.getLocation(point,function(result){
console.log(result.address)
var label = new BMap.Label(result.address, opts);
map.addOverlay(label)
});
}
}
}
</script>
<style scoped>
.showMapWrapper {
width: 300px;
height: 300px;
border: 1px solid #999;
}
</style>
