From 5b095e2d3cc318dba8bcc4d61283f908f9b81441 Mon Sep 17 00:00:00 2001 From: liuqimichale <123456lq> Date: Wed, 13 Mar 2019 16:33:22 +0800 Subject: [PATCH] 地图 --- src/components/VMap.vue | 54 ++++++++++++++++++++++++++++++++++++------------------ src/images/content/dialog-address.png | Bin 0 -> 769 bytes src/images/content/sectionsmall.png | Bin 0 -> 1623 bytes src/style/reset.css | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 122 insertions(+), 18 deletions(-) create mode 100644 src/images/content/dialog-address.png create mode 100644 src/images/content/sectionsmall.png diff --git a/src/components/VMap.vue b/src/components/VMap.vue index 9e94165..1bd7517 100644 --- a/src/components/VMap.vue +++ b/src/components/VMap.vue @@ -15,9 +15,9 @@ export default { methods:{ drawMap(){ let data = [ - {Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,free:30,total:1000}, - {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,free:40,total:800}, - {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,free:300,total:500} + {Name:'万达停车场1',lonId:'111.742579',latId:'40.818675',status:0,freeBrethNum:0,plBerthNum:1000,plName:'万达广场停车场1',plAddress:'北京万达广场1'}, + {Name:'万达停车场2',lonId:'111.622579',latId:'40.878675',status:1,freeBrethNum:100,plBerthNum:800,plName:'万达广场停车场2',plAddress:'北京万达广场2'}, + {Name:'万达停车场333333',lonId:'111.782579',latId:'40.778675',status:2,freeBrethNum:300,plBerthNum:500,plName:'万达广场停车场3',plAddress:'北京万达广场3'} ]; var map = new BMap.Map('map', {enableMapClick: false}) var point = new BMap.Point(data[0].lonId, data[0].latId) @@ -38,7 +38,7 @@ export default { var pt = new BMap.Point(data[item].lonId, data[item].latId); points[i] = pt; if(data[item].freeBrethNum/data[item].plBerthNum == 0){ - var myIcon = new BMap.Icon(busyCar, + var myIcon = new BMap.Icon(idleCar, new BMap.Size(29, 40), { offset: new BMap.Size(10, 40), textColor: '#fff' @@ -52,7 +52,7 @@ export default { }); var marker = new BMap.Marker(pt,{icon:myIcon}); } else { - var myIcon = new BMap.Icon(idleCar, + var myIcon = new BMap.Icon(busyCar, new BMap.Size(29, 40), { offset: new BMap.Size(10, 40), textColor: '#fff' @@ -68,21 +68,37 @@ export default { marker.setTop(true,27000000); map.addOverlay(marker); var myLabel; + map.removeOverlay(myLabel); - marker.addEventListener("mouseover", (e)=> { - map.removeOverlay(myLabel); - var that = this; - let tmpHtml = ''; - for(let i=0;i" + // map.removeOverlay(myLabel); + myLabel = new BMap.Label( + `
+
${data[item].plName}
+
${data[item].plAddress}
+ +
停车场收入:1293847.00元
+
停车场收入:1293847.00元
+
`, + { + offset: new BMap.Size(-225, -55), //label的偏移量，为了让label的中心显示在点上 + position: pt + }); + myLabel.setStyle({ + // color: "#0f0", + // fontSize: "12px", + padding: "0", + // whiteSpace: "normal", + backgroundColor: "", + border: "0px", + zIndex: "1000" } - - - }); - marker.addEventListener("mouseout", function (e) { - map.removeOverlay(myLabel); - }); + ); + marker.setLabel(myLabel) + marker.setTop(true,27000000); i++; })(i); } @@ -99,4 +115,6 @@ export default { width: 100%; height: 100%; } + + diff --git a/src/images/content/dialog-address.png b/src/images/content/dialog-address.png new file mode 100644 index 0000000..8668556 Binary files /dev/null and b/src/images/content/dialog-address.png differ diff --git a/src/images/content/sectionsmall.png b/src/images/content/sectionsmall.png new file mode 100644 index 0000000..90a2e7a Binary files /dev/null and b/src/images/content/sectionsmall.png differ diff --git a/src/style/reset.css b/src/style/reset.css index 760faa2..b89956f 100644 --- a/src/style/reset.css +++ b/src/style/reset.css @@ -130,4 +130,90 @@ table { .anchorBL{display:none;} /*去掉百度地图logo*/ +.dialog-wrap{ + width:220px; + height: 160px; + padding:0 15px 15px 15px; + background:rgba(3,38,116,.7) url("../images/content/sectionsmall.png") no-repeat; + background-size: 100% 100%; +} +.dialog-header{ + width: 220px; + height:34px; + line-height: 34px; + font-size: 14px; + font-weight:500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color:rgba(255,255,255,.8); +} +.dialog-address{ + height:22px; + font-size:12px; + padding-left: 20px; + font-family:PingFang-SC-Medium; + font-weight:500; + color:rgba(255,255,255,.4); + background: url("../images/content/dialog-address.png") no-repeat 0 3px; + background-size: 12px 12px +} +.dislog-body{ + display: flex; + height: 50px; + background:#2577F5; +} +.dislog-body li{ + text-align: center; + color: #fff; +} +.dislog-body li:nth-of-type(1),.dislog-body li:nth-of-type(3){ + flex: 1; +} +.dislog-body li:nth-of-type(2){ + width:1px; + height:31px; + margin-top: 9px; + background:rgba(5,41,112,.6); +} +.dislog-body li:nth-of-type(1) div:nth-of-type(1){ + height: 25px; + line-height: 30px; + font-size: 24px; + color: #0ECF0E; +} +.dislog-body li:nth-of-type(1) div:nth-of-type(2),.dislog-body li:nth-of-type(3) div:nth-of-type(2){ + height: 25px; + line-height: 25px; + color:rgba(69,195,243,1) +} + +.dislog-body li:nth-of-type(3) div:nth-of-type(1){ + height: 25px; + line-height: 30px; + font-size: 24px; + color: #fff; +} +.dislog-footer{ + height:25px; + line-height: 25px; + font-size:12px; + font-family:PingFang-SC-Regular; + font-weight:400; + color:rgba(7,179,245,1); +} +.dislog-footer-main{ + height:34px ; + overflow-y: auto; +} +.dislog-footer-main li { + font-size:12px; + font-family:PingFang-SC-Regular; + font-weight:400; + color:rgba(7,179,245,1); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + -- libgit2 0.21.4