百度地图点标记以及点击弹出对应信息窗口自定义样式--infoBox

百度地图提供的信息窗口风格与项目不符，UI设计出来的太高端。

效果图如下：

 

var points=[
  {"lng":111.188261,"lat":34.791984,"count":50,'type':2,'name':'巴奴毛肚','address':'郑州市金水区正弘城'},
  {"lng":111.223332,"lat":34.796532,"count":51,'type':2,'name':'海底捞','address':'郑州市管城回族区商城东路150号'},
  {"lng":111.219787,"lat":34.830658,"count":15,'type':2,'name':'小龙坎','address':'郑州市高新区公园茂'},
  {"lng":111.218455,"lat":34.780921,"count":40,'type':1,'name':'曼玉','address':'郑州市中原区万达广场'},
  {"lng":111.218843,"lat":34.715516,"count":100,'type':1,'name':'花千代烤鱼','address':'郑州市中原区锦艺城'},
  {"lng":111.22546,"lat":34.718503,"count":6,'type':2,'name':'醉巴鲜烤鱼','address':'郑州市二七区大上海城'},
  {"lng":111.223289,"lat":34.789989,"count":18,'type':3,'name':'水浒烤肉','address':'郑州市二七区大卫城'},
  {"lng":111.188162,"lat":34.785051,"count":80,'type':2,'name':'梁山烤肉','address':'郑州市郑东新区'},
  {"lng":111.222039,"lat":34.78782,"count":11,'type':3,'name':'留白西餐厅','address':'郑州市郑东新区CBD会展中心'},
  {"lng":111.21387,"lat":34.787253,"count":7,'type':1,'name':'豪客来','address':'郑州市金水区国贸360'},
  {"lng":111.21773,"lat":34.789426,"count":42,'type':3,'name':'津美厨子','address':'郑州市金水区新玛特'},
  {"lng":111.221107,"lat":34.786445,"count":4,'type':2,'name':'云尚鲜厨','address':'郑州市金水区建业凯旋广场'},
  {"lng":111.197521,"lat":34.797943,"count":27,'type':2,'name':'慕味康','address':'郑州市金水区正弘城'},
  {"lng":111.219812,"lat":34.770836,"count":23,'type':1,'name':'御膳堂','address':'郑州市二七区大上海城'},
  {"lng":111.220682,"lat":34.77463,"count":60,'type':1,'name':'一枝独秀','address':'郑州市郑东新区CBD会展中心'},
  {"lng":111.185424,"lat":34.784675,"count":8,'type':1,'name':'佳肴道府','address':'郑州市金水区建业凯旋广场'},
  {"lng":111.199242,"lat":34.784509,"count":15,'type':2,'name':'佰兰小味','address':'郑州市二七区大上海城'},
  {"lng":111.222766,"lat":34.781408,"count":25,'type':2,'name':'湘阁里辣','address':'郑州市郑东新区CBD会展中心'},
  {"lng":111.221674,"lat":34.924396,"count":21,'type':3,'name':'巴奴毛肚','address':'郑州市二七区大上海城'},
  {"lng":111.227268,"lat":34.92267,"count":1,'type':3,'name':'巴奴毛肚','address':'郑州市郑东新区CBD会展中心'},
  {"lng":111.217721,"lat":34.920034,"count":51,'type':2,'name':'锦湘楼','address':'郑州市郑东新区'},
  {"lng":111.212456,"lat":34.92667,"count":7,'type':2,'name':'湘野食府','address':'郑州市金水区建业凯旋广场'},
  {"lng":111.180432,"lat":34.919114,"count":11,'type':2,'name':'沁湘苑','address':'郑州市郑东新区CBD会展中心'},
  {"lng":111.185013,"lat":34.721611,"count":35,'type':2,'name':'巴奴毛肚','address':'郑州市金水区正弘城'},
  {"lng":111.188733,"lat":34.731037,"count":22,'type':3,'name':'香味客','address':'郑州市高新区公园茂'},
  {"lng":111.219336,"lat":34.931134,"count":4,'type':2,'name':'天香耳片餐厅','address':'郑州市金水区正弘城'},
  {"lng":111.213557,"lat":34.923254,"count":5,'type':3,'name':'佰兰小味','address':'郑州市金水区正弘城'},
  {"lng":111.218367,"lat":34.92943,"count":3,'type':1,'name':'江南一蘸','address':'郑州市金水区正弘城'},
  {"lng":111.224312,"lat":34.919621,"count":100,'type':1,'name':'巴奴毛肚','address':'郑州市金水区正弘城'},
  {"lng":111.223874,"lat":34.919447,"count":87,'type':3,'name':'蜀都旋转','address':'郑州市金水区正弘城'},
  {"lng":111.224225,"lat":34.923091,"count":32,'type':3,'name':'玉林高记','address':'郑州市金水区建业凯旋广场'},
  {"lng":111.217801,"lat":34.921854,"count":44,'type':1,'name':'湘菜馆','address':'郑州市金水区建业凯旋广场'},
  {"lng":111.157129,"lat":34.928227,"count":21,'type':2,'name':'味霸王','address':'郑州市金水区正弘城'},
  {"lng":111.156426,"lat":34.922286,"count":80,'type':2,'name':'少城春秋','address':'郑州市金水区正弘城'},
  {"lng":111.161597,"lat":34.91948,"count":32,'type':1,'name':'巴奴毛肚','address':'郑州市金水区建业凯旋广场'},
  {"lng":111.173895,"lat":34.920787,"count":26,'type':3,'name':'巴奴毛肚','address':'郑州市高新区公园茂'},
  {"lng":111.183563,"lat":34.921197,"count":17,'type':1,'name':'巴奴毛肚','address':'郑州市管城回族区商城东路150号'},
  {"lng":111.217982,"lat":34.922547,"count":17,'type':3,'name':'巴蜀家宴','address':'郑州市金水区建业凯旋广场'},
  {"lng":111.226126,"lat":34.781938,"count":25,'type':2,'name':'唐人街','address':'郑州市高新区公园茂'},
  {"lng":111.22326,"lat":34.805782,"count":100,'type':2,'name':'佳肴道府','address':'郑州市金水区建业凯旋广场'},
  {"lng":111.219239,"lat":34.806759,"count":34,'type':1,'name':'盼中餐','address':'郑州市高新区公园茂'},
  {"lng":111.217185,"lat":34.809123,"count":11,'type':2,'name':'沁湘苑','address':'郑州市郑东新区'},
  {"lng":111.217237,"lat":34.807518,"count":9,'type':1,'name':'锦湘楼','address':'郑州市管城回族区商城东路150号'},
  {"lng":111.217784,"lat":34.855754,"count":47,'type':2,'name':'小公牛','address':'郑州市管城回族区商城东路150号'},
  {"lng":111.110193,"lat":34.857061,"count":52,'type':2,'name':'湘阁里辣','address':'郑州市金水区正弘城'},
  {"lng":111.102735,"lat":34.825619,"count":100,'type':2,'name':'老格蔸川菜','address':'郑州市管城回族区商城东路150号'},]

 

var map = new BMap.Map('map');
var cityName = new BMap.Point(111.207626, 34.775873);
map.centerAndZoom(cityName, 14);//设置城市，缩放级别
map.enableScrollWheelZoom();  //启用滚轮放大缩小

var _this = this;
// 随机向地图添加25个标
for (var i = 0; i < this.points.length; i ++) {
  var point = new BMap.Point(this.points[i].lng, this.points[i].lat);
  if(this.points[i].type == 1){
    addMarker(point,require("../assets/mapicon01.png"),this.points[i]);
  }else if(this.points[i].type == 2){
    addMarker(point,require("../assets/mapicon02.png"),this.points[i]);
  }else if(this.points[i].type == 3){
    addMarker(point,require("../assets/mapicon03.png"),this.points[i]);
  }
}
// 编写自定义函数,创建标注
function addMarker(point,imgUrl,data){
  var myIcon = new BMap.Icon(imgUrl, new BMap.Size(30,40));
  var marker = new BMap.Marker(point,{icon:myIcon});
  map.addOverlay(marker);
  (function (data) {
//点标记的点击事件
    marker.addEventListener("click",function(e){
      _this.openInfo(data,function (str) {
        var infoBox = new BMapLib.InfoBox(map,str,{
          boxStyle:{
            width: "300px"
            ,height: "400px"
          }
          ,closeIconMargin: "1px 1px 0 0"
          ,closeIconUrl: null
          ,enableAutoPan: false
          // ,align: INFOBOX_AT_LEFT
          // ,offset: new BMap.Size(-50,0)
        });
        var marker = new BMap.Marker(new BMap.Point(data.lng, data.lat));
//定义一个全局变量，用来点击当前点标记出现对应的信息窗口，其他窗口关闭
        if(_this.lastInfoBox){
          //判断上一个窗体是否存在，若存在则执行close
          _this.lastInfoBox.close();
        }
        _this.lastInfoBox = infoBox;
        infoBox.open(marker);
        // marker.enableDragging();

      })
    });
  })(data);
}

 

openInfo(data,callback){
  var str = `<div style="background: url('../../static/img/tipBg.png');background-size: 100%;width: 330px;padding: 42px;color: #ffffff">
  <img src="../../static/img/pic01.jpg" alt="" style="width: 100%;height: 100px;margin-bottom: 15px">
  <p style="font-size: 18px;">${data.name} <span style="   color: #00DEFF;border: 1px solid #00DEFF;border-radius: 10px;padding: 0 5px;height: 24px;line-height: 22px;font-size: 14px;">火锅</span></p>
  <p style=" margin: 5px 0;font-size: 14px">地址：${data.address}</p>
  <div style="display: inline-block;width: 50%;float: left;text-align: left;margin-top: 25px">
    <img src="${this.getGrade(data.type)}" alt="" style="width: 100%">
  </div>
  <ul style="display: inline-block;width: 50%;margin-top: 15px">
    <li style="font-size: 12px;background: url(../../static/img/liBg.png) no-repeat;height: 55px;text-align: center;width: 112px">
      <p>浓度</p>
      <p><span style="font-size: 20px;color: #00DEFF;margin-right: 5px">3.2</span>mg/m3</p>
    </li>
    <li style="font-size: 12px;background: url(../../static/img/liBg.png) no-repeat;height: 55px;text-align: center;width: 112px">
      <p>非甲烷总烃</p>
      <p><span style="font-size: 20px;color: #00DEFF;margin-right: 5px">14</span>mg/m3</p>
    </li>
    <li style="font-size: 12px;background: url(../../static/img/liBg.png) no-repeat;height: 55px;text-align: center;width: 112px">
      <p>油烟去除率</p>
      <p><span style="font-size: 20px;color: #00DEFF;margin-right: 5px">88.6</span>%</p>
    </li>
  </ul>
</div>`
  callback(str);
}