JS使用天地图添加修改删除标注

需要先在天地图申请个人密钥 然后替换代码layerUrl变量内的密钥

可以通过地图点击添加标注 也可以通过监听输入框添加和修改标注

再次点击标注可删除  长按可拖拽

    
    
    
    
    



    
    
        经度
        
    
    
        纬度
        
    




 
'

    // 创建自定义图层对象
    map = new T.Map('mapDiv', {
        layers: [
            new T.TileLayer(layerUrl, {
                minZoom: 1,
                maxZoom: 18,
            }),
        ],
    })

    //设置显示地图的中心点和级别
    map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);

    // 地图点击事件
    map.addEventListener('click', function (e) {
        lngEl.value = e.lnglat.getLng()
        latEl.value = e.lnglat.getLat()
        drawMarker()
    })

    // 监听
    lngEl.oninput = function () {
        setTimeout(() => drawMarker(), 500)
    }
    latEl.oninput = function () {
        setTimeout(() => drawMarker(), 500)
    }

    // 添加标注
    function drawMarker() {
        map.clearOverLays()

        const lng = lngEl.value.replace(/s/, '')
        const lat = latEl.value.replace(/s/, '')

        marker = new T.Marker(new T.LngLat(lng, lat))
        map.panTo(new T.LngLat(lng, lat))
        map.addOverLay(marker)

        marker.enableDragging()
        marker.addEventListener('drag', function (e) {
            lngEl.value = e.lnglat.getLng()
            latEl.value = e.lnglat.getLat()
        })
        marker.addEventListener("click", function () {
            map.removeOverLay(this)
            $('#eqLon').val('')
            $('#eqLat').val('')
        });
    }