Skip to content

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

111

parent 6812fbd7
Hide whitespace changes
Inline Side-by-side
Showing with 685 additions and 23 deletions
src/components/map.vue
View file @ fe8be945
......@@ -59,34 +59,676 @@
],
search_data: [
{
label:'青山-青罗线与岗阳街路口对角A2B4',
longitude:119.817653,
latitude:30.303568
id:1,
type:'青山',
label:'青罗线与岗阳街路口对角',
position:'119.817653,30.303568',
data:[{
type:1,
num:2
},{
type:2,
num:4
}]
},
{
label:'青山-胜联路十字路口A1',
longitude:119.828229,
latitude:30.274509
id:2,
type:'青山',
label:'胜联路十字路口',
position:'119.828229,30.274509',
data:[{
type:1,
num:1
}]
},
{
label:'青山-胜联路第三个叉路口路灯杆A1',
longitude:119.831894,
latitude:30.3048
id:3,
type:'青山',
label:'胜联路第三个叉路口路灯杆',
position:'119.831894,30.3048',
data:[{
type:1,
num:1
}]
},
{
label:'青山-杭瑞高速与汪宫线路口A1',
longitude:119.87221,
latitude:30.251338
id:4,
type:'青山',
label:'杭瑞高速与汪宫线路口',
position:'119.87221,30.251338',
data:[{
type:1,
num:1
}]
},
{
label:'青山-华旺厂门口A1',
longitude:119.850356,
latitude:30.269257
id:5,
type:'青山',
label:'华旺厂门口',
position:'119.850356,30.269257',
data:[{
type:1,
num:1
}]
},
{
label:'青山-发达路与科技大道路灯杆A1',
longitude:119.842598,
latitude:30.262775,
id:6,
type:'青山',
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: {}
......@@ -111,13 +753,25 @@
this.getBoundary(this.map);
}, 2000);
},
mapShow(coordinate, item) {
mapShow(coordinate, item,type=1) {
let self = this;
let opts = {
position: coordinate, // 指定文本标注所在的地理位置
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({
color: "#444",
fontSize: "12px",
......@@ -128,7 +782,8 @@
fontFamily: "微软雅黑"
});
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});
this.map.addOverlay(marker); // 将标注添加到地图中
marker.addEventListener("click", function() {
......@@ -170,8 +825,15 @@
}
let marker;
for (let item of self.search_data) {
marker = new BMap.Point(item.longitude, item.latitude)
self.mapShow(marker, item);
marker = new BMap.Point(item.position.split(',')[0], item.position.split(',')[1]);
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