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

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

步骤：

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

const 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自己二次封装

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

3.定义显示窗口的函数

//定义显示窗口函数 
function showWindow(data) {
  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(lng,lat,content,title,type);
  }
}

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

showWindow(data);

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

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

猜你喜欢