欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-04-21 20:26:39
...

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

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

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

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

首先是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="";
}