Commit 1179eb82d8f0d28957a8d5ccd3a0ab7e3c5334b6
1 parent
b850acb7
地图覆盖物
Showing
2 changed files
with
32 additions
and
12 deletions
src/styles/reset.css
| @@ -109,7 +109,22 @@ table { | @@ -109,7 +109,22 @@ table { | ||
| 109 | position: absolute; | 109 | position: absolute; |
| 110 | } | 110 | } |
| 111 | 111 | ||
| 112 | -.parkpop-content{ | ||
| 113 | - color: #f00; | 112 | +.dislog-wrap{ |
| 113 | + width:84px; | ||
| 114 | + height: 47px; | ||
| 115 | + border-radius:2px; | ||
| 116 | +} | ||
| 117 | +.dialog-header{ | ||
| 118 | + width: 84px; | ||
| 119 | + height:14px; | ||
| 120 | + line-height: 14px; | ||
| 121 | + font-size: 12px; | ||
| 122 | + font-weight:400; | ||
| 123 | + text-align: center; | ||
| 124 | + overflow: hidden; | ||
| 125 | + white-space: nowrap; | ||
| 126 | + text-overflow: ellipsis; | ||
| 127 | + color:rgba(255,255,255,1); | ||
| 128 | + background:rgba(68,182,255,.6); | ||
| 114 | } | 129 | } |
| 115 | 130 |
src/views/mapsection.vue
| @@ -90,9 +90,9 @@ export default { | @@ -90,9 +90,9 @@ export default { | ||
| 90 | }) | 90 | }) |
| 91 | let data = { | 91 | let data = { |
| 92 | nurseryInfo: [ | 92 | nurseryInfo: [ |
| 93 | - {MapPointX:'111.742579',MapPointY:'40.818675',status:0}, | ||
| 94 | - {MapPointX:'111.722579',MapPointY:'40.878675',status:1}, | ||
| 95 | - {MapPointX:'111.782579',MapPointY:'40.818675',status:2} | 93 | + {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:0}, |
| 94 | + {Name:'万达停车场2',MapPointX:'111.722579',MapPointY:'40.878675',status:1}, | ||
| 95 | + {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.818675',status:2} | ||
| 96 | ] | 96 | ] |
| 97 | } | 97 | } |
| 98 | this.baiduMap(data) | 98 | this.baiduMap(data) |
| @@ -105,7 +105,7 @@ export default { | @@ -105,7 +105,7 @@ export default { | ||
| 105 | nurseryInfo: [ | 105 | nurseryInfo: [ |
| 106 | {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:2}, | 106 | {Name:'万达停车场1',MapPointX:'111.742579',MapPointY:'40.818675',status:2}, |
| 107 | {Name:'万达停车场2',MapPointX:'111.722579',MapPointY:'40.878675',status:0}, | 107 | {Name:'万达停车场2',MapPointX:'111.722579',MapPointY:'40.878675',status:0}, |
| 108 | - {Name:'万达停车场3',MapPointX:'111.782579',MapPointY:'40.818675',status:1} | 108 | + {Name:'万达停车场333333',MapPointX:'111.782579',MapPointY:'40.818675',status:1} |
| 109 | ] | 109 | ] |
| 110 | } | 110 | } |
| 111 | this.baiduMap(data) | 111 | this.baiduMap(data) |
| @@ -147,24 +147,29 @@ export default { | @@ -147,24 +147,29 @@ export default { | ||
| 147 | }); | 147 | }); |
| 148 | var marker = new BMap.Marker(pt,{icon:myIcon}); | 148 | var marker = new BMap.Marker(pt,{icon:myIcon}); |
| 149 | } | 149 | } |
| 150 | - | 150 | + console.log(data) |
| 151 | map.addOverlay(marker); | 151 | map.addOverlay(marker); |
| 152 | var myLabel; | 152 | var myLabel; |
| 153 | marker.addEventListener("mouseover", function (e) { | 153 | marker.addEventListener("mouseover", function (e) { |
| 154 | + console.log(e) | ||
| 154 | myLabel = new BMap.Label( | 155 | myLabel = new BMap.Label( |
| 155 | - '<div class="parkpop-content" style="font-size: 20px;">12321312</div>', | 156 | + `<div class="dislog-wrap"> |
| 157 | + <div class="dialog-header" title="${data.nurseryInfo[item].Name}">${data.nurseryInfo[item].Name}</div> | ||
| 158 | + <ul class="dislog-body"> | ||
| 159 | + </ul> | ||
| 160 | + </div>`, | ||
| 156 | { | 161 | { |
| 157 | offset: new BMap.Size(30, -85), //label的偏移量，为了让label的中心显示在点上 | 162 | offset: new BMap.Size(30, -85), //label的偏移量，为了让label的中心显示在点上 |
| 158 | - position: point | 163 | + position: pt |
| 159 | }); | 164 | }); |
| 160 | 165 | ||
| 161 | myLabel.setStyle({ | 166 | myLabel.setStyle({ |
| 162 | // color: "#0f0", | 167 | // color: "#0f0", |
| 163 | - fontSize: "12px", | ||
| 164 | - // padding: "5px", | 168 | + // fontSize: "12px", |
| 169 | + padding: "0px", | ||
| 165 | // whiteSpace: "normal", | 170 | // whiteSpace: "normal", |
| 166 | // backgroundColor: "#f00", | 171 | // backgroundColor: "#f00", |
| 167 | - // border: "0px", | 172 | + border: "0px", |
| 168 | // zIndex: "1000" | 173 | // zIndex: "1000" |
| 169 | } | 174 | } |
| 170 | ); | 175 | ); |