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

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

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

腾讯地图获取所选区域坐标相关推荐

php 获取key的位置,PHP使用腾讯地图获取指定地址坐标：创建key（图文+视频）
本篇文章主要给大家介绍PHP用腾讯地图获取指定地址坐标之创建key的步骤方法. 我们在项目开发过程中,有时可能会遇到用腾讯或百度地图接口获取相关数据的需求.那么对于PHP初学者来说,可能对相关知识不太 ...
手机端或PC端利用高德地图和腾讯地图获取用户当前位置信息
目录一.简介二.高德地图三.腾讯地图四.总结一.简介最近在项目中,有需要使用到获取用户当前地理位置信息的功能,获取当前用户位置保存到数据库中的场景,并且需要支持多种地图定位方式,我这里采用 ...
vue使用腾讯地图获取经纬度和逆解析获取详细地址
vue使用腾讯地图获取经纬度和逆解析获取详细地址示例必须在腾讯api中申请自己的key 打开这个webservice用来逆解析详细地址下面是代码 1 , html创建放地图的容器 <div ...
uni-app 写H5 小程序使用腾讯地图获取地理位置
uni-app 写公众号小程序使用腾讯地图获取地理位置 1.首先需要在腾讯地图里面申请key 2.下载微信小程序JavaScriptSDK,微信小程序 JavaScriptSDK v1.1 J ...
腾讯地图获取用户Ip地址
腾讯地图获取用户IP地址## <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js&quo ...
thinkphp5使用腾讯地图获取指定地址坐标：经纬度
首先去腾讯地图位置服务官网注册:https://lbs.qq.com/ 注册成功后注册成功后去开发中信息里面: 填写相关信息认证成功后就可以去配置key了: 创建成功后就获得了key,一串字符SAD ...
【微信小程序】调用腾讯地图获取当前城市定位
前导知识 1. 腾讯地图SDK接入 1. 申请开发者密钥打开网址 https://lbs.qq.com/console/key.html,申请密钥,填写信息单击"提交"按钮,弹出 ...
微信小程序使用腾讯地图进行路线规划，坐标转地址，逆地理编码，计算目的地跟自身定位的距离
微信小程序使用腾讯地图 1.介绍腾讯地图官方文档: https://lbs.qq.com/ 这里,我主要运用的是这几个api ,我在运用的过程中主要实现的功能有:地图路线规划.地址转坐标+计算距离. ...
uni-app小程序结合腾讯地图获取定位以及地图选址
表单中的地址用地图的方式进行编辑与选址看效果第一步:登录公众平台==>设置==>第三方设置第二步:登录腾讯地图申请属于自己小程序的key 第三步:找到腾讯地图的插件第四步:添加插件 ...

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

腾讯地图获取所选区域坐标相关推荐

最新文章

热门文章