地图显示机构列表

直接使用代码

图片素材

css代码

<style>

/* 顶部标题面板 */
.com-panel .panel-top{background:#5cc2b7;height:60px;letter-spacing:6px;line-height:60px;font-size:22px;border-top-left-radius: 6px; border-top-right-radius: 6px;padding-left:20px;color:#fff;}
.com-panel .panel-body{padding:20px;background:#efefef;border-bottom-left-radius: 6px; border-bottom-right-radius: 6px;}
.com-panel .panel-body .col-md-4 select{width:200px;height:30px;border-radius: 2px;margin-left:10px;}
.com-panel .panel-body .col-md-3 select,.com-panel .panel-body .col-md-3 input{width:140px;height:30px;border-radius: 2px;margin-left:10px;outline-style:none;border:1px solid #ccc;padding-left:10px;}

/* 公共上部大栏目标题 */
.com-top-arctype {padding:30px ;text-align:center;color:#6ac3ba}
.com-top-arctype h1{font-size:50px;font-weight:500;font-family: Arial, Helvetica, sans-serif}
.com-top-arctype h4{font-size:20px;font-weight:bold;background:url(/img/2021/0415-3/bg_arctype.png) no-repeat center top;height:60px; }

/* 机构列表 */
.org-item{border:1px solid #ccc;border-radius:6px;padding:10px;margin:10px 0;box-shadow:0 0 5px #eee;}
.org-item:hover{box-shadow:0 0 5px #1fad9d;}
.org-item a h3{margin-bottom:20px;;padding-top:5px;margin-top:0}
.org-item:hover a h3{color:#1fad9d}
.org-item p .juli{display:inline-block;padding:3px 10px;background:#ffffe4;color:#ff9820;border:1px solid #ffe199;border-radius:6px;margin:0 10px;}

.btn-chart-go{background:#6ac3ba;display:inline-block;padding:10px 50px;color:#fff;font-size:18px;height:70px;border-radius:40px}
.btn-chart-go:hover {
    background: #3d968d;color:#fff
}
</style>

HTML+JS代码

  
<script type="text/javascript">

  var markerArr = [
    {
      title: "心心琴行",
      point: "113.667222,34.774274",
      address: "郑州市金水区劳卫路优胜北路向南路东天下城西门",
      tel: ""

    }, {
      title: "小明星艺术团-优胜北路",
      point: "113.667629,34.775352",
      address: "郑州市金水区优胜北路黄河南街向北路东商铺三楼",
      tel: ""

    }, {
      title: "江岩钢琴课",
      point: "113.667914,34.774216",
      address: "郑州市金水区健康路优胜北路向西路南天下城11号楼1层",
      tel: ""

    }, {
      title: "艺画美术",
      point: "113.668177,34.775196",
      address: "郑州市金水区健康路优胜北路向西路东 ",
      tel: "17760769836"

    }, {
      title: "阳光书画班",
      point: "113.664645,34.774545",
      address: "郑州市金水区东三街优胜北路向南路西疾病预防控制中心家属院",
      tel: ""

    }, {
      title: "龙润艺禾音乐培训中心",
      point: "113.66617,34.773166",
      address: "郑州市金水区优胜南路防疫路向东路北1-4号院",
      tel: ""

    }, {
      title: "多点乐器DC打击乐俱乐部-优胜南路",
      point: "113.666148,34.773041",
      address: "郑州市金水区优胜南路防疫路向南路南优胜南路防疫路向南",
      tel: "65338095"

    }, {
      title: "鸿蒙教育四维绘画-优胜路",
      point: "113.665648,34.772858",
      address: "郑州市金水区优胜南路防疫路向南路西石桥街5号院西拐角一楼",
      tel: "86612688"

    }, {
      title: "华乐绿城琴行",
      point: "113.666053,34.772509",
      address: "郑州市金水区优胜南路防疫路向南路西商务厅一幼对面",
      tel: ""

    }, {
      title: "乐阳音乐艺术中心",
      point: "113.669406,34.774277",
      address: "郑州市金水区优胜南路健康路向西路南天下城2号楼3单元1楼",
      tel: "63619361"

    }, {
      title: "艺美舞蹈",
      point: "113.667832,34.777385",
      address: "郑州市金水区同乐路黄河南街向南路东兔师傅汽车保养楼上",
      tel: ""

    }, {
      title: "彩虹口袋创想绘画",
      point: "113.667832,34.777385",
      address: "郑州市金水区同乐路黄河南街向南路东兔师傅汽车保养楼上",
      tel: ""

    }

  ];

  function map_init() {
    var log = "113.666537";
    var lat = "34.774813";
    var map = new BMap.Map("map"); // 创建Map实例
    var point = new BMap.Point(log, lat); //地图中心点，郑州市
    map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别。
    map.enableScrollWheelZoom(true); //启用滚轮放大缩小


    //创建圆对象
    var circle = new BMap.Circle(point, 1000, {
      strokeColor: "blue",
      strokeWeight: 1,
      fillColor: "#f00",
      fillOpacity: 0.2
    });
    //画到地图上面
    map.addOverlay(circle);



    //向地图中添加缩放控件
    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 longitude = "113.666537"
    var latitude = "34.774813"
    var point = new BMap.Point(longitude, latitude);
    map.centerAndZoom(point, 16); // 中心点
    var myIcon = new BMap.Icon("http://www.bootfastui.cn/img/2021/0415-3/map_school.png", new BMap.Size(23, 25), {
      offset: new BMap.Size(10, 25), // 指定定位位置  
      //imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移  
    });

    marker6 = new window.BMap.Marker(point, { icon: myIcon }); //按照地图点坐标生成标记
    map.addOverlay(marker6);

    info6 = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>郑州市金水区优胜路小学</br>地址： +</br> 电话：63947110 </br></p>"); // 创建信息窗口对象
    marker6.addEventListener("click", function () {
      this.openInfoWindow(info6);
    })




    var point = new Array(); //存放标注点经纬信息的数组
    var marker = new Array(); //存放标注点对象的数组
    var info = new Array(); //存放提示信息窗口对象的数组
    for (var i = 0; i < markerArr.length; i++) {
      //自定义地图标记
      //http://xiaoxi521.cnhttp://www.bootfastui.cn/img/2021/0415-3/map.png
      // var myIcon = new BMap.Icon("http://www.bootfastui.cn/img/2021/0415-3/map.png", new BMap.Size(23, 25), {
      //     offset: new BMap.Size(10, 25), // 指定定位位置  
      //     //imageOffset: new BMap.Size(0, 0 - 10 * 25) // 设置图片偏移  
      // });

      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); //跳动的动画
      //
      // var label = new window.BMap.Label( markerArr[i].title, { offset: new window.BMap.Size(20, -10) } );
      // marker[i].setLabel(label);
      info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + markerArr[i].title + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></p>"); // 创建信息窗口对象



    }
    for (var a = 0; a < markerArr.length; a++) {
      (function (x) {
        marker[a].addEventListener("click", function () {
          this.openInfoWindow(info[x]);

        })
      })(a);

    }


  }

  //创建一个Icon
  function createIcon(json) {
    var icon = new BMap.Icon("http://www.bootfastui.cn/img/2021/0415-3/map.png", new BMap.Size(json.w, json.h), { imageOffset: new BMap.Size(-json.l, -json.t), infoWindowOffset: new BMap.Size(json.lb + 5, 1), offset: new BMap.Size(json.x, json.h) })
    return icon;
  }

  //异步调用百度js
  function map_load() {
    var load = document.createElement("script");
    load.src = "http://api.map.baidu.com/api?v=1.4&callback=map_init";
    document.body.appendChild(load);
  }

  window.onload = function () {
    map_load();
  }

</script>

<div class="container">

  <!-- 顶部标题面板 -->
  <div class="com-panel mar-top20">
    <div class="panel-top text-center">
      郑州市金水区优胜路小学半径1公里机构教学质量排名
    </div>
    <form method="get" enctype="multipart/form-data" action="/index.php/Home/Index/org_school_search">
      <div class="panel-body">
        <script type="text/javascript" src="/Public/js/PCASClass.js"></script>
        <select name="province" style="display:none"></select>

        <div class="col-md-3">
          城市： <select name="city"></select>
        </div>
        <div class="col-md-3" style="display:none">
          县区 <select name="district" disabled></select>
        </div>
        <div class="col-md-3">
          学校类型
          <select name="school_type">

            <option value="幼儿园">幼儿园</option>
            <option value="小学" selected>小学</option>
            <option value="初中">初中</option>
            <option value="高中">高中</option>

          </select>

        </div>

        <div class="col-md-5">
          小学名称： <input type="text" name="title" autocomplete="off" placeholder="输入小学名称即可查询周边机构"
            style="width:300px;padding-left:10px" />
          <a class="btn btn-info btn-xs fright tijiao " style="margin-right:-10px;"><span
              class="glyphicon glyphicon-search f20 line25"></span></a>
        </div>





        <script language="javascript" defer>
          new PCAS("province", "city", "district", "河南省", "郑州市", "市辖区");
        </script>
        <hr class="green" />
      </div>
    </form>
  </div>
  <script>
    $(function () {
      $('.tijiao').click(function () {
        $('form').submit();
      })
    })
  </script>
  <!-- 百度地图承载 -->
  <div style="width:100%;height:500px;margin-top:20px" id="map"> </div>


</div>
<!-- 机构列表 -->
<div style='width:1170px;margin:20px auto;'>


  <div class="text-center mar50">
    <a href="http://www.bootfastui.cn" class="btn-chart-go">
      河南省校外少儿艺术培训机构培养（教学）水平与整体测试标准<br />单击了解详情
    </a>
  </div>

  <div class="com-top-arctype">
    <h4>机构排名</h4>
  </div>

  <div class="row ">
    <div class=" col-md-6 ">
      <div class="org-item">
        <div class="col-md-4 pad-left0">
          <a href="http://www.bootfastui.cn">
            <img src="/Public/images/img32.jpg" width="100%" height="120" />
          </a>
        </div>
        <div class="col-md-8 pm">
          <a href="http://www.bootfastui.cn">
            <h3 class="sheng">小明星艺术团-优胜北路</h3>
          </a>

          <p class="sheng">地址：郑州市金水区优胜北路黄河南街向北路东商铺三楼 </p>
          <p>电话：13083666652</p>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class=" col-md-6 ">
      <div class="org-item">
        <div class="col-md-4 pad-left0">
          <a href="http://www.bootfastui.cn">
            <img src="/Public/images/img32.jpg" width="100%" height="120" />
          </a>
        </div>
        <div class="col-md-8 pm">
          <a href="http://www.bootfastui.cn">
            <h3 class="sheng">汉堂书画</h3>
          </a>

          <p class="sheng">地址：郑州市金水区卫生路岗杜北街向北路东绿城都市花园4-11-120 </p>
          <p>电话：13083666652</p>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class=" col-md-6 ">
      <div class="org-item">
        <div class="col-md-4 pad-left0">
          <a href="http://www.bootfastui.cn">
            <img src="/Public/images/img32.jpg" width="100%" height="120" />
        </div>
        <div class="col-md-8 pm">
          <a href="http://www.bootfastui.cn">
            <h3 class="sheng">伯爵音乐教育</h3>
          </a>

          <p class="sheng">地址：郑州市金水区文化路纬一路向西路北国奥商务25层 </p>
          <p>电话：13083666652</p>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class=" col-md-6 ">
      <div class="org-item">
        <div class="col-md-4 pad-left0">
          <a href="http://www.bootfastui.cn">
            <img src="/Public/images/img32.jpg" width="100%" height="120" />
          </a>
        </div>
        <div class="col-md-8 pm">
          <a href="http://www.bootfastui.cn">
            <h3 class="sheng">大嘴巴语言艺术部落黄河路</h3>
          </a>

          <p class="sheng">地址：郑州市金水区黄河路卫生路向西路南黄河路82-7号 </p>
          <p>电话：55698619

          </p>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class=" col-md-6 ">
      <div class="org-item">
        <div class="col-md-4 pad-left0">
          <a href="http://www.bootfastui.cn">
            <img src="/Public/images/img32.jpg" width="100%" height="120" />
        </div>
        <div class="col-md-8 pm">
          <a href="http://www.bootfastui.cn">
            <h3 class="sheng"> 郑州金水生涯艺术培训中心</h3>
          </a>

          <p class="sheng">地址：郑州市金水区黄河路东三街向西路南黄河路第二小学门东侧 </p>
          <p>电话：13083666652</p>
        </div>
        <div class="clear"></div>
      </div>
    </div>

    <div class=" col-md-6 ">
      <div class="org-item">
        <div class="col-md-4 pad-left0">
          <a href="http://www.bootfastui.cn">
            <img src="/Public/images/img32.jpg" width="100%" height="120" />
        </div>
        <div class="col-md-8 pm">
          <a href="http://www.bootfastui.cn">
            <h3 class="sheng"> 郑州金水生涯艺术培训中心</h3>
          </a>

          <p class="sheng">地址：郑州市金水区黄河路东三街向西路南黄河路第二小学门东侧 </p>
          <p>电话：13083666652</p>
        </div>
        <div class="clear"></div>
      </div>
    </div>

  </div>






</div>