提交代码
This commit is contained in:
@@ -0,0 +1,247 @@
|
||||
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ConstructionRiskMap.aspx.cs" Inherits="FineUIPro.Web.ProjectData.ConstructionRiskMap" %>
|
||||
|
||||
<!DOCTYPE html>
|
||||
<style>
|
||||
body,
|
||||
html,
|
||||
#container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: "微软雅黑";
|
||||
}
|
||||
.popover-area {
|
||||
list-style: none;
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
font-size: 12px;
|
||||
}
|
||||
ul.popover-area{
|
||||
margin: 0 0 0;
|
||||
}
|
||||
.popover-area li {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.popover-area li+li {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.popover-area li p {
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.popover-area li p:first-child {
|
||||
font-weight: 600;
|
||||
float: left;
|
||||
width: 84px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.popover-area li p:nth-child(2) {
|
||||
width: 330px;
|
||||
float: right;
|
||||
color: #545454;
|
||||
}
|
||||
</style>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head runat="server">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title></title>
|
||||
<link href="../res/css/common.css" rel="stylesheet" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
<form id="form1" runat="server">
|
||||
<f:PageManager ID="PageManager1" AutoSizePanelID="RegionPanel1" runat="server" />
|
||||
<f:RegionPanel ID="RegionPanel1" ShowBorder="false" runat="server" Margin="5px">
|
||||
<Regions>
|
||||
<f:Region ID="Region2" ShowBorder="false" ShowHeader="false" Position="Center" Layout="VBox"
|
||||
BoxConfigAlign="Stretch" BoxConfigPosition="Left" runat="server" BodyPadding="0 5 0 0">
|
||||
<Items>
|
||||
<f:ContentPanel ID="ContentPanel1" CssClass="bodyregion" ShowBorder="false" ShowHeader="false" runat="server" >
|
||||
<div id="map" style="width:100%;height:700px" ></div>
|
||||
</f:ContentPanel>
|
||||
|
||||
</Items>
|
||||
</f:Region>
|
||||
</Regions>
|
||||
</f:RegionPanel>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
<script src="https://api.map.baidu.com/api?v=2.0&ak=24y6PiwMI7AqPQ3L4SE253mWKntWR1Nq"></script>
|
||||
<script type="text/javascript">
|
||||
|
||||
F.ready(function () {
|
||||
var tileLayer = new BMap.TileLayer();
|
||||
tileLayer.getTilesUrl = function (tileCoord, zoom) {
|
||||
var x = tileCoord.x;
|
||||
var y = tileCoord.y;
|
||||
return '../../File/Map/SD1-PC-2023-001/tiles/' + zoom + '/tile-' + x + '_' + y + '.png';
|
||||
}
|
||||
var MyMap = new BMap.MapType('MyMap', tileLayer, { minZoom: 3, maxZoom: 8 });
|
||||
var map = new BMap.Map('map', { mapType: MyMap });
|
||||
// 复杂的自定义覆盖物
|
||||
function ComplexCustomOverlay(workAreaId,point, text, mouseoverText){
|
||||
this._point = point;
|
||||
this._text = text;
|
||||
this._overText = mouseoverText;
|
||||
this._workAreaId = workAreaId;
|
||||
|
||||
}
|
||||
ComplexCustomOverlay.prototype = new BMap.Overlay();
|
||||
ComplexCustomOverlay.prototype.initialize = function(map){
|
||||
this._map = map;
|
||||
var pixel = map.pointToOverlayPixel(this._point,{
|
||||
useRound:false, // 设置此参数，防止抖动
|
||||
fixPosition:true // 覆盖物跨越180时修正位置
|
||||
});
|
||||
var div = this._div = document.createElement("div");
|
||||
div.style.position = "absolute";
|
||||
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
|
||||
div.style.backgroundColor = "#EE5D5B";
|
||||
div.style.border = "1px solid #BC3B3A";
|
||||
div.style.color = "white";
|
||||
div.style.height = "24px";
|
||||
div.style.padding = "2px";
|
||||
div.style.lineHeight = "24px";
|
||||
div.style.whiteSpace = "nowrap";
|
||||
div.style.MozUserSelect = "none";
|
||||
div.style.fontSize = "12px"
|
||||
var span = this._span = document.createElement("span");
|
||||
div.appendChild(span);
|
||||
span.appendChild(document.createTextNode(this._text));
|
||||
var that = this;
|
||||
|
||||
var arrow = this._arrow = document.createElement("div");
|
||||
arrow.style.background = "url(../../File/Image/label.png) no-repeat";
|
||||
arrow.style.position = "absolute";
|
||||
arrow.style.width = "11px";
|
||||
arrow.style.height = "10px";
|
||||
arrow.style.top = "22px";
|
||||
arrow.style.left = "10px";
|
||||
arrow.style.overflow = "hidden";
|
||||
div.appendChild(arrow);
|
||||
div.onmouseover = function(){
|
||||
this.style.backgroundColor = "#6BADCA";
|
||||
this.style.borderColor = "#0000ff";
|
||||
this.getElementsByTagName("span")[0].innerHTML = that._overText;
|
||||
arrow.style.backgroundPosition = "0px -20px";
|
||||
}
|
||||
|
||||
div.onmouseout = function(){
|
||||
this.style.backgroundColor = "#EE5D5B";
|
||||
this.style.borderColor = "#BC3B3A";
|
||||
this.getElementsByTagName("span")[0].innerHTML = that._text;
|
||||
arrow.style.backgroundPosition = "0px 0px";
|
||||
}
|
||||
|
||||
map.getPanes().labelPane.appendChild(div);
|
||||
|
||||
return div;
|
||||
}
|
||||
ComplexCustomOverlay.prototype.draw = function(){
|
||||
var map = this._map;
|
||||
var pixel = map.pointToOverlayPixel(this._point);
|
||||
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) + "px";
|
||||
this._div.style.top = pixel.y - 30 + "px";
|
||||
}
|
||||
ComplexCustomOverlay.prototype.addEventListener = function (event, fun) {
|
||||
this._div['on' + event] = fun;
|
||||
}
|
||||
map.addControl(new BMap.NavigationControl( ));
|
||||
map.centerAndZoom(new BMap.Point(0, 0), 5);
|
||||
//map.addEventListener('click', function (e) {
|
||||
// alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
|
||||
// // var marker1 = new BMap.Marker(new BMap.Point(e.latlng.lng, e.latlng.lat));
|
||||
//// 在地图上添加点标记
|
||||
//map.addOverlay(marker1);
|
||||
|
||||
//});
|
||||
function createClickEvent(overlay)
|
||||
{
|
||||
return function (e) {
|
||||
var p = e.target;
|
||||
debugger;
|
||||
login(overlay._workAreaId)
|
||||
}
|
||||
}
|
||||
function createRiskClickEvent(txt,opts,point)
|
||||
{
|
||||
return function (e) {
|
||||
|
||||
var infoWindow = new BMap.InfoWindow(txt, opts);
|
||||
map.openInfoWindow(infoWindow, point);
|
||||
}
|
||||
|
||||
}
|
||||
var myIcon = new BMap.Icon("../../File/Image/wei.png", new BMap.Size(52, 52));
|
||||
var Coordinate = '<%=Coordinate%>'
|
||||
if(Coordinate!=''){
|
||||
var coord = Coordinate.split(",");
|
||||
for(var i=0;i< coord.length;i++){
|
||||
var loc= coord[i].split(";")
|
||||
var point=new BMap.Point(loc[3], loc[4]);
|
||||
var txt = loc[1]+"："+loc[2];
|
||||
var myCompOverlay = new ComplexCustomOverlay(loc[0],point, txt,txt);
|
||||
map.addOverlay(myCompOverlay);
|
||||
// 点标记添加点击事件
|
||||
myCompOverlay.addEventListener('click', createClickEvent(myCompOverlay));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function login(workAreaId) {
|
||||
$.ajax({
|
||||
url: "ConstructionRiskMap.aspx/getRisk",
|
||||
type: "POST",
|
||||
contentType: "application/json; charset=utf-8",
|
||||
dataType: "json",
|
||||
data: JSON.stringify({
|
||||
WorkAreaId: workAreaId
|
||||
}),
|
||||
success: function (data) {
|
||||
if (data.d != undefined && data.d != '' ) {
|
||||
map.clearOverlays();
|
||||
debugger
|
||||
var risk = data.d
|
||||
var coord = risk.split(",");
|
||||
for(var i=0;i< coord.length;i++){
|
||||
var loc= coord[i].split(";")
|
||||
var point=new BMap.Point(loc[5], loc[6]);
|
||||
var txt = "<ul class='popover-area'>" +
|
||||
"<li><p class='text-gray3'>施工单位：</p><p>"+loc[1]+"</p></li>" +
|
||||
"<li><p class='text-gray3'>日期：</p><p>"+loc[2]+"</p></li>" +
|
||||
"<li><p class='text-gray3'>风险等级：</p><p>"+loc[3]+"</p></li>" +
|
||||
"<li><p class='text-gray3'>作业风险描述：</p><p>"+loc[4]+"</p></li>" +
|
||||
"</ul>";
|
||||
var marker = new BMap.Marker(point ,{
|
||||
icon: myIcon
|
||||
});
|
||||
// 在地图上添加点标记
|
||||
map.addOverlay(marker);
|
||||
var opts = {
|
||||
width : 440, // 信息窗口宽度
|
||||
height: 100, // 信息窗口高度
|
||||
title : "" , // 信息窗口标题
|
||||
message:txt
|
||||
}
|
||||
marker.addEventListener('mouseover', createRiskClickEvent(txt,opts,point));
|
||||
marker.addEventListener('mouseout', function(){map.closeInfoWindow() });
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user