187 lines
7.9 KiB
Plaintext
187 lines
7.9 KiB
Plaintext
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProjectSetMap.aspx.cs" Inherits="FineUIPro.Web.ProjectData.ProjectSetMap" %>
|
|
|
|
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head runat="server">
|
|
<title></title>
|
|
<link href="../res/css/common.css" rel="stylesheet" type="text/css" />
|
|
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=Lma56vCk88x46KEXSyc2cIXk6kT2W7KB"></script>
|
|
</head>
|
|
<body>
|
|
<form id="form1" runat="server">
|
|
<f:PageManager ID="PageManager1" AutoSizePanelID="SimpleForm1" runat="server" />
|
|
<f:Form ID="SimpleForm1" ShowBorder="false" ShowHeader="false" AutoScroll="true"
|
|
BodyPadding="10px" runat="server" RedStarPosition="BeforeText" LabelAlign="Right">
|
|
<Toolbars>
|
|
<f:Toolbar runat="server" ID="tool1">
|
|
<Items>
|
|
<f:Button runat="server" Text="定位" ID="btnD" OnClientClick=" getCurrentPosition();" ></f:Button>
|
|
<f:TextBox ID="txtProjectPointResult" Label="项目坐标范围" runat="server" LabelAlign="right"
|
|
LabelWidth="120px" Width="700px">
|
|
</f:TextBox>
|
|
<f:TextBox ID="txtProjectPoint" Label="当前选择坐标" runat="server" LabelAlign="right"
|
|
LabelWidth="120px" Width="400px">
|
|
</f:TextBox>
|
|
<f:ToolbarFill runat="server"></f:ToolbarFill>
|
|
<f:Button runat="server" Text="确定" ID="btnSure" OnClick="btnSure_Click" ></f:Button>
|
|
<f:Button runat="server" Text="完成" ID="btnComplete" OnClick="btnComplete_Click" ></f:Button>
|
|
<f:Button runat="server" Text="保存" ID="btnSave" OnClick="btnSave_Click" ></f:Button>
|
|
</Items>
|
|
</f:Toolbar>
|
|
</Toolbars>
|
|
<Rows>
|
|
<f:FormRow>
|
|
<Items>
|
|
<f:ContentPanel runat="server" ShowHeader="false">
|
|
<div style="">
|
|
<%--<div id="getCurrentPosition" style="width:100px;margin-left:5px;border:1px solid rgb(116, 178, 226);border-radius:8px;padding:3px 6px;">定位当前位置</div>--%>
|
|
<div style="display:flex;margin-top:10px; ">
|
|
<div>
|
|
<input id="addressName" type="text" name="addressName" value="" />
|
|
</div>
|
|
<div id="getAddressName" style="width:128px;margin-left:5px;border:1px solid rgb(116, 178, 226);border-radius:8px;padding:3px 6px;">查询地址对应坐标</div>
|
|
</div>
|
|
</div>
|
|
</f:ContentPanel>
|
|
</Items>
|
|
</f:FormRow>
|
|
<f:FormRow>
|
|
<Items>
|
|
<f:ContentPanel runat="server" ShowHeader="false">
|
|
<div style="width: 100%; height: 600px; border: #ccc solid 1px; font-size: 12px" id="map1"></div>
|
|
</f:ContentPanel>
|
|
</Items>
|
|
</f:FormRow>
|
|
</Rows>
|
|
</f:Form>
|
|
</form>
|
|
</body>
|
|
<script type="text/javascript">
|
|
var txtProjectPointClientID = '<%= txtProjectPoint.ClientID %>';
|
|
var txtProjectPointResultClientID = '<%= txtProjectPointResult.ClientID %>';
|
|
|
|
$("#btnConfirmWC").click(function () {
|
|
var result =F(txtProjectPointResultClientID).getValue() // $("#txtProjectPointResult").html()
|
|
var list = result.split('|')
|
|
AddPolygon(list)
|
|
})
|
|
$(document).ready(function () {
|
|
$(document).on('click', "#getCurrentPosition", function () {
|
|
getCurrentPosition()
|
|
})
|
|
$(document).on('click', "#getAddressName", function () {
|
|
getPointByAddress()
|
|
})
|
|
})
|
|
// 搜索输入地址对应坐标
|
|
function getPointByAddress() {
|
|
var address = $('#addressName').val() || '北京市海淀区上地10街'
|
|
var city = ''; // '北京市'
|
|
//创建地址解析器实例
|
|
var myGeo = new BMap.Geocoder();
|
|
// 将地址解析结果显示在地图上，并调整地图视野
|
|
myGeo.getPoint(address, function (point) {
|
|
if (point) {
|
|
map.centerAndZoom(point, 16);
|
|
addMapOverlay(point)
|
|
} else {
|
|
alert('您选择的地址没有解析到结果！');
|
|
}
|
|
}, city)
|
|
}
|
|
// 定位当前位置
|
|
function getCurrentPosition() {
|
|
var geolocation = new BMap.Geolocation();
|
|
geolocation.getCurrentPosition(function (r) {
|
|
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
|
|
addMapOverlay(r.point)
|
|
map.panTo(r.point);
|
|
// alert('您的位置：' + r.point.lng + ',' + r.point.lat);
|
|
}
|
|
else {
|
|
alert('failed' + this.getStatus());
|
|
}
|
|
}, { enableHighAccuracy: true })
|
|
}
|
|
//创建和初始化地图函数：
|
|
function initMap() {
|
|
createMap();//创建地图
|
|
setMapEvent();//设置地图事件
|
|
addMapControl();//向地图添加控件
|
|
//addMapOverlay();//向地图添加覆盖物
|
|
|
|
setTimeout(function () {AddPolygon(); }, 2000);
|
|
|
|
|
|
}
|
|
function createMap() {
|
|
map = new BMap.Map("map1");
|
|
map.centerAndZoom(new BMap.Point(114.343278, 30.661114), 11);
|
|
map.addEventListener('click', function (e) {
|
|
console.log(e)
|
|
// alert('点击位置经纬度：' + e.point.lng + ',' + e.point.lat);
|
|
//$("#txtProjectPoint").html(e.point.lng + ',' + e.point.lat)
|
|
F(txtProjectPointClientID).setValue(e.point.lng + ',' + e.point.lat)
|
|
addMapOverlay(e.point)
|
|
});
|
|
}
|
|
function setMapEvent() {
|
|
map.enableScrollWheelZoom();
|
|
map.enableKeyboard();
|
|
map.enableDragging();
|
|
map.enableDoubleClickZoom()
|
|
}
|
|
function addClickHandler(target, window) {
|
|
target.addEventListener("click", function () {
|
|
target.openInfoWindow(window);
|
|
});
|
|
}
|
|
function addMapOverlay(point) {
|
|
removeOverlay();
|
|
// 创建点
|
|
var marker = new BMap.Marker(new BMap.Point(point.lng, point.lat));
|
|
map.addOverlay(marker); // 增加点
|
|
}
|
|
//绘制多边形，经纬度
|
|
function AddPolygon() {
|
|
|
|
var result = F(txtProjectPointResultClientID).getValue()
|
|
var list = result.split('|')
|
|
var listArr = []
|
|
for (var i = 0; i < list.length; i++) {
|
|
var pointTemp = list[i]
|
|
if (pointTemp) {
|
|
listArr.push(new BMap.Point(pointTemp.split(',')[0], pointTemp.split(',')[1]))
|
|
}
|
|
}
|
|
removeOverlay();
|
|
// 创建多边形
|
|
var polygon = new BMap.Polygon(listArr, {
|
|
strokeColor: 'red',
|
|
strokeWeight: 2,
|
|
strokeOpacity: 0.5
|
|
});
|
|
map.addOverlay(polygon);
|
|
|
|
let mapViewObj = map.getViewport(listArr);
|
|
map.centerAndZoom(mapViewObj.center, mapViewObj.zoom)
|
|
}
|
|
// 清除覆盖物
|
|
function removeOverlay() {
|
|
map.clearOverlays();
|
|
}
|
|
//向地图添加控件
|
|
function addMapControl() {
|
|
var scaleControl = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
|
|
scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
|
|
map.addControl(scaleControl);
|
|
var navControl = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
|
|
map.addControl(navControl);
|
|
var overviewControl = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: true });
|
|
map.addControl(overviewControl);
|
|
}
|
|
var map;
|
|
initMap();
|
|
</script>
|
|
</html>
|