vue项⽬引⼊第三⽅地图插件并且随机显⽰坐标点（经纬度），点击坐标点弹出窗⼝，点击详情⽂字。。。 新型地沟油
上述中的内容在第三⽅插件的⽂档介绍中都有。
在具体特性模块中引⼊地图
：center属性：默认设置⼀个坐标点
对应的defaultCenter的值为
defaultCenter: {
lng: 113.1268217112,
lat: 27.8307991014
}
：zoom看⽂档啥意思
defaultZoom: 5,
:mapStyle设置地图的主题 {style:'dark'}是我需要的百度提供的主题
<!--引⼊百度地图-->
<baidu-map class="map" :center="defaultCenter" :zoom="defaultZoom" :mapStyle="{style:'dark'}">
<div v-for="(point,index) in points">
<bm-marker :position="point" @click="infoWindowOpen($event,index)">
<bm-info-window :show="point.show" @close="infoWindowClose($event,index)">
<p>
<span>IP个数:</span>
<span>{{point.doc_count ? point.doc_count : 0}}</span>
</p>
<p>
<span>地址:</span>
<span>{{point.object.ip_GeoPosition.P}}</span>
</p>
<p>
<span>经纬度:</span>
<span>{{lng}},{{lat}}</span>
</p>
<p>
<a href="#" @click="jump(index)">查看详情</a>
</p>
</bm-info-window>
<bm-label :content="doc_count" :labelStyle="{color: 'red', fontSize : '10px'}" :offset="{width: 20, height: -10}"/> </bm-marker>
</div>
</baidu-map>
<template>
<div id="bigScreen">
<Row :gutter="5">
<Col span="5"> <!--第⼀列-->
<Row class="chart-row">
<Col span="24" class="chart-container" >
蓄电池模拟器
<Row class="circle-container">
<Col span="12">
<tp-ssa-echarts :allParams="circle1"></tp-ssa-echarts>
</Col>
<Col span="12">
<tp-ssa-echarts :allParams="circle2"></tp-ssa-echarts>
</Col>
</Row>
8300c<Row class="circle-container">
<Col span="12">
<tp-ssa-echarts :allParams="circle3"></tp-ssa-echarts>
</Col>
<Col span="12">
<tp-ssa-echarts :allParams="circle4"></tp-ssa-echarts>
</Col>
</Row>
</Col>
</Row>
<Row class="chart-row">
<Col span="24" class="chart-container" >
<tp-ssa-echarts :allParams="allParams1"></tp-ssa-echarts>
</Col>
</Row>
</Row>
<Row class="chart-row">
<Col span="24" class="chart-container" >
<tp-ssa-echarts :allParams="allParams2"></tp-ssa-echarts>
</Col>
</Row>
</Col>
<!--地图-->
<Col span="14" > <!--第⼆列-->
<!--<div v-for="(point,index) in points" >
{{point}}
{{index}}
</div>-->
<!--引⼊百度地图-->
<baidu-map class="map" :center="defaultCenter" :zoom="defaultZoom" :mapStyle="{style:'dark'}">
<div v-for="(point,index) in points">
<bm-marker :position="point" @click="infoWindowOpen($event,index)">
<bm-info-window :show="point.show" @close="infoWindowClose($event,index)">
<p>
<span>IP个数:</span>
<span>{{point.doc_count ? point.doc_count : 0}}</span>
</p>
<p>
<span>地址:</span>
<span>{{point.object.ip_GeoPosition.P}}</span>
</p>
<p>
<span>经纬度:</span>
<span>{{lng}},{{lat}}</span>
</p>
<p>
<a href="#" @click="jump(index)">查看详情</a>
</p>
</bm-info-window>
<bm-label :content="doc_count" :labelStyle="{color: 'red', fontSize : '10px'}" :offset="{width: 20, height: -10}"/> </bm-marker>
</div>
86gan</baidu-map>
<!--<baidu-map class="map" :center="defaultCenter" :zoom="defaultZoom">
<bm-point-collection :points="points" animation="BMAP_ANIMATION_BOUNCE">
</bm-point-collection>
</baidu-map>-->
</Col>
<Col span="5"> <!--第三列-->
<Row class="chart-row">
<Col span="24" class="chart-container" >
<tp-ssa-echarts :allParams="allParams3"></tp-ssa-echarts>
</Col>
</Row>
<Row class="chart-row">
<Col span="24" class="chart-container" >
<tp-ranking-list :allParams="rankingList"></tp-ranking-list>
</Col>
</Row>
<Row class="chart-row">
<Row class="chart-row">
<Col span="24" class="chart-container" >
<tp-ssa-echarts :allParams="allParams4"></tp-ssa-echarts>
恶霉灵原药
</Col>
</Row>
</Col>
</Row>
</div>
</template>
<script>
import TpSsaEcharts from "../../../components/locale-components/tp-ssa-echarts/tp-ssa-echarts"; import TpRankingList from "../../../components/locale-components/tp-ssa-echarts/tp-ranking-list"; export default {并行空间
name: "countPandect",
components: {TpRankingList, TpSsaEcharts},
data() {
return {
barRefs: '',
msg: '外⽹资产管家页⾯',
timeout: 0,
circle1: {
id: 'siteSum',
type: "circle",
title: "总⽹站",
url: '/api/ass_loophole/loophole/static_count',
data: {
offline_attr: '_ass_loophole_static_count'
},
callback : data => {
}
},
circle2: {
id: 'loopholeSum',
type: "circle",
title: "总漏洞数",
url: '/api/ass_loophole/loophole/static_count',
data: {
offline_attr: '_ass_loophole_static_count'
},
callback : data => {
}
},
circle3: {
id: 'siteNoRecord',
type: "circle",
title: "未备案⽹站",
url: '/api/ass_loophole/loophole/static_count',
data: {
offline_attr: '_ass_loophole_static_count'
},
callback : data => {
}
},
circle4: {
id: 'highLoophole',
type: "circle",
title: "严重漏洞",
url: '/api/ass_loophole/loophole/static_count',
data: {
offline_attr: '_ass_loophole_static_count'
},
},
callback : data => {
},
allParams1: {
id: 'portApply',
type: "bar",
title: "端⼝应⽤Top10",
url: '/api/getbar',
reload: 20000,
data: {
index: 'loophole_result',
type: 'lph_scan_result',
aggField: 'resultPort'
}
},
allParams2: {
id: 'ipSiteCount',
type: "bar",
title: "IP站点数Top10",
url: '/api/getbar',
reload: 20000,
data: {
index: 'ipweb_result',
type: 'web_info',
aggField: 'strIP'
}
},
allParams3: {
id: 'ipLoophole',
type: "bar",
title: "IP漏洞数Top10",
url: '/api/getbar',
reload: 20000,
data: {
index: 'loophole_result',
type: 'lph_scan_result',
aggField: 'resultHost',
page: 1,
size: 10
}
},
allParams4: {
config:{
series:[
{
label: {
normal: {
formatter: "{b} 分"
}
}
}
],
},
id: 'loopholeHigh',
type: "pie",
title: "漏洞严重性评分分布",
url: '/api/getpie',
reload: 20000,
data: {
index: 'loophole_result',
type: 'lph_scan_result',
aggField: 'resultSeverity',
size: 10
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议