百度地图如何创建窗口以及自定义标注

我想要实现的功能：点击地图上的标注即弹出窗口

 

 

步骤：

1.模拟数据：即要标注的数据，其中type字段为，根据不同的type值展示不同的标注图

let data = [
  {
    title:'测试标题1',
    content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容",
    lat: "30.316369",
    lon: "120.118004",
    type: 1
  },
  {
    title:'测试标题2',
    content: "测试内容测试内容测试内容测试内容测试内容测试内容测试内容测试内容",
    lat: "30.187417",
    lon: "120.270469",
    type: 2
  }
];

 

2.定义创建窗口的函数，根据百度地图api自己二次封装

 

/*
定义创建窗口函数
@map:创建的地图实例
@params:lng,lat经纬度
@content:窗口要展示的内容
@title:窗口标题
@type:区分不同的标注图片
*/
function createWindow(map,lng,lat,content,title,type) {
  let ICON='';
  if(type==1){
    ICON= require('********');
  } else{
    ICON= require('********');
  }
  let map = new BMap.Map("allmap");
  let point = new BMap.Point(lng,lat);
  let icon = new BMap.Icon(ICON, new BMap.Size(20, 32), {
    anchor: new BMap.Size(10, 30)
  });
  let marker = new BMap.Marker(point,{
    icon:icon
  });  // 创建标注
  map.addOverlay(marker);// 将标注添加到地图中
  map.centerAndZoom(point, 15);
  let opts = {
    width : 200,     // 信息窗口宽度
    height: 100,     // 信息窗口高度
    title : title , // 信息窗口标题
    enableMessage:true,//设置允许信息窗发送短息
    message:content
  };
  let infoWindow = new BMap.InfoWindow(content, opts);  // 创建信息窗口对象
  marker.addEventListener("click", function(){
    map.openInfoWindow(infoWindow,point); //开启信息窗口
  });
}

 

3.定义显示窗口的函数

 

//定义显示窗口函数
function showWindow(data) {
    let map = new BMap.Map("allmap");
    for(let i=0;i<data.length;i++){
        let lng=data[i].lng;
        let lat=data[i].lat;
        let title=data[i].title;
        let content=data[i].content;
        let type=data[i].type;
        createWindow(map,lng,lat,content,title,type);
    }
}

 

4.调用显示窗口函数，根据用户需求何时何处调用

showWindow(data);

 

如有错误之处请给以指正，谢谢！