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

来源：互联网发布：php企业网站源码编辑：程序博客网时间：2024/06/05 13:32

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

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

阅读全文

0 0