<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<html>
<head>
    <meta name="decorator" content="base"/>
    <meta name="viewport" content="width=device-width,initial-scale=0.3,user-scalable=yes"/>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>业主定位</title>
    <style>
        #container {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body" id="container" style="height: 600px;">

        </div>
        <div class="info">
            <div class="input-item">
                <div class="input-item-prepend">
                    <span class="input-item-text" style="width:8rem;">请输入关键字</span>
                </div>
                <input id='tipinput' type="text">
            </div>
        </div>
        <div id="panel"></div>
    </div>
</div>
<script src="${ctxPlugin}/lib/layuiAdmin/dist/layuiadmin/layui/layui.js"></script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: "727b25e7366ab5015225754e8ee00fef",
    }
</script>
<script type="text/javascript">
    var map;
    layui.config({
        base: '${ctxPlugin}/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['form', 'jquery'], function () {
        AMapLoader.load({
            key: "727b25e7366ab5015225754e8ee00fef",       // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",                 // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        }).then((AMap)=>{

            map = new AMap.Map('container', {
                viewMode: '2D',  // 默认使用 2D 模式
                zoom:11,  //初始化地图层级
                center: [116.397428, 39.90923]  //初始化地图中心点
            });

            AMap.plugin(['AMap.ToolBar','AMap.Scale', 'AMap.PlaceSearch', 'AMap.AutoComplete'],function(){
                const placeSearch = new AMap.PlaceSearch({
                    pageSize: 5, // 单页显示结果条数
                    pageIndex: 1, // 页码
                    city: "010", // 兴趣点城市
                    citylimit: true,  //是否强制限制在设置的城市内搜索
                    map: map, // 展现结果的地图实例
                    panel: "panel", // 结果列表将在此容器中进行展示。
                    autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                });

                //输入提示
                var auto = new AMap.AutoComplete({
                    input: "tipinput"
                });

            });//异步同时加载多个插件


        }).catch((e)=>{
            console.error(e);  //加载错误提示
        });
    });
</script>
</body>
