高德地图记录遇到的问题

高德地图记录笔记

官网地址：官网地址-参考手册
示例：相关示例

1、高德地图监听事件

我原来一直使用AMap.event.addListener();然后老是报错，后来发现是Event。

  // 添加鼠标移出事件监听
  AMap.Event.addListener(infoWindow, 'mouseover', function () {
    // 鼠标移出时关闭弹框并缩小地图
    console.log('鼠标移入')
    map.setStatus({
      zoomEnable: false,
    });
  });
  // 添加鼠标移出事件监听
  AMap.Event.addListener(infoWindow, 'mouseout', function () {
    // 鼠标移出时关闭弹框并缩小地图
    console.log('鼠标移出')
    map.setStatus({
      zoomEnable: true,
    });
  });

2、绘制圆点标记时需要一个跟随鼠标移动的样式，当鼠标按下时就绘制一个标记。

思路：利用地图鼠标移动事件，构建一个所需要的样式，当鼠标移动时，将鼠标所在的位置设置到样式上面去，即设置所在的标记的位置。
如果是marker则是position，如果是圆点标记CircleMarker则是center
利用鼠标按下事件mousedown绘制标记
由于绘制的时候一个一个绘制，但是其实 他是一个集合，所以用circleMarkersMouse将鼠标样式存起来，然后移除的时候也是循环将他都移除掉
地图鼠标事件事件：https://lbs.amap.com/demo/javascript-api-v2/example/event/map-click-event

const circleMarker=ref(null);//绘制的圆点标记
const circleMarkerData=ref([]);//圆点标记集合
const circleMouseMarker=ref(null);//鼠标样式标记
const circleMarkersMouse=ref([]);//鼠标样式标记集合

function addKeyPoint() {
// 鼠标移动事件--构建一个跟随鼠标移动的样式
  circleMouseMarker.value = new AMap.CircleMarker({
    strokeColor: 'rgb(255,0,30)',
    strokeWeight: 3,
    strokeOpacity: 0.5,
    fillColor: '#ffffff',
    fillOpacity: 0,
    radius: 10,
    bubble: true,
    zIndex: 999,
    clickable: true,
    cursor: 'pointer',
  })
  // 监听标记跟随鼠标移动事件
   circleMouseMarker.value.setMap(map);
   //绑定鼠标移动事件： 鼠标移动时设置一个样式
   map.on('mousemove', showInfoMoveCircle);
  // 鼠标按下时:按下一次就在地图上绘制一次标记
   map.on('mousedown', drawCircle);
   circleMarkersMouse.value.push(circleMouseMarker.value)
}
function showInfoMoveCircle(e) {
  circleMouseMarker.value.setCenter(e.lnglat);
}
//解除鼠标移动事件
function unbindInfoMoveCircle(){
  map.off('mousemove', showInfoMoveCircle);
}
//绘制标记
function drawCircle(){
 circleMarker.value = new AMap.CircleMarker({
    strokeColor: 'rgb(255,0,30)',
    center: e.lnglat,
    strokeWeight: 3,
    strokeOpacity: 0.5,
    fillColor: '#ffffff',
    fillOpacity: 0,
    zIndex: 999,
    bubble: true,
    radius: 10,
    cursor: 'pointer',
    clickable: true
  })
  circleMarker.value.setMap(map);
  circleMarkerData.value.push(circleMarker.value)
}

//关闭绘制事件以及移除鼠标样式
function closeDrawCircle() {
//移除鼠标样式
  if (circleMarkersMouse.value) {
    circleMarkersMouse.value.forEach(function (item, indx) {
      item.setMap(null);
      item = null;
    })
  }
  map.off('mousemove', showInfoMoveCircle);
  map.off('mousedown',drawCircle)
}

3、信息弹框内容自定义

function getPopupContent(res){
    const contentElement = document.createElement("div");//这里就是创建Dome元素
    contentElement.className = "custom-info-window";//给Dome设置类方便操作
    //这里就是在该元素上插入html模板字符串，也就是做的窗体了
    contentElement.innerHTML = `<div class="content" style="width: 300px">
        <div class="info-top"><div>设备属性</div><div class="closeSpan" οnclick="closeClick()">x</div></div>
        <div class="info-center">
          <div class="info-center-item"><div class="item-name">设备名称: </div><div class="item-value">${res.PointName}</div></div>
          <div class="info-center-item"><div class="item-name">设备编码: </div><div class="item-value">${res.PointCode}</div></div>
          <div class="info-center-item"><div class="item-name">设备地址: </div><div class="item-value">${res.PointAddress}</div></div>
        </div>
        <div class="info-bottom">
        ${
        (function () {
         //这里有个判断，有的地方不需要显示编辑，所以处理了一下
          if (props.action !== 'edit') {
            return ` <div style="cursor: pointer"  οnclick="onDetail()">详情</div>`
          } else {
            return `<div style="cursor: pointer"  οnclick="editInfoPopup()">编辑</div>
                              <div style="cursor: pointer"  οnclick="onDetail()">详情</div>         `
          }
        })()
        }
        </div>
        </div>`;
    return contentElement;
}

这里的点击事件还不能用，需要全局注册一下，然后在去写具体的处理方法。

window.closeClick = () => {
  closeClick();
}
window.editInfoPopup = () => {
  editInfoPopup();
}
window.onDetail = () => {
  onDetail();
}

4、自定义点标记内容：（marker标记上方加一个文本标签）

需求中有轨迹播放，播放时人员标记上方要标一下具体的人员名称。之前用label标签添加文本标注时会导致标签的位置有时候在上方，有时候在右方，后来采用了自定义点标记内容，把文本标签和图标放在一起，这个轨迹播放时，人员标记和文本就会一起移动

参考示例：自定义文本标记

代码：

function addPerSonMarker(location, image, row) {
  var markerContent = '' +
      `<div class="custom-content-marker">
             <div class="text" >${row.UserName}</div>
        <img src="${image}" style="width: 24px;height: 24px">
      </div>`;

  personMarker.value = new AMap.Marker({
    content: markerContent,
    offset: new AMap.Pixel(-12, -24),//偏移量是x轴偏移半个宽度，y轴偏移整个高度
    position: location,
    extData: {
      LayerPID: row.LayerPID,//父图层
    },
  });
  personMarker.value.setMap(map);
//   添加信息窗口
  personMarker.value.on('click', function (e) {
    getCurrentUser(e, row)
  })
}

效果展示: