218 lines
7.5 KiB
Plaintext
218 lines
7.5 KiB
Plaintext
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="mainRiskMap.aspx.cs" Inherits="FineUIPro.Web.common.mainRiskMap" %>
|
|||
|
|
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
|
|||
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|||
|
|
<head runat="server">
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|||
|
|
<title>RiskMap</title>
|
|||
|
|
<!-- <script type="text/javascript" src="//api.map.baidu.com/api?v=4.2&ak=A1f0GMEwZDn5CLa1dIjndW03oseqxgN6"></script> -->
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="../res/map/TrafficControl.css" />
|
|||
|
|
<%--<link rel="stylesheet" href="../res/assets/iconfont/iconfont.css"/>--%>
|
|||
|
|
</head>
|
|||
|
|
<style>
|
|||
|
|
html,
|
|||
|
|
body,
|
|||
|
|
#newmap {
|
|||
|
|
overflow: hidden;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: "微软雅黑";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 10px;
|
|||
|
|
left: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.search > input {
|
|||
|
|
height: 30px;
|
|||
|
|
padding: 0 15px;
|
|||
|
|
border: 1px solid #f5f5f5;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
<div id="newmap" class="Bottom2"></div>
|
|||
|
|
<div class="search">
|
|||
|
|
<input type="text" id="suggestId" size="20" value="" placeholder="请输入检索地址" style="width: 150px;" />
|
|||
|
|
</div>
|
|||
|
|
<div id="searchResultPanel" style="border: 1px solid #C0C0C0; width: 150px; height: auto; display: none;"></div>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|
|||
|
|
<script type="text/javascript" src="../res/map/baiduMap.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/map/TrafficControl.js"></script>
|
|||
|
|
<script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/map/TextIconOverlay.js"></script>
|
|||
|
|
<script type="text/javascript" src="../res/map/MarkerClusterer.js"></script>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
//var points = [
|
|||
|
|
// {
|
|||
|
|
// "title": "天津市建辰基础工程有限公司",
|
|||
|
|
// "point": [
|
|||
|
|
// "117.638816",
|
|||
|
|
// "39.134029"
|
|||
|
|
// ],
|
|||
|
|
// "content": "接地电阻测试"
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// "title": "南京市消防工程有限公司",
|
|||
|
|
// "point": [
|
|||
|
|
// "117.638816",
|
|||
|
|
// "39.134029"
|
|||
|
|
// ],
|
|||
|
|
// "content": "接地电阻测试"
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// "title": "南京市消防工程有限公司",
|
|||
|
|
// "point": [
|
|||
|
|
// "117.638816",
|
|||
|
|
// "39.134029"
|
|||
|
|
// ],
|
|||
|
|
// "content": "设备材料核对"
|
|||
|
|
// }
|
|||
|
|
//];
|
|||
|
|
|
|||
|
|
var data = <%=riskListData %>;
|
|||
|
|
var points = []
|
|||
|
|
// 遍历数据，获取重复点
|
|||
|
|
data.forEach(e => {
|
|||
|
|
if (points.findIndex(v => v.point[0] == e.point[0] && v.point[1] == e.point[1]) < 0) {
|
|||
|
|
points.push(e)
|
|||
|
|
} else {
|
|||
|
|
points[points.findIndex(v => v.point[0] == e.point[0] && v.point[1] == e.point[1])].title += "," + e.title
|
|||
|
|
points[points.findIndex(v => v.point[0] == e.point[0] && v.point[1] == e.point[1])].content += "," + e.content
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var map = new BMap.Map("newmap"); // 创建Map实例
|
|||
|
|
|
|||
|
|
var point = new BMap.Point(103.766411, 30.322638); // 创建点坐标
|
|||
|
|
map.centerAndZoom(point, 5); // 初始化地图，设置中心点坐标和地图级别
|
|||
|
|
map.enableScrollWheelZoom(true);
|
|||
|
|
map.enablePinchToZoom();
|
|||
|
|
map.enableDragging();
|
|||
|
|
|
|||
|
|
map.addControl(new BMap.OverviewMapControl());
|
|||
|
|
|
|||
|
|
var markers = [];
|
|||
|
|
|
|||
|
|
// 遍历点数组，添加标注
|
|||
|
|
for (var i = 0; i < points.length; i++) {
|
|||
|
|
var marker = new BMap.Marker(new BMap.Point(points[i].point[0], points[i].point[1]));
|
|||
|
|
markers.push(marker);
|
|||
|
|
|
|||
|
|
// 可选：添加标注窗口
|
|||
|
|
addInfoWindow(marker, points[i].title, points[i].content);
|
|||
|
|
}
|
|||
|
|
//最简单的用法，生成一个marker数组，然后调用markerClusterer类即可。
|
|||
|
|
var markerClusterer = new BMapLib.MarkerClusterer(map, { markers: markers })
|
|||
|
|
// 可选：添加信息窗口函数
|
|||
|
|
function addInfoWindow(marker, title, content) {
|
|||
|
|
var opts = {
|
|||
|
|
//minwidth: 150, // 信息窗口宽度
|
|||
|
|
//minheight: 50, // 信息窗口高度
|
|||
|
|
//title: title // 信息窗口标题
|
|||
|
|
};
|
|||
|
|
var tits = title?.split(",");
|
|||
|
|
var cnts = content?.split(",");
|
|||
|
|
var html = `<div style="width:250px;height:180px;overflow-y: scroll;">`
|
|||
|
|
for (var i = 0; i < tits.length; i++) {
|
|||
|
|
html += ` <div style="padding-top: 10px;"> <fieldset style="padding: 4px; font-size: 12px;">
|
|||
|
|
<legend>${tits[i]}</legend>
|
|||
|
|
<p style="padding: 4px 0;margin:0;color: #cccccc;">${cnts[i]}
|
|||
|
|
</fieldset></div>`;
|
|||
|
|
}
|
|||
|
|
html += `</div> `;
|
|||
|
|
// 创建信息窗口对象
|
|||
|
|
var infoWindow = new BMap.InfoWindow(html, opts);
|
|||
|
|
// 打开信息窗口
|
|||
|
|
marker.openInfoWindow(infoWindow);
|
|||
|
|
|
|||
|
|
// 监听标注对象的点击事件，打开信息窗口
|
|||
|
|
marker.addEventListener("click", function () {
|
|||
|
|
this.openInfoWindow(infoWindow);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
map.addControl(new BMap.MapTypeControl({
|
|||
|
|
mapTypes: [
|
|||
|
|
BMAP_NORMAL_MAP, //矢量图
|
|||
|
|
//BMAP_SATELLITE_MAP,//卫星图， 此选项不起作用
|
|||
|
|
BMAP_HYBRID_MAP //混合图， 卫星+矢量图中的街道和标注
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
}));
|
|||
|
|
createSearch()
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 创建搜索框
|
|||
|
|
function createSearch() {
|
|||
|
|
// 搜索框
|
|||
|
|
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
|
|||
|
|
{
|
|||
|
|
"input": "suggestId"
|
|||
|
|
, "location": map
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件
|
|||
|
|
var str = "";
|
|||
|
|
var _value = e.fromitem.value;
|
|||
|
|
var value = "";
|
|||
|
|
if (e.fromitem.index > -1) {
|
|||
|
|
value = _value.province + _value.city + _value.district + _value.street + _value.business;
|
|||
|
|
}
|
|||
|
|
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
|
|||
|
|
|
|||
|
|
value = "";
|
|||
|
|
if (e.toitem.index > -1) {
|
|||
|
|
_value = e.toitem.value;
|
|||
|
|
value = _value.province + _value.city + _value.district + _value.street + _value.business;
|
|||
|
|
}
|
|||
|
|
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
|
|||
|
|
G("searchResultPanel").innerHTML = str;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var myValue;
|
|||
|
|
ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
|
|||
|
|
var _value = e.item.value;
|
|||
|
|
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
|
|||
|
|
G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
|
|||
|
|
|
|||
|
|
setPlace();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function setPlace() {
|
|||
|
|
map.clearOverlays(); //清除地图上所有覆盖物
|
|||
|
|
function myFun() {
|
|||
|
|
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
|
|||
|
|
map.centerAndZoom(pp, 10);
|
|||
|
|
// map.addOverlay(new BMap.Marker(pp)); //添加标注
|
|||
|
|
}
|
|||
|
|
var local = new BMap.LocalSearch(map, { //智能搜索
|
|||
|
|
onSearchComplete: myFun
|
|||
|
|
});
|
|||
|
|
local.search(myValue);
|
|||
|
|
}
|
|||
|
|
function G(id) {
|
|||
|
|
return document.getElementById(id);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.onload = function () {
|
|||
|
|
document.querySelector(".BMap_cpyCtrl").style.display = "none";
|
|||
|
|
document.querySelector(".anchorBL").style.display = "none";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
</script>
|