腾讯地图获取所选区域坐标

最新推荐文章于 2023-07-08 11:18:57 发布

原创最新推荐文章于 2023-07-08 11:18:57 发布 · 5.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#腾讯 #html #地图

前端开发专栏收录该内容

53 篇文章

订阅专栏

本文介绍了一款基于腾讯地图API的坐标获取工具，通过简单的HTML和JavaScript实现，支持点、线、多边形坐标的选取与显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

帮朋友做的，顺便记录下来，以后使用，主要是在腾讯地图上点选、主要是在屏幕点选坐标，线选坐标，多边形坐标，代码写的优点乱，也没时间整理了，下面是图，觉得适合自己了，再向后看代码。

首先是html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="style.css" rel="stylesheet" type="text/css">
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <title>获取腾讯地图坐标</title>

</head>
<body>
<div id="container">
</div>
<div id="menu">
    <img src="img/scatter_plot_.png"  id="point" onclick="point()" title="点坐标">
    <img src="img/polyline.png" id="line"  onclick="line()" title="线坐标">
    <img src="img/rectangle_stroked.png" id="rectangle"  onclick="rectangle()" title="矩形坐标">
</div>
<div id="result">

</div>
<script src="getPoint.js"></script>
</body>
</html>

下面是js

var counts=0;
var type=0;
var markersArray=[];
var points=[];
var polygon;
var line;

var map = new qq.maps.Map(document.getElementById("container"),{
    //地图的默认鼠标指针样式
    draggableCursor: "crosshair",

    //拖动地图时的鼠标指针样式
    draggingCursor: "pointer"
});


var listener=qq.maps.event.addListener(
    map,
    'click',
    function(event) {
        counts=counts+1;
        var marker = new qq.maps.Marker({
            position: event.latLng,
            map: map,
            content:'点'+counts
        });
        var label=new qq.maps.Label({
            position: event.latLng,
            map: map,
            content:'点'+counts
        });
        markersArray.push(marker);
        markersArray.push(label);
        insetText("点"+counts+":经度"+event.latLng.getLng()+"纬度"+event.latLng.getLat()+"<br/>");
    }
);

document.getElementById("point").onclick=function () {
    if (type != 1) {
        reInit();
        type = 1;
    }
    qq.maps.event.removeListener(listener);
   listener=qq.maps.event.addListener(
        map,
        'click',
        function(event) {
            counts = counts + 1;
            addPoints(new qq.maps.LatLng(event.latLng.getLat(),event.latLng.getLng()));
        }
    );
};
document.getElementById("line").onclick=function () {
    if (type != 2) {
        reInit();
        type = 2;
    }

    qq.maps.event.removeListener(listener);
    listener=qq.maps.event.addListener(
        map,
        'click',
        function(event) {
            counts=counts+1;
            addPoints(new qq.maps.LatLng(event.latLng.getLat(),event.latLng.getLng()));
            points.push(new qq.maps.LatLng(event.latLng.getLat(),event.latLng.getLng()));

            if(counts>=2){
                if(counts>2){
                    line.setMap(null);
                }
                line = new qq.maps.Polyline({
                    path: points,
                    strokeColor: '#ffc64b',
                    strokeWeight: 5,
                    editable:false,
                    map: map
                });
            }


        }
    );
};
document.getElementById("rectangle").onclick=function () {
    if (type != 3) {
        reInit();
        type = 3;
    }
    qq.maps.event.removeListener(listener);
    listener=qq.maps.event.addListener(
        map,
        'click',
        function(event) {
            counts = counts + 1;
            addPoints(new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng()));
            points.push(new qq.maps.LatLng(event.latLng.getLat(), event.latLng.getLng()));
            if (counts >=3) {
                if(counts>3){polygon.setMap(null)}
                 polygon = new qq.maps.Polygon({
                    path:points,
                    strokeColor: '#ffc64b',
                    strokeWeight: 5,
                    map: map
                });
            }
        }
    );
};
function addPoints(latLng) {
    var marker = new qq.maps.Marker({
        position: latLng,
        map: map,
        content:'点'+counts
    });
    var label=new qq.maps.Label({
        position: latLng,
        map: map,
        content:'点'+counts
    });
    markersArray.push(marker);
    markersArray.push(label);
    insetText("点"+counts+":经度"+latLng.getLng()+"纬度"+latLng.getLat()+"<br/>");
}

function reInit() {
    if (counts > 3 && type == 3) {
        polygon.setMap(null);
    }
    if (line) {
        line.setMap(null)
    }
    counts = 0;
    clearText();
    if (markersArray) {
        for ( var i in markersArray) {
            markersArray[i].setMap(null);
        }
    }
    points=[];
}

function insetText(str) {
    var result=document.getElementById("result");
    result.insertAdjacentHTML("beforeEnd",str);
}
function clearText() {
    var result=document.getElementById("result");
    result.innerHTML="";
}