腾讯地图GL JS点标识监听:无dragend事件的经纬度获取方案_开发语言

引入腾讯地图SDK

<!--腾讯地图 API-->
    <script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=***"></script>

构建地图容器

<div class="layui-card">
            <div class="layui-card-header lock_title" style="text-align: center;">单击地图获取经纬度</div>
            <div class="layui-form-item">
                <div id="lock_map" style="width: 100%;height: 250px;"></div>
            </div>
        </div>

点标识监听事件获取经纬度

腾讯地图GL版中,没有拖动事件,具体事件如下:

腾讯地图GL JS点标识监听:无dragend事件的经纬度获取方案_javascript_02


因此,在添加listener到eventName事件的监听器数组中时,采用单击地图的单击事件clickMarkerLayer 点图层

腾讯地图GL JS点标识监听:无dragend事件的经纬度获取方案_图层_03

<!--腾讯地图实例-->
    var center = new TMap.LatLng(lnglat[1], lnglat[0]);
    var map = new TMap.Map("lock_map", {
        zoom: 17,
        center: center
    });

    //初始化marker图层
    var markerLayer = new TMap.MultiMarker({
        id: 'marker-layer',
        map: map,
        geometries: [{
            "position": center
        }]
    });

    //监听点击事件添加marker
    map.on("click", (evt) => {
        //console.log(evt.latLng.lat);
        //清楚掉上次点击的marker
        markerLayer.setGeometries([]);
        //新增marker
        markerLayer.add({
            position: evt.latLng
        });

        //经纬度将gcj02转为wgs84
        var lnglat = gcj02towgs84(evt.latLng.lng,evt.latLng.lat);
        //console.log(lnglat)
        $("#poi_longitude").val(lnglat[0]);
        $("#poi_latitude").val(lnglat[1]);
    });

步骤

  • 加载默认中心点标注;
  • 单击地图事件,获取经纬度
  • 清除上一个标注;
  • 新增标注

@漏刻有时