<template>
<div>
<br>
<div id="container"></div>
<!-- <div class="info">-->
<!-- <h4 id="text"></h4>-->
<!-- <p>当前级别：<span id="map-zoom">15</span></p>-->
<!-- </div>-->
<div id="map" class="s1">实时地图
</div>
<div id="map2" class="s2">实时地图2</div>
</div>
</template>
<script>
export default {
data() {
return {
map: {},
map2: {
setZoomAndCenter(number, numbers) {
}
},
zoom1: [],
zoom2: [],
logMapinfo: {},
currentCenter1: [],
currentCenter2: []
}
},
mounted() {
this.initAMap()
this.initAMap2()
console.log('00000000000000000', this.map.getZoom())
console.log('1111111111', this.map.getCenter().toString())
// this.map.on('zoomstart', this.mapZoomstart)
// this.map.on('zoomchange', this.mapZoom)
this.map.on('zoomend', this.mapZoomend)
this.map.on('complete', this.mapCompleted)
// this.map2.on('zoomstart', this.mapZoomstart2)
// this.map2.on('zoomchange', this.mapZoom2)
this.map2.on('zoomend', this.mapZoomend2)
this.map2.on('complete', this.mapCompleted2)
},
created() {
console.log('8777777777777')
},
methods: {
initAMap() {
this.map = new AMap.Map('map', {
resizeEnable: true,
// mapStyle: 'amap://styles/fresh',
// zoom: this.mapData.zoom,//级别范围
zoom: 14, // 级别范围
center: [114.411943, 30.527378],
// center: [113.201943, 23.158378],//地图中心点
// center: this.center,
// 隐藏默认楼块
features: ['bg', 'road', 'point'],
mapStyle: 'amap://styles/light',
layers: [
// 高德默认标准图层
new AMap.TileLayer.Satellite(),
new AMap.TileLayer.RoadNet(),
// 楼块图层
new AMap.Buildings({
zooms: [16, 20],
zIndex: 2,
heightFactor: 2
})
]
})
},
initAMap2() {
this.map2 = new AMap.Map('map2', {
resizeEnable: true,
// mapStyle: 'amap://styles/fresh',
// zoom: this.mapData.zoom,//级别范围
zoom: 14, // 级别范围
center: [114.411943, 30.527378]
// center: [113.201943, 23.158378],//地图中心点
// center: this.center,
})
},
mapZoomstart() {
console.log('层级', this.map.getZoom())
this.map2.setZoomAndCenter(this.map.getZoom(), this.map.getCenter())
// this.map2.setZoomAndCenter(this.map.getZoom(), [120, 30])
},
mapZoom() {
console.log('层级', 7777777777777777777777)
this.map2.setZoomAndCenter(this.map.getZoom(), this.map.getCenter())
},
mapZoomend() {
console.log('层级', 8888888888888888888888)
this.map2.setZoomAndCenter(this.map.getZoom(), this.map.getCenter())
},
mapCompleted() {
console.log('层级', 999)
this.map2.setZoomAndCenter(this.map.getZoom(), this.map.getCenter())
// map.setCenter([lng, lat]);
},
mapZoomstart2() {
this.map.setZoomAndCenter(this.map2.getZoom(), this.map2.getCenter())
},
mapZoom2() {
this.map.setZoomAndCenter(this.map2.getZoom(), this.map2.getCenter())
},
mapZoomend2() {
this.map.setZoomAndCenter(this.map2.getZoom(), this.map2.getCenter())
},
mapCompleted2() {
this.map.setZoomAndCenter(this.map2.getZoom(), this.map2.getCenter())
}
}
}
</script>
<style scoped>
#map {
/*top: 22px;*/
margin: 5px;
padding: 10px;
width: 50%;
height: 900px;
/*width: 220px;*/
/*height: 120px;*/
background-color: #ffffff;
border: 2px #3e94f9 solid;
font-size: 14px;
color: #000;
position: absolute;
border-radius: 5px;
}
#map2 {
left: 50%;
margin: 5px;
padding: 10px;
width: 50%;
height: 900px;
/*width: 220px;*/
/*height: 120px;*/
background-color: #ffffff;
border: 2px #3e94f9 solid;
font-size: 14px;
color: #000;
position: absolute;
border-radius: 5px;
}
#info{
color: #000;
position: absolute;
border-radius: 5px;
}
</style>
