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

RyzenVega

已于 2022-08-24 15:22:46 修改

阅读量1.8k

点赞数 2

分类专栏： Vue、JQ 文章标签： javascript 前端 html

于 2022-07-21 09:26:41 首次发布

本文链接：https://blog.csdn.net/weixin_46607967/article/details/125905243

版权

Vue、JQ 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天地图</title>
    <style>
        #mapDiv {
            width: 100%;
            height: 800px;
        }
    </style>
</head>

<body>
    <div id="mapDiv"></div>
    <div>
        <label for="">经度</label>
        <input type="text" id="eqLon">
    </div>
    <div>
        <label for="">纬度</label>
        <input type="text" id="eqLat">
    </div>
</body>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>
<script>
    const lngEl = document.getElementById('eqLon')
    const latEl = document.getElementById('eqLat')

    let map,
        marker,
        zoom = 14
    const layerUrl =
        'http://t0.tianditu.gov.cn/img_w/wmts?' +
        'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles' +
        '&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=你的密钥'

    // 创建自定义图层对象
    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('')
        });
    }
</script>

</html>