.elementor-31 .elementor-element.elementor-element-46a46cd3 > .elementor-container{max-width:1617px;min-height:558px;}.elementor-31 .elementor-element.elementor-element-46a46cd3{overflow:hidden;border-style:solid;border-width:3px 0px 0px 0px;border-color:#FFFFFF;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0% 4% 0% 4%;}.elementor-31 .elementor-element.elementor-element-46a46cd3 > .elementor-background-overlay{background-image:url("http://serein.net.cn/wp-content/uploads/2022/03/kristaps-ungurs-_2L37z5j68E-unsplash-scaled-e1646149291159.jpg");background-position:center center;opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-46a46cd3:hover > .elementor-background-overlay{background-color:#FFFFFF;background-image:url("http://serein.net.cn/wp-content/uploads/2022/03/kristaps-ungurs-_2L37z5j68E-unsplash-scaled-e1646149291159.jpg");opacity:0.5;}.elementor-31 .elementor-element.elementor-element-46a46cd3 > .elementor-shape-top svg{width:calc(100% + 1.3px);height:0px;}.elementor-31 .elementor-element.elementor-element-46a46cd3 > .elementor-shape-bottom svg{width:calc(100% + 1.3px);height:52px;}.elementor-bc-flex-widget .elementor-31 .elementor-element.elementor-element-3ac91904.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-31 .elementor-element.elementor-element-3ac91904.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-31 .elementor-element.elementor-element-3ac91904.elementor-column > .elementor-widget-wrap{justify-content:space-between;}.elementor-31 .elementor-element.elementor-element-3ac91904 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-bottom:0px;}.elementor-31 .elementor-element.elementor-element-66cf412{text-align:center;}.elementor-31 .elementor-element.elementor-element-66cf412 .widget-image-caption{color:#424242;font-size:24px;letter-spacing:10px;word-spacing:0px;margin-top:0px;}.elementor-31 .elementor-element.elementor-element-32f3205 .elementor-spacer-inner{height:42px;}.elementor-31 .elementor-element.elementor-element-18a238a > .elementor-container{max-width:1617px;min-height:516px;}.elementor-31 .elementor-element.elementor-element-18a238a > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:flex-start;align-items:flex-start;}.elementor-31 .elementor-element.elementor-element-18a238a{margin-top:0%;margin-bottom:4.7%;padding:0% 4% 0% 4%;}.elementor-31 .elementor-element.elementor-element-5c643122 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-bottom:0px;}.elementor-31 .elementor-element.elementor-element-5c643122 > .elementor-element-populated{padding:0% 0% 0% 12%;}.elementor-31 .elementor-element.elementor-element-14c5ccd .elementor-spacer-inner{height:99px;}.elementor-31 .elementor-element.elementor-element-75d85dff .elementor-heading-title{color:#000000;font-family:"Manrope", Sans-serif;font-size:22px;font-weight:normal;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:28px;letter-spacing:0px;}.elementor-31 .elementor-element.elementor-element-53abcf7e{color:#636363;font-family:"Manrope", Sans-serif;font-size:15px;font-weight:normal;text-transform:none;font-style:normal;text-decoration:none;line-height:26px;letter-spacing:0.5px;}.elementor-31 .elementor-element.elementor-element-53abcf7e > .elementor-widget-container{margin:16px 0px 52px 0px;}.elementor-31 .elementor-element.elementor-element-7baddcf3 .elementor-button{font-family:"Manrope", Sans-serif;font-size:16px;font-weight:500;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:28px;letter-spacing:0.5px;fill:#FFFFFF;color:#FFFFFF;background-color:#BD5930;border-style:solid;border-width:1px 1px 1px 1px;border-color:#BD5930;padding:16px 36px 16px 36px;}.elementor-31 .elementor-element.elementor-element-7baddcf3 .elementor-button:hover, .elementor-31 .elementor-element.elementor-element-7baddcf3 .elementor-button:focus{color:#FFFFFF;background-color:#BD5930;border-color:#BD5930;}.elementor-31 .elementor-element.elementor-element-7baddcf3 .elementor-button:hover svg, .elementor-31 .elementor-element.elementor-element-7baddcf3 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-31 .elementor-element.elementor-element-593672cc > .elementor-container{max-width:1617px;min-height:70px;}.elementor-31 .elementor-element.elementor-element-593672cc{border-style:solid;border-width:0px 0px 6px 0px;border-color:#BD5930;transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:0%;margin-bottom:0%;padding:0% 4% 0% 4%;}.elementor-31 .elementor-element.elementor-element-593672cc > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-2a4db509 > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-31 .elementor-element.elementor-element-2a4db509 > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-31 .elementor-element.elementor-element-3916c5a8 .elementor-heading-title{color:#121212;font-family:"Manrope", Sans-serif;font-size:12px;font-weight:300;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:1.1em;letter-spacing:0px;}.elementor-31 .elementor-element.elementor-element-6471cb08.elementor-column > .elementor-widget-wrap{justify-content:flex-end;}.elementor-31 .elementor-element.elementor-element-6471cb08 > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-bottom:0px;}.elementor-31 .elementor-element.elementor-element-43295b6{--animation-duration:1200ms;width:auto;max-width:auto;}.elementor-31 .elementor-element.elementor-element-43295b6 .elementor-headline{text-align:left;font-family:"Manrope", Sans-serif;font-size:16px;font-weight:100;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:20px;letter-spacing:0px;}.elementor-31 .elementor-element.elementor-element-43295b6 .elementor-headline-dynamic-wrapper path{stroke:#4054B200;stroke-width:0px;}.elementor-31 .elementor-element.elementor-element-43295b6 .elementor-headline-plain-text{color:#1E1E1E;}.elementor-31 .elementor-element.elementor-element-43295b6 .elementor-headline-dynamic-text{font-family:"Manrope", Sans-serif;font-weight:normal;text-transform:none;font-style:normal;text-decoration:none;line-height:20px;letter-spacing:0px;}.elementor-31 .elementor-element.elementor-element-43295b6 > .elementor-widget-container{margin:0px 36px -13px 0px;}.elementor-31 .elementor-element.elementor-element-65351fc5{--animation-duration:1200ms;width:auto;max-width:auto;}.elementor-31 .elementor-element.elementor-element-65351fc5 .elementor-headline{text-align:left;font-family:"Manrope", Sans-serif;font-size:16px;font-weight:100;text-transform:capitalize;font-style:normal;text-decoration:none;line-height:20px;letter-spacing:0px;}.elementor-31 .elementor-element.elementor-element-65351fc5 .elementor-headline-dynamic-wrapper path{stroke:#4054B200;stroke-width:0px;}.elementor-31 .elementor-element.elementor-element-65351fc5 .elementor-headline-plain-text{color:#1E1E1E;}.elementor-31 .elementor-element.elementor-element-65351fc5 .elementor-headline-dynamic-text{font-family:"Manrope", Sans-serif;font-weight:normal;text-transform:none;font-style:normal;text-decoration:none;line-height:20px;letter-spacing:0px;}.elementor-31 .elementor-element.elementor-element-65351fc5 > .elementor-widget-container{margin:0px 36px -13px 0px;}body.elementor-page-31:not(.elementor-motion-effects-element-type-background), body.elementor-page-31 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(min-width:768px){.elementor-31 .elementor-element.elementor-element-2a4db509{width:63.665%;}.elementor-31 .elementor-element.elementor-element-6471cb08{width:36.212%;}}@media(max-width:1024px){.elementor-31 .elementor-element.elementor-element-46a46cd3 > .elementor-container{min-height:454px;}.elementor-31 .elementor-element.elementor-element-18a238a > .elementor-container{min-height:420px;}.elementor-31 .elementor-element.elementor-element-18a238a{margin-top:0%;margin-bottom:10%;}.elementor-31 .elementor-element.elementor-element-53abcf7e{font-size:14px;line-height:1.7em;}.elementor-31 .elementor-element.elementor-element-53abcf7e > .elementor-widget-container{margin:4% 0% 12% 0%;}.elementor-31 .elementor-element.elementor-element-593672cc > .elementor-container{min-height:150px;}.elementor-31 .elementor-element.elementor-element-593672cc{padding:0% 4% 2% 4%;}.elementor-31 .elementor-element.elementor-element-3916c5a8{text-align:center;}.elementor-31 .elementor-element.elementor-element-6471cb08.elementor-column > .elementor-widget-wrap{justify-content:center;}.elementor-31 .elementor-element.elementor-element-43295b6 .elementor-headline{text-align:center;}.elementor-31 .elementor-element.elementor-element-43295b6 > .elementor-widget-container{margin:0% 0% 0% 0%;}.elementor-31 .elementor-element.elementor-element-43295b6{width:100%;max-width:100%;}.elementor-31 .elementor-element.elementor-element-65351fc5 .elementor-headline{text-align:center;}.elementor-31 .elementor-element.elementor-element-65351fc5 > .elementor-widget-container{margin:0% 0% 0% 0%;}.elementor-31 .elementor-element.elementor-element-65351fc5{width:100%;max-width:100%;}}@media(max-width:767px){.elementor-31 .elementor-element.elementor-element-46a46cd3{padding:0% 8% 0% 8%;}.elementor-31 .elementor-element.elementor-element-18a238a{margin-top:0%;margin-bottom:24%;padding:0% 8% 0% 8%;}.elementor-31 .elementor-element.elementor-element-5c643122 > .elementor-element-populated{padding:10% 0% 0% 0%;}.elementor-31 .elementor-element.elementor-element-75d85dff{text-align:center;}.elementor-31 .elementor-element.elementor-element-75d85dff .elementor-heading-title{font-size:18px;}.elementor-31 .elementor-element.elementor-element-53abcf7e{text-align:center;}.elementor-31 .elementor-element.elementor-element-7baddcf3 .elementor-button{font-size:14px;padding:14px 40px 14px 40px;}}@media(max-width:1024px) and (min-width:768px){.elementor-31 .elementor-element.elementor-element-5c643122{width:40%;}.elementor-31 .elementor-element.elementor-element-2a4db509{width:100%;}.elementor-31 .elementor-element.elementor-element-6471cb08{width:100%;}}/* Start custom CSS for section, class: .elementor-element-18a238a */<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>苹果荟</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <style type="text/css">
        html, body {
            height: 50%;
            margin: 50px;
        }
    </style>
    <!--css-->
    <link href="css/map.css" rel="stylesheet" type="text/css" />
    <!--javascript-->
    <script src="scripts/jquery-1.10.2.js" type="text/javascript"></script>
    <script src="scripts/map.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
    <link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
</head>
<body>
    <div class="demo_main">

        <fieldset class="demo_content">
            <div style="min-height: 550px; width: 50%;" id="map">
            </div>
            <script type="text/javascript">
                //Select '{ title: "'+SchoolFName+'", point: "'+coordinate+'", address: "'+SchoolAddress+'", tel: "'+case when charindex('-',SchoolTel)=0 then '028-' else '' end+SchoolTel+'" },' from B_Sys_School

                var markerArr = [
                    { title: "金苹果爱弥儿幼稚园(东区)", point: "104.112109,30.61326", address: "成都市锦江区新成仁路晨辉东路186号", tel: "028-86924115", hyperlink:herf="https://baidu.com"},
                    { title: "金苹果恋日家园幼稚园", point: "104.172191,30.631143", address: "成都市龙泉驿区洪河北路563号附20号", tel: "028-84631996", hyperlink: herf="https://bing.com" },
                    { title: "金苹果万科魅力之城幼稚园", point: "104.15613,30.631183", address: "成都市三环路东五段万科路2号（万科魅力之城）", tel: "028-84080237" },
                    { title: "金苹果蓝谷地幼稚园", point: "104.132294,30.609301", address: "成都市锦江区静宁路9号（蓝谷地小区内", tel: "028-84750868" },
                    { title: "金苹果晶蓝半岛幼稚园", point: "104.100933,30.647046", address: "成都市锦江区宏济新路458号（晶蓝半岛社区内", tel: "028-84595726" },
                    { title: "金苹果翡翠城幼稚园", point: "104.100799,30.618366", address: "成都市锦江区琉璃路666号（翡翠城四期对面）", tel: "028-84559730" }
                ];

                function map_init() {
                    var map = new BMap.Map("map"); // 创建Map实例
                    var point = new BMap.Point(104.09547, 30.676312); //地图中心点，成都
                    map.centerAndZoom(point, 12); // 初始化地图,设置中心点坐标和地图级别。
                    map.enableScrollWheelZoom(true); //启用滚轮放大缩小
                    //地图、卫星、混合模式切换
                    map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_HYBRID_MAP] }));
                    //向地图中添加缩放控件
                    var ctrlNav = new window.BMap.NavigationControl({
                        anchor: BMAP_ANCHOR_TOP_LEFT,
                        type: BMAP_NAVIGATION_CONTROL_LARGE
                    });
                    map.addControl(ctrlNav);
                    //向地图中添加缩略图控件
                    var ctrlOve = new window.BMap.OverviewMapControl({
                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
                        isOpen: 1
                    });
                    map.addControl(ctrlOve);
                    //向地图中添加比例尺控件
                    var ctrlSca = new window.BMap.ScaleControl({
                        anchor: BMAP_ANCHOR_BOTTOM_LEFT
                    });
                    map.addControl(ctrlSca);

                    var point = new Array(); //存放标注点经纬信息的数组
                    var marker = new Array(); //存放标注点对象的数组
                    var info = new Array(); //存放提示信息窗口对象的数组
                    var searchInfoWindow = new Array();//存放检索信息窗口对象的数组
                    for (var i = 0; i < markerArr.length; i++) {
                        var p0 = markerArr[i].point.split(",")[0]; //
                        var p1 = markerArr[i].point.split(",")[1]; //按照原数组的point格式将地图点坐标的经纬度分别提出来
                        point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点
                        marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记
                        map.addOverlay(marker[i]);
                        marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
                        //显示marker的title，marker多的话可以注释掉
                        var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(20, -10) });
                        marker[i].setLabel(label);
                        // 创建信息窗口对象
                        info[i] = "<p style='font-size:12px;lineheight:1.8em;'>地址：" + markerArr[i].address + "</br><a href=\"http://www.tpy10.net/yjbh.php?tel=" + markerArr[i].tel.replace("-","")+ "\"> 电话：" + markerArr[i].tel + "</a></br></p>";
                        //创建百度样式检索信息窗口对象
                        searchInfoWindow[i] = new BMapLib.SearchInfoWindow(map, info[i], {
                            title: "<a href= "+markerArr[i].hyperlink+"  atarget=\"_blank\">" + markerArr[i].title + "</a>",
                            width: 290,             //宽度
                            height: 55,              //高度
                            panel: "panel",         //检索结果面板
                            enableAutoPan: true,     //自动平移
                            searchTypes: [
                                BMAPLIB_TAB_TO_HERE,  //到这里去
                                BMAPLIB_TAB_FROM_HERE, //从这里出发
                                BMAPLIB_TAB_SEARCH   //周边检索
                     
                            ]
                        });
                        //添加点击事件
                        marker[i].addEventListener("click",
                            (function (k) {
                                // js 闭包
                                return function () {
                                    //将被点击marker置为中心
                                    //map.centerAndZoom(point[k], 18);
                                    //在marker上打开检索信息窗口
                                    searchInfoWindow[k].open(marker[k]);
                                }
                            })(i)
                        );
                    }
                }
                //异步调用百度js
                function map_load() {
                    var load = document.createElement("script");
                    load.src = "http://api.map.baidu.com/api?v=2.0&ak=IDvNBsejl9oqMbPF316iKsXR&callback=map_init";
                    document.body.appendChild(load);
                }
                window.onload = map_load;
            </script>
        </fieldset>
    </div>
</body>
</html>/* End custom CSS */