You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
94 lines
1.8 KiB
94 lines
1.8 KiB
<template>
|
|
<div class="map-view">
|
|
<div id="choicemap"/>
|
|
<i
|
|
class="el-icon-close map-close"
|
|
@click="hiddenView"/>
|
|
</div>
|
|
</template>
|
|
|
|
<script type="text/javascript">
|
|
import { getMaxIndex } from '@/utils/index'
|
|
|
|
export default {
|
|
name: 'MapView', // 地图详情
|
|
components: {},
|
|
props: {
|
|
/**
|
|
* title 内容
|
|
* lat lng 经纬度
|
|
*/
|
|
title: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
lat: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
lng: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
this.$el.style.zIndex = getMaxIndex()
|
|
document.body.appendChild(this.$el)
|
|
|
|
var map = new BMap.Map('choicemap', { enableMapClick: false })
|
|
var point = new BMap.Point(this.lng, this.lat)
|
|
map.centerAndZoom(point, 18)
|
|
map.enableScrollWheelZoom()
|
|
|
|
var marker = new BMap.Marker(point) // 创建标注
|
|
map.addOverlay(marker) // 将标注添加到地图中
|
|
var infoWindow = new BMap.InfoWindow(this.title) // 创建信息窗口对象
|
|
marker.addEventListener('click', function() {
|
|
map.openInfoWindow(infoWindow, point) // 开启信息窗口
|
|
})
|
|
},
|
|
destroyed() {
|
|
// remove DOM node after destroy
|
|
if (this.$el && this.$el.parentNode) {
|
|
this.$el.parentNode.removeChild(this.$el)
|
|
}
|
|
},
|
|
methods: {
|
|
hiddenView() {
|
|
this.$emit('hidden')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.map-view {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: #000;
|
|
}
|
|
|
|
.map-close {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 10px;
|
|
font-size: 28px;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#choicemap {
|
|
position: absolute;
|
|
left: 100px;
|
|
top: 100px;
|
|
bottom: 100px;
|
|
right: 100px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|