腾旭地图显示多个位置，点击弹出位置信息

在vue3中

1.定义地图展示中心点 的经纬度

const longitude = ref(40.765465);

const latitude = ref(114.881075);

2.初始化

const initMap = () => {

  console.log(mapMark.value);

  map.value = new window.TMap.Map(mapMark.value, {

    center: new window.TMap.LatLng(longitude.value, latitude.value), //设置地图中心点坐标

    zoom: 11, //设置地图缩放级别

    pitch: 43.5, //设置俯仰角

    rotation: 0 //设置地图旋转角度

  });

};

onMounted(() => {

  initMap();

  moreMarks()

});

3.方法

const mark = info => {
  let geo = [
    // {
    //   // id: '1',
    //   styleId: 'myStyle',
    //   position: new window.TMap.LatLng(longitude.value, latitude.value) // 点标记的坐标位置
    // }
  ];
  if (info) {
    info.forEach(item => {
      geo.push({
        id: item.id ? item.id + '' : '1',
        styleId: item.styleId ? item.styleId : 'myStyle', // 指定样式id
        position: new window.TMap.LatLng(item?.latitude, item?.longitude), // 点标记的坐标位置
        content: item.text ? item.text : ''
      });
    });
  }

  markerCluster.value = new window.TMap.MultiMarker({
    map: map.value,
    styles: {
      myStyle: new window.TMap.MarkerStyle({
        //图片样式配置参数
        // src: require('../../assets/tengxun/定位.png'),  //图片路径
        width: 25, //图片宽度（单位为像素，默认为图片原宽度）
        height: 35, //图片高度（单位为像素，默认为图片原高度）
        opacity: 0.9, //图片透明度（默认为1，保持原透明度）
        // faceTo: 'map', //图片保持贴地（默认图片直立朝向屏幕）
        //文字样式配置参数
        size: 16, //文字大小
        color: '#007ACC', //文字颜色
        strokeWidth: 2, //文字描边宽度
        strokeColor: '#fff', //文字描边颜色
        direction: 'top' //文字相对于图片的位置
      })
    },
    // 点标记数据数组
    geometries: geo
  });
  infoWindow.value = new window.TMap.InfoWindow({
    map: map.value,
    position: new window.TMap.LatLng(39.984104, 116.307503),
    offset: { x: 0, y: -32 } //设置信息窗相对position偏移像素
  });
  infoWindow.value.close(); //初始关闭信息窗关闭
  markerCluster.value.on('click', event => {
    // console.log('123', event);
    // mapInfoList.value.forEach(item => {
    //   if (item['id'] == event['geometry']['id']) {
    //     newForm.value = item;
    //   }
    // });
    // visible.value = true;
    infoWindow.value.open(); //打开信息窗
    infoWindow.value.setPosition(event.geometry.position); //设置信息窗位置
    let infoStr=''
     mapInfoList.value.forEach(item => {
      if (item['id'] == event['geometry']['id']) {
        // newForm.value = item;
        console.log(item);
        infoStr=`酒店名称:${item?.realName};
小区名称${item?.cellName};
地址:${item?.roomAddress};
门牌号:${item.roomNum}`
      }
    });
    // infoWindow.value.setContent(event.geometry.position.toString()); //设置信息
    infoWindow.value.setContent(infoStr); //设置信息
  });
};

4.调接口，拿到位置信息数组，再调用方法

const moreMarks = () => {
  getMapInfo().then(res => {
    let arr = [];
    res.forEach((item, index) => {
      arr.push({
        cellName: item?.cellName,
        id: item['id'],
        longitude: Number(item['longitude']),
        latitude: Number(item['latitude']),
        realName: item?.realName,
        roomAddress: item?.roomAddress,
        roomNum: item?.roomNum,
        text: item?.realName + item?.cellName,
        styleId: 'myStyle'
      });
      mapInfoList.value.push({
        ...item
      });
    });
    nextTick(() => {
      mark(arr);
    });
  });
};