<template>
  <div>
    <div class="fbwh banner_img">
        <img src="@/assets/images/bg3.png" alt="">
    </div>

    <div class="container about">
        <div class="row">
            <div class="col-md-7">
                <ul>
                    <li class="about_title">
                        <h4 style="text-align: left">广东总部: 广东北斗天云科技有限公司</h4>
                        <p>GUANGDONG BEIDOU TIANYUN SCIENCE AND TECHNOLOGY CO., LTD.</p>
                    </li>
                    <li class="about_p">
                        <p>电话：4008-352358</p>
                    </li>
                    <li>
                        <strong>中国 · 广东</strong>
                        <p>佛山市南海区桂城街道夏南路61号创越时代文化创意园3座10楼1001室</p>
                    </li>
                    <li class="about_p">
                        <p>电子邮箱：info@cnbdty.com</p>
                    </li>
                </ul>
            </div>
            <div href="" class="col-md-5">
                <div id="dituContent"></div>
            </div>
        </div>
    </div>

    <div class="about_form">
        <div class="container">
            <form action="">
                <h2>在线留言</h2>
                <div class="hrs"></div>
                <ul>
                    <li class="row">
                        <div class="col-md-6 uname">
                            <span>您的姓名 : <b></b> </span>
                            <input type="text">
                        </div>
                        <div class="col-md-6 phone">
                            <span>您的手机号 : <b></b> </span>
                            <input type="text">
                        </div>
                    </li>
                    <li class="uemil">
                        <span>您的邮箱 : <b></b> </span>
                        <input type="text">
                    </li>
                    <li>
                        <span>您的建议 :</span>
                        <textarea style="resize:none" rows="7" cols="30"></textarea>
                    </li>
                    <li>
                        <p><input class="about_form_submit" type="submit" value="提交留言"></p>
                    </li>
                </ul>
            </form>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },

  mounted() {
    this.initMap()
  },

  methods: {
    initMap() {
      const map = new BMapGL.Map("dituContent");//在百度地图容器中创建一个地图
      const point = new BMapGL.Point(113.18336 , 23.04270);//定义一个中心点坐标
      map.centerAndZoom(point, 17);//设定地图的中心点和坐标并将地图显示在地图容器中
      const marker = new BMapGL.Marker(point);        // 创建标注   
      map.addOverlay(marker); 
      marker.addEventListener("click", function(){          
          map.openInfoWindow(infoWindow, point); //开启信息窗口
      }); 

      // window.map = map;//将map变量存储在全局
      map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
      map.enableScrollWheelZoom();//启用地图滚轮放大缩小
      map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
      map.enableKeyboard();//启用键盘上下左右键移动地图

      // const ctrl_nav = new BMapGL.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
      // map.addControl(ctrl_nav);
      //向地图中添加缩略图控件
      const zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
      map.addControl(zoomCtrl);
      //向地图中添加比例尺控件
      const ctrl_sca = new BMapGL.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
      map.addControl(ctrl_sca);   

      const opts = {
          width: 250,     // 信息窗口宽度
          height: 100,  
          offset: {
              width: 0,
              height: -20,
          },  // 信息窗口高度
          title: "广东北斗天云科技有限公司"
      }
      const message = '<span style="font-size:12px;">地址：广东省佛山市南海区桂城街道夏南路61号创越时代文化创意园3号楼10层1001室</span>'
      const infoWindow = new BMapGL.InfoWindow(message, opts);  // 创建信息窗口对象
      map.openInfoWindow(infoWindow, point); 
    }
  }
}
</script>

<style scoped>
.iw_poi_title {
  color: #CC5522;
  font-size: 14px;
  font-weight: bold;
  overflow: hidden;
  padding-right: 13px;
  white-space: nowrap
}

.iw_poi_content {
  font: 12px arial, sans-serif;
  overflow: visible;
  padding-top: 4px;
  white-space: -moz-pre-wrap;
  word-wrap: break-word
}

.about li {
  padding-left: 10px;
}
</style>
