diff --git a/src/views/counter/map2.vue b/src/views/counter/map2.vue index 6a90f3a..3d2eb78 100644 --- a/src/views/counter/map2.vue +++ b/src/views/counter/map2.vue @@ -15,31 +15,52 @@ export default { defaultPositions: [ { title: '海洋公园', - position: [114.186739, 22.250872] + position: [114.186739, 22.250872], + count: 66, + signal: 23, + energy: 4333 }, { title: '香港大学', - position: [114.143472, 22.284105] + position: [114.149176, 22.286245], + count: 232, + signal: 23, + energy: 4333 }, { title: '南丫北容村', - position: [114.126261, 22.22863] + position: [114.126261, 22.22863], + count: 87, + signal: 33, + energy: 4333 }, { title: '大帽山', - position: [114.124105, 22.401088] + position: [114.124105, 22.401088], + count: 66, + signal: 23, + energy: 4223 }, { title: '西贡郊野公园', - position: [114.370966, 22.411628] + position: [114.370966, 22.411628], + count: 616, + signal: 23, + energy: 4556 }, { title: '盐田', - position: [114.223565, 22.380771] + position: [114.223565, 22.380771], + count: 66, + signal: 23, + energy: 4433 }, { title: '清水', - position: [114.312821, 22.301076] + position: [114.312821, 22.301076], + count: 2336, + signal: 23, + energy: 4333 } ] } @@ -86,6 +107,7 @@ export default { // 定义顶部标题 const top = document.createElement('div') const titleD = document.createElement('div') + titleD.className = 'title' const closeX = document.createElement('img') top.className = 'info-top' titleD.innerHTML = title @@ -99,7 +121,6 @@ export default { // 定义中部内容 const middle = document.createElement('div') middle.className = 'info-middle' - middle.style.backgroundColor = 'white' middle.innerHTML = content info.appendChild(middle) @@ -113,17 +134,19 @@ export default { sharp.src = 'https://webapi.amap.com/images/sharp.png' bottom.appendChild(sharp) info.appendChild(bottom) + console.log(info) return info }, instantiateInforWindow(title) { const content = [] - content.push("地址:北京市朝阳区阜通东大街6号院3号楼东北8.3公里") - content.push('电话:010-64733333') - content.push("详细信息") + content.push('
339
') + content.push('
时间:2018年5月15日 14:33:25
') + content.push('
信号:23电量:4233
') + content.push('
区域:尖沙咀
\n') const infoWindow = new AMap.InfoWindow({ isCustom: true, closeWhenClickMap: true, - content: this.createInfoWindow(title, content.join('
')), + content: this.createInfoWindow(title, content.join('\n')), offset: new AMap.Pixel(16, -45) }) return infoWindow @@ -145,7 +168,6 @@ export default { overflow: hidden; position: absolute; } - .info { border: solid 1px silver; } @@ -155,9 +177,9 @@ export default { border-bottom: 1px solid #CCC; border-radius: 5px 5px 0 0; } - div.info-top div { + div.info-top .title { display: inline-block; - color: #333333; + color: rgb(236, 110, 37); font-size: 14px; font-weight: bold; line-height: 31px; @@ -174,8 +196,20 @@ export default { } div.info-middle { font-size: 12px; - padding: 6px; + padding: .4rem .8rem .5rem .5rem; line-height: 20px; + background-color: white; + } + .info-middle .count { + display: flex; + justify-content: flex-end; + font-size: 1.5rem; + font-weight: bold; + color: #666; + margin: 0 0 .4rem 0; + } + .info-middle span.energy { + margin-left: 2rem; } div.info-bottom { height: 0px; @@ -187,12 +221,4 @@ export default { position: relative; z-index: 104; } - span { - margin-left: 5px; - font-size: 11px; -} - .info-middle img { - float: left; - margin-right: 6px; - }