腾讯地图经纬度选择和图层功能

效果展示：

功能实现：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><html><head><link rel="stylesheet" href="overanalysis/style.css">
</head><body id="container"><form id="myform" class="form-horizontal"><input type="text" hidden="hidden" id="lng"/><input type="text" hidden="hidden" id="lat"/><div class="box-body"><div class="form-group" id="allMap" style="height:700px;width:800px;"></div></div>   </form>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&libraries=convertor"></script>
<script>$(function () {//其他页面跳转携带经纬度参数，则定位到该经纬度，否则定位到当前位置var lngLat = "${param.lngLat}";if (lngLat != undefined && lngLat != '') {try {var arr = lngLat.split(",");var lng = arr[0];var lat = arr[1];init(lng,lat);} catch (e) {init();}} else {init();}bindEvent();});var map;var marker;var center;function init(lng,lat) {//定义地图的中心地理坐标if (lng != undefined && lng !='' && lat != undefined && lat != '') {center = new qq.maps.LatLng(parseFloat(lat),parseFloat(lng));} else {center = new qq.maps.LatLng(36.726032,114.102802);//该方法为异步getLocation();}//初始化地图initMap(lng,lat);//创建矩形叠加层，图片url请修改createGroundOverlay();//添加折线覆盖物createPolygon();}//初始化地图function initMap() {//定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器map = new qq.maps.Map(document.getElementById("allMap"),{center : center, // 地图的中心地理坐标zoom : 15, // 默认缩放级别,缩放级别4-17mapTypeId : qq.maps.MapTypeId.HYBRID, // 卫星地图模式mapTypeControl:false,});//创建一个Markermarker = new qq.maps.Marker({//设置Marker的位置坐标position: center,//设置显示Marker的地图map: map,draggable:true});setLngLat(center.getLng(),center.getLat());}//绑定事件function bindEvent() {//添加监听事件   获取鼠标单击事件，添加标记点qq.maps.event.addListener(map, 'click', function(event) {marker.setMap(null);marker=new qq.maps.Marker({position:event.latLng,map:map,draggable:true});setLngLat(event.latLng.getLng(),event.latLng.getLat());});}//获取当前位置function getLocation(){var geolocation = new qq.maps.Geolocation("6IWBZ-NGJKP-UT5DR-V7TJL-5U7S2-K4BW4", "yutao");geolocation.getLocation(function (position) {var lat = position.lat;var lng = position.lng;center = new qq.maps.LatLng(lat,lng);map.setCenter(center);marker.setMap(null);marker=new qq.maps.Marker({position:center,map:map,draggable:true});setLngLat(lng,lat);}, function () {center = new qq.maps.LatLng(36.726032,114.102802);}, {timeout: 8000});}//创建矩形叠加层，图片url请修改function createGroundOverlay(){new qq.maps.GroundOverlay({map:map,zIndex:-1,imageUrl:Global.contextPath + '/static/pages/monitor/img/yh.png',bounds:new qq.maps.LatLngBounds(new qq.maps.LatLng(36.7399126700,114.0859880600),new qq.maps.LatLng(36.7210522200,114.1175883900))});new qq.maps.GroundOverlay({map:map,zIndex:-1,imageUrl:Global.contextPath + '/static/pages/monitor/img/zs1.png',bounds:new qq.maps.LatLngBounds(new qq.maps.LatLng(36.7348870300,114.0916279100),new qq.maps.LatLng(36.6876175900,114.1322266000))});new qq.maps.GroundOverlay({map:map,zIndex:-1,imageUrl:Global.contextPath + '/static/pages/monitor/img/py.png',bounds:new qq.maps.LatLngBounds(new qq.maps.LatLng(36.7434735600,113.8977854400),new qq.maps.LatLng(36.6955655900,113.9444176500))});new qq.maps.GroundOverlay({map:map,zIndex:-1,imageUrl:Global.contextPath + '/static/pages/monitor/img/zs3.png',bounds:new qq.maps.LatLngBounds(new qq.maps.LatLng(36.6363133800,114.1114188800),new qq.maps.LatLng(36.5997751400,114.1538538600))});}// 添加折线覆盖物function createPolygon(){var polygon = new qq.maps.Polygon({path: [new qq.maps.LatLng(36.7362187706,114.0991544724),new qq.maps.LatLng(36.7389529065,114.1000986099),new qq.maps.LatLng(36.7378351898,114.1064715385),new qq.maps.LatLng(36.7372333356,114.1064715385),new qq.maps.LatLng(36.7372333356,114.1064715385),new qq.maps.LatLng(36.7367518488,114.1100120544),new qq.maps.LatLng(36.7345507280,114.1096687317),new qq.maps.LatLng(36.7336565046,114.1133165359),new qq.maps.LatLng(36.7231829982,114.1097760201),new qq.maps.LatLng(36.7265023429,114.1034245491),new qq.maps.LatLng(36.7282565500,114.1022658348),new qq.maps.LatLng(36.7283941332,114.1003775597),new qq.maps.LatLng(36.7274654419,114.1000986099),new qq.maps.LatLng(36.7275342343,114.0981030464),new qq.maps.LatLng(36.7280157788,114.0966224670),new qq.maps.LatLng(36.7266915240,114.0947556496),new qq.maps.LatLng(36.7278094030,114.0920305252),new qq.maps.LatLng(36.7322119680,114.0912365913),new qq.maps.LatLng(36.7322119680,114.0912365913),new qq.maps.LatLng(36.7356512963,114.0954422951),new qq.maps.LatLng(36.7364767122,114.0961503983),new qq.maps.LatLng(36.7360124168,114.0991115570)],strokeColor: '#ff0000',strokeWeight: 1,fillColor: new qq.maps.Color(220,220,220,0.3),map: map});}//设置经纬度function setLngLat(lng,lat) {$("#lng").val(lng);$("#lat").val(lat);}</script>
</body>
</html>

上述引用到图层请自行更改为本地图片的地址，查看效果。

腾讯地图经纬度选择和图层功能相关推荐

腾讯地图发送定位-打开定位功能
用到的是腾讯地图API,主要的功能: 1.选择地址发送(地图选址组件 https://lbs.qq.com/tool/component-picker.html) 2.实时地址静态图(https:// ...
百度地图经纬度转换腾讯地图经纬度
百度地图经纬度转腾讯地图经纬度 function bMapTransQQMap(lng,lat){ let x_pi = 3.14159265358979324 * 3000.0 / ...
百度经纬度转腾讯地图经纬度
也是参照的别人的,实际开发中使用的这个函数,传入百度的经纬度,输出腾讯地图经纬度 const bMapTransqqMap = (lng, lat) => {let x_pi = (3.1415 ...
腾讯地图api php经纬度转换地址,腾讯地图经纬度转换为百度地图经纬度
‍ 利用微信来获取用户当前的详细地址是非常方便的,但是利用微信获取到用户的经纬度转换为具体地址时,老是出现误差很大,因此,决心把腾讯地图经纬度转换城百度地图经纬度,然后再‍利用百度地图api来获取详细 ...
腾讯地图仿微信发送位置功能
以下内容转载自面糊的文章<模仿微信发送位置功能> 作者:面糊链接:https://www.jianshu.com/p/47b3ada2e36d 来源:简书著作权归作者所有.商业转载请联 ...
腾讯地图经纬度解析出地址
先封装好,在到页面中引用,到腾讯地图的开发者里面可以配置,能拿到key的值 //腾讯地图接口,逆解析地址 export default function(longitude, latitude) {r ...
获取当前经纬度php腾讯地图,PHP腾讯地图经纬度转百度地图经纬度
/** * 中国正常GCJ02坐标---->百度地图BD09坐标 * 腾讯地图用的也是GCJ02坐标 * @param double $lat 纬度 * @param double $lng 经 ...
php 百度转高德经纬度,PHP腾讯地图经纬度转百度地图经纬度
/** * 中国正常GCJ02坐标---->百度地图BD09坐标 * 腾讯地图用的也是GCJ02坐标 * @param double $lat 纬度 * @param double $lng 经 ...
js处理腾讯地图经纬度转换百度地图经纬度
}) /** * 坐标转换,腾讯地图转换成百度地图坐标 * lng 腾讯经度(pointy) * lat 腾讯纬度(pointx ...

腾讯地图经纬度选择和图层功能

效果展示：

功能实现：

腾讯地图经纬度选择和图层功能相关推荐

最新文章

热门文章