<?php if(!defined('IN_SDCMS')) exit;?><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<title>电子地图</title>
<link rel="stylesheet" href="{WEB_ROOT}public/css/ui.css">
<link rel="stylesheet" href="{WEB_ROOT}public/admin/css/layout.css">
<script>var ue_url="{U('upload/imagelist','type=1&multiple=1')}",web_root="{WEB_ROOT}";</script>
<script src="{WEB_ROOT}public/js/jquery.js"></script>
<script src="{WEB_ROOT}public/js/ui.js"></script>
<script src="{WEB_ROOT}public/admin/js/base.js"></script>
<script src="{WEB_ROOT}public/ueditor/ueditor.config.js"></script>
<script src="{WEB_ROOT}public/ueditor/ueditor.all.min.js"></script>
</head>

<body>
    <div class="position">当前位置：插件管理 > <a href="{U('index')}">电子地图</a></div>
    <div class="borders">
        <!---->
        <div class="tabs tabs-white" data-href="1">
            <ul class="tabs-nav">
              <li class="active"><a href="{THIS_LOCAL}">电子地图</a></li>
            </ul>
            <div class="tabs-content">
                <div class="tabs-pane active">
                <!--loop-->
                <form class="ui-form" method="post">
                    <div class="form-group row">
                        <label class="col-left col-form-label">地点选择：</label>
                        <div class="col-right">
                            <div id="container" style="width:100%;height:{$height}px;">地图加载中...</div>
                            <div class="input-tips">通过地图找到您单位所在的位置，然后鼠标单击即可获取相应坐标</div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-left col-form-label">坐标：</label>
                        <div class="col-right">
                            <div class="input-group">
                                <input type="text" name="t0" id="t0" class="form-ip radius-right-none" value="{$point_x}">
                                <input type="text" name="t1" id="t1" class="form-ip after" value="{$point_y}">
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-left col-form-label">密钥：</label>
                        <div class="col-right">
                            <input type="text" name="t3" class="form-ip" maxlength="255" value="{$mapkey}" data-rule="密钥:required;">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-left col-form-label">地图高度：</label>
                        <div class="col-right">
                            <div class="input-group">
                                <input type="text" name="t4" class="form-ip radius-right-none" maxlength="4" value="{$height}" data-rule="高:required;int;">
                                <span class="after">px</span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-left col-form-label">简介：</label>
                        <div class="col-right">
                            <script id="t2" name="t2" type="text/plain" style="height:140px;">{$remark}</script>
                            <script>UE.getEditor('t2',{toolbars:editorSimple});</script>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-left col-form-label"></label>
                        <div class="col-right">
                            <button type="submit" class="btn btn-info mr-sm">保存</button>
                            <button type="button" class="btn mr-sm view">预览</button>
                            <button type="button" class="btn getcode">获取调用代码</button>
                        </div>
                    </div>
                </form>
                <!--loop-->
                </div>
            </div>
        </div>
        <!---->
    </div>
<script src="https://api.map.baidu.com/api?v=2.0&callback=initialize"></script>
<script>
function setValue(point)
{
	$("#t0").val(point.lng);$("#t1").val(point.lat);
}
var cityName="";
var mapinfo="";
var map="";
var localCity="";
var opts="{width:auto,height:auto}";
function initialize()
{
	map = new BMap.Map("container");
	localCity = new BMap.LocalCity();
	map.enableScrollWheelZoom(); 
	map.addControl(new BMap.NavigationControl());  
	map.addControl(new BMap.ScaleControl());  
	map.addControl(new BMap.OverviewMapControl()); 
	localCity.get(function(cityResult){
	  if (cityResult) {
	  	var level = cityResult.level;
	  	if (level < 13) level = 13;
	    map.centerAndZoom(cityResult.center, level);
	    //setValue(cityResult.center); 
	    map.addEventListener("click", function(e){
	    	setPoint(e.point);
	    	setValue(e.point);
			});
	    cityResultName = cityResult.name;
	    if (cityResultName.indexOf(cityName) >= 0) cityName = cityResult.name;
	    	var store_point = new BMap.Point({$point_x},{$point_y});
	    	setPoint(store_point);
	    	  }
	});
}
function getPoint(){
	var myGeo = new BMap.Geocoder();
	myGeo.getPoint(address, function(point){
	  if (point) {
	    setPoint(point);
	  }
	}, cityName);
}
function setPoint(point){
	  if (point) {
	    map.centerAndZoom(point,16);
	    map.clearOverlays();
	    var marker = new BMap.Marker(point);
	    marker.enableDragging(true);
	    var infoWindow = new BMap.InfoWindow(mapinfo, opts);  
			marker.addEventListener("click", function(){          
			   this.openInfoWindow(infoWindow);  
			});
	    marker.addEventListener("dragend", function(e){  
			 setValue(e.point);  
			});  
	    map.addOverlay(marker);
	  }
}
$(function()
{
	$(".view").click(function()
	{
		$.dialogbox(
		{
			'title':'预览地图',
			'text':"{U('index/index')}",
			'width':'800px',
			'height':'{$height}px',
			'type':3,
			'oktheme':'btn-info',
			'footer':false
		});
	});
	$(".getcode").click(function()
	{
		$.dialog(
		{
			'title':'获取调用代码',
			'text':'<p class="mb">请将下面代码复制到内容或模板中</p><textarea onFocus="this.select()" class="form-ip" id="mapcode"><iframe src="{U("index/index")}" frameborder="0" width="100%" height="{$height}" scrolling="no"></iframe></textarea><a href="javascript:;" class="btn btn-info mt ui-copy" data-target="mapcode">复制代码</a>',
			'width':'500px',
			'oktheme':'btn-info',
			'footer':false
		});
	});

    $(".ui-form").form(
	{
		type:2,
		result:function(form)
		{
			UE.getEditor('t2').sync();
			$("#t2").val(UE.getEditor('t2').getContent());
			$.ajax(
			{
                type:'post',
                cache:false,
                dataType:'json',
                url:'{THIS_LOCAL}',
                data:$(form).serialize(),
                error:function(e){alert(e.responseText);},
                success:function(d)
                {
                    if(d.state=='success')
                    {
                        sdcms.success(d.msg);
                        setTimeout(function(){location.href='{U("index")}';},1500);
                    }
                    else
                    {
                        sdcms.error(d.msg);
                    }
                }
            });
		}
	});
})
</script>
</body>
</html>