高德地图jsApi的点位新增

开启编程成长之旅！这是我参与「编程 · 12 月更文挑战」的第23天，点击查看活动详情

通过前几篇文章，我们大致的了解了高德地图的简单使用，以及点和线的一些设置，这一期我们来看一下交互是如何添加的，我这里是一个简单的交互，复杂的业务下还需要大家自行扩展哦~

• 这一篇是本系列第四篇，前三篇大家可以点击链接访问
  高德地图jsApi的使用
  高德地图jsApi的点和线配置
  高德地图jsApi的右键设置
  完成代码请查看代码仓库
• 先分享一下我这里的业务思路，看图说话~
  我这里比较简单了，一个经度，一个纬度，输入以后带你完成或者清空，点完成的时候会有一个简单的验证，我这里先做的是判定是不是数值，然后判定输入的坐标系的值是否在我们国家范围之内。输入正确以后图形上新增点，新增的点这一块我把之前点渲染的逻辑抽离了出来，直接使用一个方法就可以，事件全部是在抽离出来的方法里面绑定的，点位增加以后，输入框清空，点击清空输入，同样清空，其他交互事件和上一期做的相同。
• 下面配合注释食用代码：

  // 输入事件 
  const done = document.getElementsByClassName('btn')[0];
  const del = document.getElementsByClassName('btn')[1];
  const longitude = document.getElementsByTagName('input')[0];  // 经度
  const latitude = document.getElementsByTagName('input')[1];   // 纬度
  done.addEventListener('click',()=>{
    console.log(longitude.value);
    // 中国经纬度范围， 经度 73.33 - 135.05 , 纬度 3.51-53.33
    const lng = longitude.value;
    const lat = latitude.value;
    if(Number.isNaN(Number(lng)) || Number.isNaN(Number(lat))){
      alert('请输入数值')
      return
    }
    if(lng <= 73 || lng > 135){
      alert('请输入正确的经度')
      return
    }
    if(lat < 3.5 || lat > 53){
      alert('请输入正确的纬度')
      return
    }
    const marker = {
      position:[lng,lat]
    }
    setMarker(marker)
    clearInput()
  })
  del.addEventListener('click',clearInput)
  // 清除输入框
  function clearInput(){
    longitude.value = ''
    latitude.value = ''
  }


  // 抽离点位信息设置
  function setMarker(marker){
    //创建右键菜单
    var contextMenu = new AMap.ContextMenu();

    //右键放大
    contextMenu.addItem("放大一级", function ()
    {
      map.zoomIn();
    }, 0);

    //右键缩小
    contextMenu.addItem("缩小一级", function ()
    {
      map.zoomOut();
    },1);

    contextMenu.addItem("设置起点", function ()
    {
      console.log(marker,markerd.dom);
      changeStyle(markerd.dom,marker)
      contextMenu.close() // 关闭右键菜单
    });

    contextMenu.addItem("与起点连线", function ()
    {
      if(!currentPonit){
        alert('请选择起点')
        contextMenu.close() 
        return
      }else{
        // 这里其实可以根据数据判定线类型了，因为第二个选中点的信息+和第一个选中点的信息都有了,但是过滤方法会比较复杂
        let path = [currentData.position,marker.position];
        const polyline1 = setLines(path,'#3366bb',5);
        map.add([polyline1]);
        clearPoint();
      }
      contextMenu.close() // 关闭右键菜单
    });
    let content = '<div class="marker-route"></div>';
    var markerd = new AMap.Marker(
    {
      map: map,
      // icon: marker?.icon,
      content,
      offset: new AMap.Pixel(-8,-8),
      visible:true, // 点标记是否可见
      position: [marker.position[0], marker.position[1]],
    });
  
    //绑定鼠标右击事件——弹出右键菜单
    markerd.on('rightclick', function (e)
    {
      contextMenu.open(map, e.lnglat);
    });
  }