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>
|