腾讯地图根据位置获取经纬度，中心点悬浮标注

最新推荐文章于 2024-06-17 10:03:20 发布

lee

最新推荐文章于 2024-06-17 10:03:20 发布

阅读量2k

点赞数 1

文章标签： html5 javascript

本文链接：https://blog.csdn.net/m0_37626209/article/details/118763685

版权

拖动地图获取中心点的经纬度
html部分

 <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
    <style type="text/css">
        html,
        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
            position: relative;
        }

        #container {
            width: 100%;
            height: 100%;
        }

        #info {
            position: absolute;
            bottom: 50px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(102, 175, 233, 0.6);
            border-radius: 3px;
            padding: 10px;
            width: 170px;
            z-index: 9999;
        }

        #copyright {
            position: absolute;
            bottom: 0px;
            left: 80%;
            z-index: 9999;
        }
    </style>
    <body onload="initMap()">
		<div id="container"></div>
		<div id="info">
		    <input type="hidden" id="lng" value="">
		    <input type="hidden" id="lat" value="">
		    <p>当前中心点：
		        <button id="saveBut" type="button" class="form-btn form-btn-small" onclick="getCenter()"><i
		                class="fa fa-save"></i>&nbsp;保 存
		        </button>
		    <div id="position"></div>
		    </p>
		</div>
	</body>

js部分

function initMap() {
        var lone = parent.$('input[name=longitude]').val();
        var late = parent.$('input[name=latitude]').val();
        var address = parent.$('.address').text();
        if (!isEmpty(lone) && !isEmpty(late)) {
            if (address) {
                $.ajax({
                    async: true,
                    type: 'GET',
                    dataType: 'jsonp',
                    url: 'https://apis.map.qq.com/ws/geocoder/v1/',
                    data: {
                        address: address,
                        key: "OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77",
                        output: "jsonp"
                    },
                    success: function (data) {
                        if (data.status == 0) {
                            var longitude = data.result.location.lng;
                            var latitude = data.result.location.lat;
                            setOrientation(longitude, latitude);
                        }
                    }, error: function (data) {
                        alert(data.message)
                    }
                });
            }
        } else {
            setOrientation(lone, late);
        }


    }

    /**
     * 设置显示坐标
     */
    function setOrientation(longitude, latitude) {
        $('#lng').val(longitude);
        $('#lat').val(latitude);
        var position = document.getElementById("position");
        position.innerHTML = longitude + '，' + latitude//获取地图中心点
        var center = new TMap.LatLng(latitude, longitude);//设置中心点坐标
        //初始化地图
        var map = new TMap.Map("container", {
            zoom: 12, //设置地图缩放级别
            center: center, //设置地图中心点坐标
        });

        var markerGeo = {
            id: 'center',
            position: map.getCenter(),
        };
        // 创建一个位于地图中心点的marker
        var markerLayer = new TMap.MultiMarker({
            map: map,
            geometries: [
                markerGeo
            ]
        });

        // 监听中心点变化事件，更新marker的位置
        map.on('center_changed', () => {
            markerGeo.position = map.getCenter();
            markerLayer.updateGeometries([markerGeo]);
        });
        //监听地图平移
        map.on("pan", function () {
            var lng = map.getCenter().getLng().toFixed(6);
            var lat = map.getCenter().getLat().toFixed(6);
            $('#lng').val(lng);
            $('#lat').val(lat);
            position.innerHTML = lng + "，" + lat;//获取地图中心点
        });
    }

    /**
     * 获取中心点位置赋值父页面
     */
    function getCenter() {
        parent.$('input[name=longitude]').val($('#lng').val());
        parent.$('input[name=latitude]').val($('#lat').val());
    }

在这里插入图片描述

lee

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
腾讯地图根据位置获取经纬度，中心点悬浮标注

腾讯地图根据位置获取经纬度，中心点悬浮标注拖动地图获取中心点的经纬度html部分 <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script> <style type="text/css"> html, body { heigh
复制链接

扫一扫