腾讯地图获取所选区域坐标
程序员文章站
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="";
}
上一篇： JavaScript打破作用域的牢笼
下一篇： Java tomcat目录结构的简单介绍