<%@ 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();//向地图添加覆盖物 } 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); } // 清除覆盖物 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>