<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String path = request.getContextPath();
%>
<!DOCTYPE html >
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图初始加载定位到当前城市</title>
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0"/>
    <link rel="stylesheet" href="<%=path%>/page/amap/css/placeSearch.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/page/amap/css/common.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/page/amap/css/jquery.autocomplete.css"/>
    <script type="text/javascript"
            src="<%=path%>/page/amap/citylist.js"></script>
    <script type="text/javascript"
            src="http://webapi.amap.com/maps?v=1.3&key=7de40e4d33458a1c5901c3935f916d3c&&plugin=AMap.OverView,AMap.PlaceSearch,AMap.Scale,AMap.Autocomplete,AMap.MouseTool,AMap.Geocoder,AMap.Marker，AMap.RoadInfoSearch"></script>
    <style type="text/css">
        .poi-title {
            font-size: 14px;
            font-weight: normal;
        }

        .poi-addr a {
            font-size: 14px;
            color: black;
        }

        .context_menu {
            margin: 2px;
            padding: 2px;
            list-style-type: none;
            position: relative;
            background-color: rgb(255, 255, 255);
            border: 1px solid rgb(175, 175, 175);
            border-radius: 5px;
            box-shadow: rgb(153, 153, 153) 2px 2px 8px;
            white-space: nowrap;
            cursor: pointer;
        }

        .context_menu li {
            text-indent: 0.5em;
            color: blue;
            font-size: 13px;
            font-family: verdana;
            height: 20px;
            line-height: 20px;
            word-break: break-all;
            white-space: nowrap;

        }

        .context_menu li.split_line {
            border-bottom-color: rgb(204, 204, 204);
            border-bottom-style: solid;
            border-bottom-width: 1px;
        }

        #searchPanel {
            position: absolute;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }

        .amap_lib_placeSearch_poi {
            background: url(http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png) no-repeat;
            height: 31px;
            width: 19px;
            cursor: pointer;
            left: -1px;
            text-align: center;
            color: #fff;
            font: 12px arial, simsun, sans-serif;
            padding-top: 3px;
        }

        #searchPanel {
            position: fixed;
            background-color: white;
            max-height: 70%;
            overflow-y: auto;
            top: 3px;
            right: 3px;
            width: 280px;
            border-bottom: solid 1px silver;

            filter: alpha(opacity=80); /*IE滤镜，透明度50%*/
            -moz-opacity: 0.8; /*Firefox私有，透明度50%*/
            opacity: 0.8; /*其他，透明度50%*/
        }

        .poi-name {
            color: red;
            font-size: 2.2ex;
        }

        .marker-css {
            color: #ff6600;
            padding: 4px 10px;
            border: 1px solid #fff;
            white-space: nowrap;
            font-size: 12px;
            font-family: "";
            background-color: #0066ff;
        }
    </style>

</head>
<body>
<div id="mapContainer"></div>
<div id="searchDiv" style="position: absolute;top: 10px; background: #FFF;">
    <div>
        <input
                id="cityNameText"
                class="commText"
                style="width: 120px; font-size: 14px; font-weight: bold;margin-left:3px;height: 32px;border-radius: 3px;border: 1px solid #cccccc;text-indent: 0.5em;"
                readonly="readonly"
                type="text"
                value="上海"
                onclick="javascript:citylistBox();"
        />
        <input
                id="searchKeyText"
                class="commText"
                style="width: 180px;height: 32px;border-radius: 3px;border: 1px solid #cccccc;text-indent: 0.5em;"
                type="text"
                placeholder="请输入要查询的关键字"
                autocomplete="off"/>

        <input id="searchButton" class="commButton"
               style="height: 34px;width: 50px;border-radius: 3px; border: 1px solid #cccccc;" type="button"
               value="搜索"/>
        <input id="clearButton" class="commButton"
               style="height: 34px;width: 50px;border-radius: 3px; border: 1px solid #cccccc;" type="button"
               value="清除"/>
    </div>
</div>

<div id="searchPanel">
</div>
<script type="text/javascript" src="<%=path%>/js/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/page/amap/js/cityDialog/city_u.js"></script>
<script type="text/javascript" src="<%=path%>/page/map/js/cityDialog/citylist.js"></script>
<script type="text/javascript" src="<%=path%>/page/amap/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="<%=path%>/page/amap/layer/layer.js"></script>
<script type="text/javascript">
    /* $("#cityNameText").on('click',function(){
     layer.open({
     type:2,
     title: ['选择城市', 'font-size:18px; font-weight:600'],
     area: ['600px', '460px'],
     content: '/amap/cityList.jsp',
     shadeClose: true,
     shift:5
     });
     });   */







    /******************************AMAP**************************************/
    /******************************AMAP**************************************/
    //初始化地图对象，加载地图
    ////初始化加载地图时，若center及level属性缺省，地图默认显示用户当前城市范围
    var map = new AMap.Map('mapContainer', {
        resizeEnable: true,
        zoom: 12
    });
    //地图中添加地图操作ToolBar插件
    map.plugin(['AMap.Scale', 'AMap.OverView'], function () {
        //设置地位标记为自定义标记
        var scale = new AMap.Scale();
        var overView = new AMap.OverView();
        map.addControl(scale);
        map.addControl(overView);
        overView.open();
        map.getCity(function (data) {
            $("#cityNameText").val(data.city || data.province);
        });
        auto = new AMap.Autocomplete({
            city: $("#cityNameText").val(),
            input: "searchKeyText"
        });
    });

    var menu = new ContextMenu(map);
    function ContextMenu(map) {
        var me = this;
        this.mouseTool = new AMap.MouseTool(map); //地图中添加鼠标工具MouseTool插件
        this.contextMenuPositon = null;
        var content = [];
        content.push("<div>");
        content.push("    <ul class='context_menu'>");
        content.push("        <li class='split_line' onclick='menu.clickLocalPut()'>以此为地址</li>");
        //content.push("        <li class='split_line' onclick='menu.clickDestPut()'>以此为目的地</li>");
        // content.push("        <li onclick='menu.searchAround()'>周边搜索</li>");
        content.push("    </ul>");
        content.push("</div>");
        this.contextMenu = new AMap.ContextMenu({isCustom: true, content: content.join('')});//通过content自定义右键菜单内容
        //地图绑定鼠标右击事件——弹出右键菜单
        map.on('rightclick', function (e) {
            me.contextMenu.open(map, e.lnglat);
            me.contextMenuPositon = e.lnglat; //右键菜单位置
        });
    }

    ContextMenu.prototype.clickLocalPut = function () {
        console.log(this.contextMenuPositon);
        var lng = this.contextMenuPositon.lng;
        var lat = this.contextMenuPositon.lat;
        regeocoder([lng, lat]);
        this.contextMenu.close();
    }

    ContextMenu.prototype.clickDestPut = function () {
        console.log(this.contextMenuPositon);
        var lng = this.contextMenuPositon.lng;
        var lat = this.contextMenuPositon.lat;
        regeocoder_dest([lng, lat]);
        this.contextMenu.close();
    }


    //逆地理编码
    function regeocoder_dest(lnglatXY) {
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });
        geocoder.getAddress(lnglatXY, function (status, result) {
            if (status === 'complete' && result.info === 'OK') {
                parent.orderInfoFrame.orderingIframe.setDest_Address(lnglatXY[0], lnglatXY[1], result.regeocode.formattedAddress);
            }
        });
    }

    //逆地理编码
    function regeocoder(lnglatXY) {
        var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all"
        });
        geocoder.getAddress(lnglatXY, function (status, result) {
            //alert(0);
            if (status === 'complete' && result.info === 'OK') {
                parent.setAddress(lnglatXY[0], lnglatXY[1], result.regeocode.formattedAddress);
            }
        });
    }

    //逆地理编码

    //根据cityName设置地图
    function setMapCity(city) {
        city && ($("#cityNameText").val(city)) && map.setCity(city) && (auto = new AMap.Autocomplete({
            city: city,
            input: "searchKeyText"
        }));
    }

    //自动输入提示
    var auto;


    $("#searchKeyText").keydown(function (event) {
        event.keyCode === 13 && $(".amap-sug-result").empty() && autoSelectByInput();
    });

    AMap.event.addListener(auto, "select", autoSelect);//注册监听，当选中某条记录时会触发

    function autoSelect(e) {
        placeSearch.setCity(e.poi.adcode);
        placeSearch.search(e.poi.name, function (status, result) {
            if (status == 'info')$("searchPanel").html('结果错误，请重试');
            else if (status == 'no_data')$("searchPanel").html('没有查询数据');
            else if (status)'complete' && initPanel(result);
        });  //关键字查询查询
    }

    function autoSelectByInput() {
        placeSearch.setCity($("#cityNameText").val());
        placeSearch.search($("#searchKeyText").val(), function (status, result) {
            if (status == 'info')$("searchPanel").html('结果错误，请重试');
            else if (status == 'no_data')$("searchPanel").html('没有查询数据');
            else if (status == 'complete')initPanel(result);
        });
    }

    /********************************/


    //地图marker
    function initPanel(result) {
        map.clearMap();
        var poiList = result.poiList;
        var pois = poiList.pois;
        $('#searchPanel').empty();
        var panelText = '<div class="amap_lib_placeSearch"><div class="amap_lib_placeSearch_list"><ul>';

        for (var i in pois) {
            var marker = new AMap.Marker({
                position: pois[i].location,
                map: map,
                //icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b'+(parseInt(i)+1)+'.png',
                content: '<div class="amap_lib_placeSearch_poi">' + (parseInt(i) + 1) + '</div>',
                label: {offset: new AMap.Pixel(20, 20), content: pois[i].name},
                topWhenClick: true,
                topWhenMouseOver: true
            });
            var poiName = pois[i].name;
            var lng = pois[i].location.getLng();
            var lat = pois[i].location.getLat();
            var address = pois[i].cityname + pois[i].adname + pois[i].address;
            panelText += '<li class="poibox"><div class="amap_lib_placeSearch_poi poibox-icon">' + (parseInt(i) + 1) +
                    '</div><h3  class="poi-title"><span  class="poi-name">' + pois[i].name +
                    '</span></h3>' +

                    ' <div class="poi-info">' +
                    ' <p class="poi-addr">' +
                    // 		" <a href='#' onclick=setAddress("+ lng +","+ lat +",'"+poiName+"-"+address+"')>"+
                    " <a href='#' onclick=setAddress(" + lng + "," + lat + ",'" + address + "')>" +
                    ' 地址:' + address + '' +
                    '</a>&nbsp;&nbsp;</span></p>';
            pois[i].tel && ( panelText += '<p class="poi-tel">电话:' + pois[i].tel + '</p>');
            panelText += '</div></li>';
        }
        panelText += '</ul></div></div>';
        $('#searchPanel').append(panelText);

        map.setFitView();

    }

    function setAddress(lng, lat, address) {
        parent.setAddress(lng, lat, address);
    }
    function setDest_Address(lng, lat, address) {
        parent.setDest_Address(lng, lat, address);
    }

    //提示后搜索
    var placeSearch = new AMap.PlaceSearch({
        pageSize: 10,
        extensions: 'all',
        type: '汽车服务|汽车销售|汽车维修|生活服务|商务住宅|政府机构及社会团体|交通设施服务|公司企业|道路附属设施|地名地址信息|公共设施'
    });


    //清楚所有的查询
    $("#clearButton").on('click', function () {
        $("#searchKeyText").val(null);
        placeSearch.clear();
        map.clearMap();
    });

    $("#searchButton").on('click', function () {
        autoSelectByInput();
    });

    // 实例化点标记
    window.onload = function () {
        var lng =${lng};
        var lat =${lat};
        if (lng != null && lng != 0.0 && lat != null && lat != 0.0) {
            addMarker(lng, lat);
        }
    }

    function addMarker(lng, lat) {
        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
            position: [lng, lat]
        });
        marker.setMap(map);

//        // 自定义点标记内容
//        var markerContent = document.createElement("div");
//
//        // 点标记中的图标
//        var markerImg = document.createElement("img");
//        markerImg.className = "markerlnglat";
//        markerImg.src = "http://webapi.amap.com/theme/v1.3/markers/n/mark_r.png";
//        markerContent.appendChild(markerImg);
//
//        // 点标记中的文本
//        var markerSpan = document.createElement("span");
//        markerSpan.className = 'marker-css';
//        markerSpan.innerHTML = "该经销商地址";
//        markerContent.appendChild(markerSpan);
//
//        marker.setContent(markerContent); //更新点标记内容
//        marker.setPosition([lng, lat]); //更新点标记位置
    }
</script>
</body>
</html>						

					