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

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

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

腾讯地图获取所选区域坐标_鼠标指针_03

首先是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" οnclick="point()" title="点坐标">
    <img src="img/polyline.png" id="line"  οnclick="line()" title="线坐标">
    <img src="img/rectangle_stroked.png" id="rectangle"  οnclick="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").οnclick=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").οnclick=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").οnclick=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="";
}