master

分支 (1)

管理

管理

master

guitar-web
/
concat.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>联系我们</title>
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="./css/animate.min.css">
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/public.css">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=67jMQ5DmYTe1TLMBKFUTcZAR"></script>
    <script src="./js/jquery-3.2.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script src="./js/wow.min.js"></script>
    <script src="./js/public.js"></script>
</head>

<body>
    <div class="wrapper">
        <!-- 头部 -->
        <header id="header"></header>
        <script>
            $('#header').load('./header.html');
        </script>

        <!-- 蒙层 -->
        <div class="screen-mask"></div>

        <!-- 小屏幕顶部滑动导航栏 -->
        <div id="slider"></div>
        <script>
            $('#slider').load('./sliding-drawer.html');
        </script>

        <!-- 中间内容 -->
        <div class="container container-center">
            <div id="allmap"></div>
        </div>

        <div class="container">
            <section class="concat row">
                <!-- 区域经理列表 -->
                <div class="col-sm-12 col-md-6">
                    <ul class="manager-list">
                        <li class="manager-item wow fadeIn" data-wow-duration="1.5">
                            <div class="manager-item-title">副总：黄总经理</div>
                            <p class="manager-item-content">联系电话：13580513825</p>
                            <p class="manager-item-content">座机：020-36030600 QQ：276041908</p>
                            <p class="manager-item-content">区域：四川，安徽，重庆，陕西，贵州，河南，广东(港澳)，江苏</p>
                        </li>
                        <li class="manager-item wow fadeIn" data-wow-duration="1.5">
                            <div class="manager-item-title">区域经理：王雁峰</div>
                            <p class="manager-item-content">联系电话：13710245985</p>
                            <p class="manager-item-content">座机：020-36030600 QQ：1400954573</p>
                            <p class="manager-item-content">区域：湖南，辽宁，浙江，云南，吉林，新疆，甘肃，宁夏</p>
                        </li>
                        <li class="manager-item wow fadeIn" data-wow-duration="1.5">
                            <div class="manager-item-title">区域经理：范东杰</div>
                            <p class="manager-item-content">联系电话：13710246579</p>
                            <p class="manager-item-content">座机：020-36030600 QQ：2490176253</p>
                            <p class="manager-item-content">区域：福建，山东，北京，天津，山西，河北，内蒙，青海</p>
                        </li>
                        <li class="manager-item wow fadeIn" data-wow-duration="1.5">
                            <div class="manager-item-title">区域经理：邓高洪</div>
                            <p class="manager-item-content">联系电话：13632290013</p>
                            <p class="manager-item-content">座机：020-36030600 QQ：1508179634</p>
                            <p class="manager-item-content">区域：湖北，海南，江西，西藏，上海，广西，黑龙江</p>
                        </li>
                    </ul>
                </div>
                <!-- 留言表单 -->
                <div class="form col-sm-12 col-md-6 text-right">
                    <form class="online-form col-sm-12 col-md-8" action="javascript:void(0)" method="POST">
                        <div class="form-title text-center">在线留言</div>
                        <input type="text" placeholder="姓名" />
                        <input type="text" placeholder="邮箱" />
                        <input type="text" placeholder="电话" />
                        <textarea name="" id="" cols="30" rows="10" placeholder="意见"></textarea>
                        <button>提交</button>
                    </form>
                </div>
            </section>
        </div>

        <!-- 底部 -->
        <footer id="footer"></footer>
        <script>
            $('#footer').load('./footer.html');
        </script>

    </div>
</body>

</html>
<script>
    /**
     * 联系我们地图
     */
    $(document).ready(function () {
        ShowMap('116.35857,40.007697', '清华琴行', '媒体/出版/影视/文化/艺术', '南山区公园路53', '20');
    })

    function ShowMap(zuobiao, name, type, address, zoom) {
        var arrzuobiao = zuobiao.split(',');
        var map = new BMap.Map("allmap");
        map.centerAndZoom(new BMap.Point(arrzuobiao[0], arrzuobiao[1]), zoom);
        map.addControl(new BMap.NavigationControl());

        // 创建标注对象并添加到地图
        var marker = new BMap.Marker(new BMap.Point(arrzuobiao[0], arrzuobiao[1]));
        map.addOverlay(marker);

        //设置内容
        var infoWindow = new BMap.InfoWindow(
            `<div class='map-info-title'>` + name +
            `</div><div class='map-info-content'>公司类别：` + type +
            `</div><div class='map-info-content'>公司地址：` + address +
            `</div>`
        );
        marker.addEventListener("click", function () {
            this.openInfoWindow(infoWindow);
        });
        marker.openInfoWindow(infoWindow);
    }
</script>