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