学校地址

直接使用代码

图片素材

css代码

 <style>

.org-index-map{border:1px solid #666;height:450px;overflow: hidden;}
#map{width:60%;height:400px;float:left;}
.org-index-map .map-list{width:36%;float:left;border-left:1px solid #666;height:450px;}
.org-index-map .map-list .item-map{padding:10px;border-bottom:1px solid #666;padding-bottom:0}
.item-map h4{color:#237b7c;font-size:20px;margin-top:0;padding-top:0}
.item-map h4 span{display:inline-block;width:30px;height:30px;border-radius: 50%;color:#237b7c;border:1px solid #237b7c;text-align:center;line-height: 30px;font-weight:bold;margin-right:10px;}
.item-map .tel{border-top:1px solid #eee;padding-top:10px;color:#237b7c;}
.item-map .tel img{vertical-align:middle}

</style>

HTML+JS代码

 

<div class="container">


  <!-- 学校地址 -->
  <img src="http://www.bootfastui.cn/img/2021/0423-3/title6.jpg" class="center-block  org-index-title" />
  <!-- 百度地图承载 -->
  <div class="org-index-map">
    <div id="map" style="margin:2%;"> </div>
    <div class="map-list">
      <div class="item-map">
        <h4><span>1</span>一枝独秀</h4>
        <p>地址：河南省郑州市管城回族区商城路233号</p>
        <p class="tel"><img src="http://www.bootfastui.cn/img/2021/0423-3/tel.jpg" />电话：123456</p>
      </div>
      <div class="item-map">
        <h4><span>2</span>形影不离</h4>
        <p>地址：河南省郑州市金水区东风路5号</p>
        <p class="tel"><img src="http://www.bootfastui.cn/img/2021/0423-3/tel.jpg" />电话：123456</p>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</div>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=A8773a52f6d9bc0ecaea7f15acdd13e0"></script>


<script type="text/javascript">

  var markerArr = [
    {
      title: "一枝独秀",
      point: "113.679197,34.761137",
      address: "河南省郑州市管城回族区商城路233号",
      tel: "123456"

    }, {
      title: "形影不离",
      point: "113.661231,34.803",
      address: "河南省郑州市金水区东风路5号",
      tel: "123456"

    },

  ];

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



    //向地图中添加缩放控件
    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(); //存放提示信息窗口对象的数组
    for (var i = 0; i < markerArr.length; i++) {
      //自定义地图标记
      //http://xiaoxi521.cn/Public/images/home/map.png
      // var myIcon = new BMap.Icon("/Public/images/home/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("/Public/images/home/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>

1一枝独秀

2形影不离

直接使用代码

图片素材

css代码

HTML+JS代码