Skip to content

B
baidu_map
Commit fe8be945 authored by mahui's avatar mahui
Browse files
Options

111

parent 6812fbd7
Show whitespace changes
Inline Side-by-side
Showing with 685 additions and 23 deletions
src/components/map.vue
View file @ fe8be945
...@@ -59,34 +59,676 @@ ...@@ -59,34 +59,676 @@
], ],
search_data: [ search_data: [
{ {
label:'青山-青罗线与岗阳街路口对角A2B4', id:1,
longitude:119.817653, type:'青山',
latitude:30.303568 label:'青罗线与岗阳街路口对角',
position:'119.817653,30.303568',
data:[{
type:1,
num:2
},{
type:2,
num:4
}]
}, },
{ {
label:'青山-胜联路十字路口A1', id:2,
longitude:119.828229, type:'青山',
latitude:30.274509 label:'胜联路十字路口',
position:'119.828229,30.274509',
data:[{
type:1,
num:1
}]
}, },
{ {
label:'青山-胜联路第三个叉路口路灯杆A1', id:3,
longitude:119.831894, type:'青山',
latitude:30.3048 label:'胜联路第三个叉路口路灯杆',
position:'119.831894,30.3048',
data:[{
type:1,
num:1
}]
}, },
{ {
label:'青山-杭瑞高速与汪宫线路口A1', id:4,
longitude:119.87221, type:'青山',
latitude:30.251338 label:'杭瑞高速与汪宫线路口',
position:'119.87221,30.251338',
data:[{
type:1,
num:1
}]
}, },
{ {
label:'青山-华旺厂门口A1', id:5,
longitude:119.850356, type:'青山',
latitude:30.269257 label:'华旺厂门口',
position:'119.850356,30.269257',
data:[{
type:1,
num:1
}]
}, },
{ {
label:'青山-发达路与科技大道路灯杆A1', id:6,
longitude:119.842598, type:'青山',
latitude:30.262775, label:'发达路与科技大道路灯杆',
position:'119.842598,30.262775',
data:[{
type:1,
num:1
}]
},
{
id:7,
type:'青山',
label:'科技大道慢车道出口富庆厂边',
position:'119.845697,30.262908',
data:[{
type:1,
num:1
}]
},
{
id:8,
type:'青山',
label:'科技大道与龙岭路路口',
position:'119.848814,30.262697',
data:[{
type:1,
num:1
}]
},
{
id:9,
type:'青山',
label:'科技大道与灵凤路十字路口路灯杆',
position:'119.819399,30.264382',
data:[{
type:1,
num:1
}]
},
{
id:10,
type:'青山',
label:'科技大道与星港路十字路口',
position:'119.830768,30.262234',
data:[{
type:1,
num:1
}]
},
{
id:11,
type:'青山',
label:'科技大道与星港路',
position:'119.830736,30.26188',
data:[{
type:2,
num:2
}]
},
{
id:12,
type:'青山',
label:'童村与锦北街道交界处',
position:'119.817653,30.274579',
data:[{
type:1,
num:2
},
{
type:2,
num:2
}]
},
{
id:13,
type:'青山',
label:'牧锦线与板桥交界处',
position:'119.785188,30.22123',
data:[{
type:2,
num:2
}]
},
{
id:14,
type:'青山',
label:'320县道牧家桥与青山交界处',
position:'119.785979,30.229316',
data:[{
type:1,
num:1
},{
type:2,
num:2
},{
type:3,
num:1
}]
},
{
id:15,
type:'青山',
label:'329国道汪家埠公交站东-西',
position:'119.875194,30.258302',
data:[{
type:2,
num:2
}]
},
{
id:16,
type:'青山',
label:'329国道隧道口青山交界处',
position:'119.802208,30.231263',
data:[{
type:1,
num:1
},{
type:2,
num:2
},{
type:3,
num:1
}]
},
{
id:17,
type:'青山',
label:'科技大道与临余桥交界处',
position:'119.871385,30.26385',
data:[{
type:1,
num:2
},
{
type:2,
num:4
}]
},
{
id:18,
type:'青山',
label:'科技大道与锦北街道交界处锦福家园',
position:'119.81372,30.265322',
data:[{
type:1,
num:2
},
{
type:2,
num:4
}]
},
{
id:19,
type:'青山',
label:'科技大道与东环路十字路口',
position:'119.868409,30.263209',
data:[{
type:1,
num:2
}]
},
{
id:20,
type:'青山',
label:'汪家埠与余杭交界处',
position:'119.874502,30.258454',
data:[{
type:1,
num:1
}]
},
{
id:21,
type:'青山',
label:'胜联路电子科技大学与余杭交接处',
position:'119.841766,30.299351',
data:[{
type:1,
num:1
},
{
type:2,
num:4
},
{
type:3,
num:1
}]
},
{
id:22,
type:'青山',
label:'225县道岗阳街与余杭交界处',
position:'119.843154,30.282716',
data:[{
type:1,
num:1
},
{
type:2,
num:2
},
{
type:3,
num:1
}]
},
{
id:23,
type:'青山',
label:'杭叉东面杨梅湾与余杭交界处',
position:'119.871394,30.267386',
data:[{
type:1,
num:1
},
{
type:2,
num:4
},
{
type:3,
num:1
}]
},
{
id:24,
type:'青山',
label:'青山大道与塘藤街十字路口',
position:'119.853116,30.271032',
data:[{
type:1,
num:1
}]
},
{
id:25,
type:'青山',
label:'青山二小',
position:'119.82366,30.249679',
data:[{
type:1,
num:5
},
{
type:2,
num:6
}]
},
{
id:26,
type:'青山',
label:'朱村公山小区',
position:'119.815621,30.232138',
data:[{
type:1,
num:4
}]
},
{
id:27,
type:'横畈',
label:'龙跃街与高庆路路口',
position:'119.783288,30.322552',
data:[{
type:1,
num:1
}]
},
{
id:28,
type:'横畈',
label:'安村下安村11号后朝西',
position:'119.759088,30.322181',
data:[{
type:1,
num:1
}],
remark:'枪机-挑2米',
},
{
id:29,
type:'横畈',
label:'安村下安村花圃十字路口',
position:'119.758311,30.322606',
data:[{
type:1,
num:1
},
{
type:3,
num:1
}],
remark:'卡扣朝西'
},
{
id:30,
type:'横畈',
label:'安村环保装备公司边',
position:'119.750201,30.319899',
data:[{
type:1,
num:1
},
{
type:3,
num:1
}],
remark:'卡扣朝南'
},
{
id:31,
type:'横畈',
label:'瑞东厂门口',
position:'119.796128,30.323885',
data:[{
type:2,
num:4
}]
},
{
id:32,
type:'横畈',
label:'陈市线与大园路路口',
position:'119.797539,30.308106',
data:[{
type:2,
num:4
}]
},
{
id:33,
label:'新横线桥头',
position:'119.763457,30.324146',
data:[{
type:2,
num:4
}]
},
{
id:34,
type:'横畈',
label:'新横线安村路口公交车站牌',
position:'119.763569,30.322961',
data:[{
type:2,
num:2
}],
remark:'公交车站牌'
},
{
id:35,
type:'横畈',
label:'安村下安村11号前',
position:'119.759088,30.322181',
data:[
{
type:3,
num:1
}],
remark:'朝北'
},
{
id:36,
type:'横畈',
label:'安村下安村31号1000号杆',
position:'119.754384,30.320927',
data:[{
type:2,
num:1
}],
remark:'朝西'
},
{
id:37,
type:'横畈',
label:'安村新横线路口修理厂边',
position:'119.763776,30.323546',
data:[{
type:1,
num:1
}],
},
{
id:38,
type:'横畈',
label:'洪村曹家头路口',
position:'119.780145,30.351918',
data:[{
type:1,
num:1
}],
remark:'枪机'
},
{
id:39,
type:'横畈',
label:'洪村湖山里路口',
position:'119.776569,30.358772',
data:[{
type:1,
num:1
}],
remark:'枪机'
},
{
id:40,
type:'横畈',
label:'312县道临安与余杭交界处',
position:'119.808312,30.32965',
data:[{
type:1,
num:2
},
{
type:2,
num:4
}]
},
{
id:41,
type:'横畈',
label:'长西线鼎盛建材',
position:'119.809588,30.334222',
data:[{
type:1,
num:1
},
{
type:2,
num:2
}]
},
{
id:42,
type:'横畈',
label:'长西线下唐楼北苕溪',
position:'119.811025,30.335796',
data:[{
type:1,
num:1
},
{
type:2,
num:2
},
{
type:3,
num:1
}]
},
{
id:43,
type:'横畈',
label:'下唐楼与余杭交界处',
position:'119.813917,30.339677',
data:[{
type:1,
num:1
},
{
type:2,
num:2
},
{
type:3,
num:1
}]
},
{
id:44,
type:'横畈',
label:'陈市线与余杭景潭村交界处',
position:'119.808887,30.319571',
data:[{
type:1,
num:1
},
{
type:2,
num:2
},
{
type:3,
num:1
}]
},
{
id:45,
type:'横畈',
label:'陈市线与余杭交界处桥头',
position:'119.810315,30.327037',
data:[{
type:1,
num:1
},
{
type:2,
num:2
},
{
type:3,
num:2
}]
},
{
id:46,
type:'横畈',
label:'市地老路与余杭交界',
position:'119.809201,30.327505',
data:[{
type:1,
num:1
},
{
type:2,
num:2
}]
},
{
id:47,
type:'横畈',
label:'新横线与安村交界处',
position:'119.76407,30.320607',
data:[
{
type:2,
num:2
},
{
type:3,
num:1
}]
},
{
id:48,
type:'横畈',
label:'新长西线与安村路口',
position:'119.745017,30.321788',
data:[{
type:1,
num:1
},
{
type:2,
num:2
}]
},
{
id:49,
type:'横畈',
label:'横风线风笑岭与余杭交界处',
position:'119.776328,30.375428',
data:[{
type:1,
num:1
},
{
type:2,
num:2
},
{
type:3,
num:1
}]
},
{
id:50,
type:'横畈',
label:'高后线大王岭公交站站牌',
position:'119.741752,30.335827',
data:[{
type:1,
num:1
},
{
type:2,
num:2
}]
},
{
id:51,
type:'横畈',
label:'新横线与潘山交界处',
position:'119.784457,30.296631',
data:[{
type:1,
num:1
},
{
type:2,
num:2
},
{
type:3,
num:2
}]
},
{
id:52,
type:'横畈',
label:'泉口与潘山交界处',
position:'119.78338,30.296725',
data:[{
type:1,
num:1
},
{
type:2,
num:1
},
{
type:3,
num:1
}]
}, },
], ],
data: {} data: {}
...@@ -111,13 +753,25 @@ ...@@ -111,13 +753,25 @@
this.getBoundary(this.map); this.getBoundary(this.map);
}, 2000); }, 2000);
}, },
mapShow(coordinate, item) { mapShow(coordinate, item,type=1) {
let self = this; let self = this;
let opts = { let opts = {
position: coordinate, // 指定文本标注所在的地理位置 position: coordinate, // 指定文本标注所在的地理位置
offset: new BMap.Size(5, 0) //设置文本偏移量 offset: new BMap.Size(5, 0) //设置文本偏移量
};
let str=`<p>${item.label}</p><p style="font-weight: 700">`;
for(let i of item.data){
if(i.type==1){
str+=`<span>监控-${i.num}&nbsp;</span>`
}else if(i.type==2){
str+=`<span>人脸-${i.num}&nbsp;</span>`
}else if(i.type==3){
str+=`<span>卡扣-${i.num}&nbsp;</span>`
}else{
str+=`</p>`;
}
} }
let label = new BMap.Label('<p>' + item.label + '</p>', opts); // 创建文本标注对象 let label = new BMap.Label(str, opts); // 创建文本标注对象
label.setStyle({ label.setStyle({
color: "#444", color: "#444",
fontSize: "12px", fontSize: "12px",
...@@ -128,7 +782,8 @@ ...@@ -128,7 +782,8 @@
fontFamily: "微软雅黑" fontFamily: "微软雅黑"
}); });
this.map.addOverlay(label); this.map.addOverlay(label);
let myIcon = new BMap.Icon("static/blue.png", new BMap.Size(12,16)); let url = type==1?"static/monitor1.png":type==2?"static/monitor2.png":type==3?"static/monitor3.png":"static/blue.png";
let myIcon = new BMap.Icon(url, new BMap.Size(12,16));
let marker = new BMap.Marker(coordinate,{icon:myIcon}); let marker = new BMap.Marker(coordinate,{icon:myIcon});
this.map.addOverlay(marker); // 将标注添加到地图中 this.map.addOverlay(marker); // 将标注添加到地图中
marker.addEventListener("click", function() { marker.addEventListener("click", function() {
...@@ -170,8 +825,15 @@ ...@@ -170,8 +825,15 @@
} }
let marker; let marker;
for (let item of self.search_data) { for (let item of self.search_data) {
marker = new BMap.Point(item.longitude, item.latitude) marker = new BMap.Point(item.position.split(',')[0], item.position.split(',')[1]);
self.mapShow(marker, item); self.mapShow(marker, item,item.type=='横畈'?2:1);
// if(Array.isArray(item.data)){
// for(let j of item.data){
// for(let i=0;i<j.num;i++){
//
// }
// }
// }
} }
}); });
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment