Skip to content

html / MeteorologicalBureau

Go to a project
Commit 3b4aa986 by hanjixin
Options

pop window

parent c3126569
Showing with 140 additions and 27 deletions
map/css/main.css
......@@ -4,7 +4,7 @@
}
.text-shadow{
text-shadow: .1rem 0rem .5rem rgba(255,255,255, 0.4), -.1rem 0rem .5rem rgba(255,255,255, 0.4), 0rem .1rem .5rem rgba(255,255,255, 0.4), 0rem -.1rem .5rem rgba(255,255,255,0.4);
text-shadow: 3px 0 5px rgba(255,255,255, 0.4), -3px 0 5px rgba(255,255,255, 0.4), 0 3px 5px rgba(255,255,255, 0.4), 0 -3px 5px rgba(255,255,255,0.4);
}
body,
html,
......@@ -98,4 +98,61 @@ body,
position: absolute;
left: 0;
top:-25%;
}
/* personpop */
#personpop{
position: fixed;
z-index: 999999;
left: 10px;
top: 10px;
/* border: 1px solid red; */
}
#personpop div{
/* border: 1px solid red; */
}
#box{
color: #fff;
width: 390px;
height: 390px;
background: url(../img/pop.png);
background-size: 100% 108%;
background-position: center bottom;
position: relative;
}
#close{
position: absolute;
right: 0;
top: 0;
width: 80px;
height: 40px;
z-index: 100;
}
#title{
text-align: center;
font-size: 24px;
line-height: 43px;
margin-bottom: 10px;
}
#contant{
width: 100%;
text-align: center;
font-size: 12px;
}
#contant div.li{
width: 80%;
height: 40px;
line-height: 43px;
font-size: 18px;
color: #dfe1e5;
margin: 0 auto;
border-bottom: 1px solid #27384e;
text-align: left;
clear: both;
}
#contant div:last-child{
border-bottom: none;
}
.li div{
width: 40%;
float: left;
}
\ No newline at end of file
map/index.html
......@@ -7,11 +7,28 @@
<title>MAP</title>
<link rel="stylesheet" href="css/main.css">
<style>
</style>
</head>
<body>
<!-- <div id=personpop>
<div id=box>
<div id=title>阿斯顿</div>
<div id=contant>
<div class=li>
<div>阿斯顿</div>1
</div>
<div class=li>
<div>阿斯顿</div>2
</div>
<div class=li>
<div>阿顿</div>啊实打实的
</div>
</div>
<div id=close onclick="popclose()"></div>
</div>
</div> -->
<div id="container"></div>
<div id=nav>
<div class="item" onclick="go(0)"><span class="icon"></span>预警信息</div>
......@@ -27,6 +44,7 @@
<div onclick="go(2,1)">人员2</div>
</div>
</div>
<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=ee7327615de4d673c4e455a772da45fd&plugin=Map3D,AMap.DistrictSearch,ElasticMarker,AMap.MarkerClusterer"></script>
......@@ -38,30 +56,34 @@
</style>
<script>
var oldi1 = 0, oldi2 = 0
function go(i1,i2){
console.log(oldi1,oldi2);
console.log(i1,i2);
if( i1 == oldi1 && i2 == oldi2 ){
function popclose(){
console.log('popclose');
map3d.map.clearInfoWindow()
}
function go(i1, i2) {
console.log(oldi1, oldi2);
console.log(i1, i2);
if (i1 == oldi1 && i2 == oldi2) {
return false
}
$(".item").removeClass("active")
$(".item").eq(i1).addClass("active")
$(".item").removeClass("active").removeClass("text-shadow")
$(".item").eq(i1).addClass("active text-shadow")
$(".subnav").hide()
$(".subnav"+i1).show()
$(".subnav"+i1).find("div").removeClass("active")
if(typeof(i2) !='undefined'){
$(".subnav"+i1).find("div").eq(i2).addClass("active")
$(".subnav" + i1).show()
$(".subnav" + i1).find("div").removeClass("active").removeClass("text-shadow")
if (typeof (i2) != 'undefined') {
$(".subnav" + i1).find("div").eq(i2).addClass("active text-shadow")
}
if( i1 == 0 && typeof(i2)=='undefined'){
// addPoiByApi('./预警接口.json')
if (i1 == 0 && typeof (i2) == 'undefined') {
addPoiByApi('./预警接口.json')
}
if( i1 == 2&& i2 == 0){
if (i1 == 2 && i2 == 0) {
addPoiByApi('./personal.json')
}
if( i1 == 1&& i2 == 1){
addPoiByApi('./led.json','Single')
if (i1 == 1 && i2 == 1) {
addPoiByApi('./led.json', 'Single')
}
oldi1 = i1, oldi2 = i2
}
......@@ -74,13 +96,16 @@
var urlParams = GetParams()
//成都 重庆 天津 北京 上海 大连 三沙 湖北 中国
window.map3d = new Map3D(urlParams.adcode||'成都','container',urlParams,(_map3d)=>{
window.addPoiByApi('./led.json')
// window.addPoiByApi('./led.json','Single')
// window.addPoiByApi('./personal.json')
go(1,1)
});
window.review = function (params) {
map3d.review()
}
window.delPoi = function (params) {
try {
map3d.map.clearInfoWindow()
map3d.delPoi(pois)
window.pois = []
} catch (error) {
......
map/js/Map3D.js
......@@ -8,7 +8,7 @@ var _renderClusterMarker = function (context, count) {
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
var shadowColor = 'hsla(' + Hue + ',100%,50%,1)';
div.style.backgroundColor = bgColor;
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
var size = Math.round(15 + Math.pow(context.count / count, 1 / 5) * 20);
div.style.width = div.style.height = size + 'px';
div.style.border = 'solid 1px ' + borderColor;
div.style.borderRadius = size / 2 + 'px';
......@@ -16,7 +16,7 @@ var _renderClusterMarker = function (context, count) {
div.innerHTML = context.count;
div.style.lineHeight = size + 'px';
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.fontSize = '12px';
div.style.textAlign = 'center';
div.addEventListener('click', () => {
console.log(context.markers.length);
......@@ -56,8 +56,9 @@ class Map3D {
}
delPoi(pois) {
this.cluster.removeMarkers(pois)
this.map.remove(pois)
this.cluster.removeMarkers(pois)
}
addPoisSingle(pois) {
let markers = []
......@@ -116,18 +117,47 @@ class Map3D {
}
setPersonalPoint(item) {
var html =`
<div id=box>
<div id=title>${item.clientaddress || item.name}</div>
<div id=contant>
<div class=li>
<div>阿斯顿</div>1
</div>
<div class=li>
<div>阿斯顿</div>2
</div>
<div class=li>
<div>阿顿</div>啊实打实的
</div>
</div>
<div id=close onclick="popclose()"></div>
</div>
`
var infoWindow = new AMap.InfoWindow({
isCustom: true, //使用自定义窗体
content: "<div style='color:#fff'>" + (item.clientaddress || item.name) + "</div>",
offset: new AMap.Pixel(16, -45)
content:html,
// offset: new AMap.Pixel(16, -45)
});
var icon = new AMap.Icon({
// 图标尺寸
size: new AMap.Size(20, 20),
// 图标的取图地址
image: 'img/1.png',
// 图标所用图片大小
imageSize: new AMap.Size(20, 20),
// 图标取图偏移量
imageOffset: new AMap.Pixel(0, 0)
});
let marker = new AMap.Marker({
map: this.map,
clickable: true,
position: new AMap.LngLat(Number(item.lon), Number(item.lat)), //基点位置
icon: 'img/1.png', //marker图标，直接传递地址url
offset: { x: -8, y: -34 } //相对于基点的位置
icon: icon||'img/1.png', //marker图标，直接传递地址url icon||
offset: { x: -10, y: -10 } //相对于基点的位置
});
marker._data = item
marker.on('click', (params) => {
console.log(item, params);
......
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 sign in to comment