点击测试修改创建时间

关键在于market监听click,还要监听infowindowopen
marker[i].addEventListener(‘click’, function() {
this.openInfoWindow(info[i])//悬浮监听提示方法
})
marker[i].addEventListener(‘infowindowopen’,function() {XXX})
下面是完整代码

<template>
  <baidu-map
    class="map"
    :center="center"
    :zoom="zoom"
    :scroll-wheel-zoom="true"
    @click="clickPoint"
    @moving="syncCenterAndZoom"
    @moveend="syncCenterAndZoom"
    @zoomend="syncCenterAndZoom"
    @ready="handler">
    <!--地图类型-->
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_SATELLITE_MAP']" anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-map-type>
    <!--缩放-->
    <!--<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>-->
    <!--定位当前位置-->
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    <bm-marker :position="center" :dragging="false"></bm-marker>
  </baidu-map>
</template>
<script>
  import { httpAction ,getAction } from '@/api/manage'

  export default {
    data() {
      return {
        center: { lng: 0, lat: 0 },
        zoom: 3,
        devices: [],
        active: false,
        BMap: '',
        map: '',
        url: {
          list: '/map/myMap/list',
          test: '/map/myMap/test',
        }
      }
    },
    mounted() {
      this.loadData()
    },
    watch: {
    //监听devices,不监听的话只有第一次进入页面会渲染图标,之后addMarket在loadData之前,导致devices没有数据
      devices: function(devices, old) {
        let that = this
        this.addMarket({ BMap: that.BMap, map: that.map })
      },
    },
    methods: {
      loadData() {
        getAction(this.url.list).then((res) => {
          if (res.success) {
            this.devices = res.result.records
            console.log(this.devices)
          } else {
            that.$message.warning(res.message)
          }
        })
      },
      draw({ BMap, map, el }) {
        const pixel = map.pointToOverlayPixel(new BMap.Point(114.42993, 30.475798))
        el.style.left = pixel.x - 10 + 'px'
        el.style.top = pixel.y - 10 + 'px'
      },
      handler({ BMap, map }) {
        this.BMap = BMap
        this.map = map
        console.log('handler')
        this.center.lng = 114.429211
        this.center.lat = 30.477168
        this.zoom = 14
        //不添加的话第一次进入页面没有
        this.addMarket({ BMap, map })
      },
      addMarket({ BMap, map }) {
        let that = this;
        console.log('addMarket')
        let point = new Array()//定义数组标注经纬信息
        let marker = new Array()//定义数组点对象信息
        let info = new Array()//定义悬浮提示信息
        let myIcon = new Array()//定义数组图标
        //根据自己需求设置图片
        myIcon[0] = new BMap.Icon('http://aaa.png', new BMap.Size(25, 25))
        myIcon[1] = new BMap.Icon('http://bbb.png', new BMap.Size(25, 25))
        myIcon[2] = new BMap.Icon('http://ccc.png', new BMap.Size(25, 25))
        console.log(this.devices.length)
        for (let i = 0; i < this.devices.length; i++) {
          let device = this.devices[i]
          point[i] = new BMap.Point(device.lng, device.lat)
          marker[i] = new BMap.Marker(point[i])
          map.addOverlay(marker[i])
          /*var label = new BMap.Label(device.remark,{offset: new BMap.Size(10,-10)});
          marker[i].setLabel(label);*/
          let type = device.type
          marker[i].setIcon(myIcon[type - 1])
          //设置信息窗口
          let content = '<table>'
            + `<tr><td> 经度：${device.lng}</td></tr>`
            +`<tr><td> 纬度：${device.lat}</td></tr>`
            +`<tr><td> 设备类型：${device.type }</td></tr>`
            +`<tr><td id="time${device.id}"> 创建时间：${device.createTime }</td></tr>`
            //预留id绑定事件,直接写onclick无效
            +`<tr><td><button id="${device.id}">测试</button></td></tr>`
            +`</table>`;
          info[i] = new BMap.InfoWindow(content)
          info[i].addEventListener("click",  function() {
            this.buttonClick(device.id)
          });
          marker[i].addEventListener('click', function() {
            this.openInfoWindow(info[i])//悬浮监听提示方法
          })
          //监听信息窗打开,打开的时候才能根据之前设置id获取元素,不然实际上页面没有这个元素
          marker[i].addEventListener('infowindowopen',function() {
            let id = device.id
            if (document.getElementById(id)){
              document.getElementById(id).addEventListener("click", function() {
              //简单的测试方法,修改了createTime
                httpAction(that.url.test,{id:id},"put").then((res) => {
                  if (res.success) {
                    console.log(res)
                    that.$message.warning(res.message)
                    更新信息显示窗口,实际开发中还要更改this.devices
                    document.getElementById(`time${id}`).innerText = `创建时间：${res.result.createTime}`
                  } else {
                    that.$message.warning(res.message)
                  }
                })
              })
            }else {
              console.log("else")
            }
          })
        }
      },

      clickPoint(e) {
        console.log(e.point)
      },
      syncCenterAndZoom(e) {
        const { lng, lat } = e.target.getCenter()
        this.center.lng = lng
        this.center.lat = lat
        this.zoom = e.target.getZoom()
      }
    }
  }
</script>
<style>
  .map {
    height: 500px;
  }
  
  .BMap_cpyCtrl {
    display: none !important;
  }

  .anchorBL {
    display: none !important;
  }

  div.main {
    margin: -12px -12px 0px;
  }
</style>