效果展示：
功能实现：
<%@ 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);
createGroundOverlay();
createPolygon();
}
function initMap() {
map = new qq.maps.Map(document.getElementById("allMap"),{
center : center,
zoom : 15,
mapTypeId : qq.maps.MapTypeId.HYBRID,
mapTypeControl:false,
});
marker = new qq.maps.Marker({
position: center,
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});
}
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>
上述引用到图层请自行更改为本地图片的地址，查看效果。
