效果展示:
功能实现:
<%@ 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-17
mapTypeId : qq.maps.MapTypeId.HYBRID, // 卫星地图模式
mapTypeControl:false,
});
//创建一个Marker
marker = 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>
上述引用到图层请自行更改为本地图片的地址,查看效果。