今天开始研究百度地图，主要是描绘各景点区域，然后根据区域的游客数量来判断当前景点的拥挤状态，不多说了，先看看效果图
这是展示效果，用了轮询的方法，每过几秒就访问一下接口，实时更新景区整体的人员流动情况。
代码如下（关键代码有注释，因为有接口，不能直接使用，可以参考）：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<%@ include file="common.jsp"%>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=${ak }"></script>
<!--加载计算工具-->
<script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinnero.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pageo.scss -->
<!-- ============================================================== -->
<div id="main-wrapper" data-navbarbg="skin6" data-theme="light"
data-layout="vertical" data-sidebartype="full"
data-boxed-layout="full">
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pageo.scss -->
<!-- ============================================================== -->
<%@ include file="leftmenu.jsp"%>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="container-fluid">
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<!-- Row -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-tname">景区实时概况
</h4>
<div id="allmap" style="height:500px;width:100%;">
</div>
</div>
</div>
</div>
</div>
<!-- Row -->
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Right sidebar -->
<!-- ============================================================== -->
<!-- .right-sidebar -->
<!-- ============================================================== -->
<!-- End Right sidebar -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
</div>
</body>
<script type="text/javascript">
//百度地图API功能
var map = new BMap.Map("allmap");
var f=1;
getallmap();
setInterval(function(){
f=0;
getallmap();
}, 6000)
function getallmap(){
$.ajax({
type : "post",
url : '${ctx}/scenic/getallmap',
data : {},
dataType : "json",
success : function(data) {
map.clearOverlays();
if(data.status==1){
var tli=data.obj.tli;
for(var i=0;i<tli.length;i++){
var o=tli[i];
if($.trim(o.lon).length>0&&$.trim(o.lat).length>0){
//添加自定义图片
var myIcon = new BMap.Icon("${ctx}/xcx/img/tourist_marker.png", new BMap.Size(52, 26));
var marker1 = new BMap.Marker(new BMap.Point(o.lon,o.lat), {
icon: myIcon
}); // 创建标注
map.addOverlay(marker1);
}
}
var li=data.obj.sli;
for(var i=0;i<li.length;i++){
var o=li[i];
if($.trim(o.points).length>0){
var arr=o.points.split('@');
var ps=[];
for(var j=0;j<arr.length;j++){
if(i==0&&j==0&&f==1){
//第一个多边形的第一个坐标为图标显示位置
var point = new BMap.Point(arr[j].split(',')[0],arr[j].split(',')[1] );
map.centerAndZoom(point, 16);
map.enableScrollWheelZoom();
}
ps[j]=new BMap.Point(arr[j].split(',')[0],arr[j].split(',')[1]);
}
//声明多边形对象
var polygon = new BMap.Polygon(ps, {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.2, fillColor:"red" }); //创建多边形
//计算游客坐标是否在多边形区域内
var tli=data.obj.tli;
//计算区域内人数
var pnum=0;
for(var k=0;k<tli.length;k++){
var ot=tli[k];
if($.trim(ot.lon).length>0&&$.trim(ot.lat).length>0){
var t=BMapLib.GeoUtils.isPointInPolygon(new BMap.Point(ot.lon,ot.lat),polygon);
if(t)pnum++;
}
}
var co="blue";var st="<b style='color:"+co+"'>空旷</b>";
if(pnum<=o.open_num){co="green";st="<b style='color:"+co+"'>空旷</b>";}
if(pnum>o.open_num&&pnum<=o.normal_num){co="blue";st="<b style='color:"+co+"'>正常</b>";}
if(pnum>o.normal_num&&pnum<=o.crowd_num){co="orange";st="<b style='color:"+co+"'>拥挤</b>";}
if(pnum>o.crowd_num){co="red";st="<b style='color:"+co+"'>爆满</b>";}
//申明障碍物标记点（多边形第一个坐标）
var marker = new BMap.Marker(new BMap.Point(arr[0].split(',')[0],arr[0].split(',')[1])) ;
map.addOverlay(marker);
//申明障碍物标记点（多边形第一个坐标）上添加文字说明
var label = new BMap.Label(o.tname+"<br>简介："+o.tdesc+"<br>游客人数："+pnum+"人<br>状态："+st,{offset:new BMap.Size(20,-10)});
marker.setLabel(label);
//声明多边形对象
polygon = new BMap.Polygon(ps, {strokeColor:co, strokeWeight:2, strokeOpacity:0.2, fillColor:co }); //创建多边形
//添加覆盖物
map.addOverlay(polygon);
}
}
} else{
if(f==1)alert(data.msg);
}
}
})
}
//单击获取点击的经纬度,测试使用
map.addEventListener("click",function(e){
console.log(e.point.lng);
console.log(e.point.lat);
});
</script>
</html>接下来是多边形绘制的功能，根据关键词搜索，定位到目标地址，然后绘制，先看看效果图
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<%@ include file="common.jsp"%>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=${ak}"></script>
<!--加载鼠标绘制工具-->
<script type="text/javascript" src="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
<link rel="stylesheet" href="//api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
<!--加载检索信息窗口-->
<script type="text/javascript" src="//api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="//api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.css" />
<style type="text/css">
#allmap {width: 100%; height:500px; overflow: hidden;}
#result {width:100%;font-size:12px;}
dl,dt,dd,ul,li{
margin:0;
padding:0;
list-style:none;
}
p{font-size:12px;}
dt{
font-size:14px;
font-family:"微软雅黑";
font-weight:bold;
border-bottom:1px dotted #000;
padding:5px 0 5px 5px;
margin:5px 0;
}
dd{
padding:5px 0 0 5px;
}
li{
line-height:28px;
}
</style>
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinnero.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pageo.scss -->
<!-- ============================================================== -->
<div id="main-wrapper" data-navbarbg="skin6" data-theme="light"
data-layout="vertical" data-sidebartype="full"
data-boxed-layout="full">
<!-- ============================================================== -->
<!-- Topbar header - style you can find in pageo.scss -->
<!-- ============================================================== -->
<%@ include file="leftmenu.jsp"%>
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="container-fluid">
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<!-- Row -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-tname">${o.tname }-标记景区地图<small style="margin-left: 20px;"><a data-toggle="modal" data-target="#myModal" href="javascript;" style="color:red;">使用说明</a></small>
<a href="${ctx }/scenic/page?pageNo=${pageNo}" style="font-size:10px;float:right;color:#888888;"><<返回列表</a>
</h4>
<div style="position: absolute;z-index:1;width:400px;margin-top: 10px;margin-left: 10px;">
<input id="suggestId" type="text" class="form-control" id="firstname" style="width: 99%;" placeholder="请输入关键词快速定位目标地址">
<span class="mdi mdi-magnify" style="position: absolute;z-index: 2;right: 30px;margin-top: -28px;"></span>
<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</div>
<div id="allmap" style="overflow:hidden;zoom:1;position:relative;">
<div id="map" style="height:100%;-webkit-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;"></div>
</div>
<div id="result">
<input type="button" value="清除标记" onclick="clearAll()" class="btn btn-danger btn-xs"/>
<input type="button" value="标记完成" onclick="savepoints()" class="btn btn-success btn-xs"/>
</div>
</div>
</div>
</div>
</div>
<!-- Row -->
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Right sidebar -->
<!-- ============================================================== -->
<!-- .right-sidebar -->
<!-- ============================================================== -->
<!-- End Right sidebar -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
<!-- ============================================================== -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Page wrapper -->
<!-- ============================================================== -->
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">使用说明</h4>
</div>
<div class="modal-body">
<h5>地图使用说明:</h5>
<p style="text-indent: 2em;">使用之前，请务必好好阅读该说明，方便您更快更好的使用该软件哦。使用说明如下：</p>
<p style="text-indent: 2em;"><- 滚动鼠标可缩放地图；</p>
<p style="text-indent: 2em;"><- 可以先搜索目标地址；</p>
<p style="text-indent: 2em;"><- 选择地图右上角的多边形图标来标记景点区域；</p>
<p style="text-indent: 2em;"><- 请双击鼠标结束地图的标记；</p>
<p style="text-indent: 2em;"><- 如果需要重新标记，请点击地图下面的‘清除标记’；</p>
<p style="text-indent: 2em;"><- 标记完成，请点击地图下面的‘标记完成’按钮来提交数据。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<form action="${ctx }/scenic/save_map?id=${o.id}&pageNo=${pageNo}" method="post" style="display: none;">
<input type="hidden" value="" name="points" id="s_points">
<input type="submit" id="s_sj">
</form>
</body>
<script type="text/javascript">
// 百度地图API功能,绘制多边形===============================
var map = new BMap.Map('map');
var poi=new BMap.Point(116.307852,40.057031);
map.centerAndZoom(poi, 16);
map.enableScrollWheelZoom();
var overlays = [];
var styleOptions = {
strokeColor:"red", //边线颜色。
fillColor:"red", //填充颜色。当参数为空时，圆形将没有填充效果。
strokeWeight: 3, //边线的宽度，以像素为单位。
strokeOpacity: 0.8, //边线透明度，取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度，取值范围0 - 1。
strokeStyle: 'solid' //边线的样式，solid或dashed。
}
//实例化鼠标绘制工具
var drawingManager = new BMapLib.DrawingManager(map, {
isOpen: false, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
drawingModes : [
//BMAP_DRAWING_MARKER,
//BMAP_DRAWING_CIRCLE,
// BMAP_DRAWING_POLYLINE,
BMAP_DRAWING_POLYGON,
// BMAP_DRAWING_RECTANGLE
]
},
circleOptions: styleOptions, //圆的样式
polylineOptions: styleOptions, //线的样式
polygonOptions: styleOptions, //多边形的样式
rectangleOptions: styleOptions //矩形的样式
});
var pp="";
//添加鼠标绘制工具监听事件，用于获取绘制结果
drawingManager.addEventListener("overlaycomplete", function(e) {
overlays.push(e.overlay);
var path = e.overlay.getPath();//Array<Point> 返回多边型的点数组
for(var i=0;i<path.length;i++){
console.log("lng:"+path[i].lng+"\n lat:"+path[i].lat);
pp+="["+path[i].lng+","+path[i].lat+"]";
}
$('#s_points').val(pp);
});
function clearAll() {
for(var i = 0; i < overlays.length; i++){
map.removeOverlay(overlays[i]);
}
overlays.length = 0
}
function savepoints(){
var len=overlays.length;
if(len==0){
alert('请标记区域');return ;
}
if(len>1){
alert('请标记一个区域');return ;
}
$('#s_sj').click();
}
//关键词检索===========================================
var ac = new BMap.Autocomplete( //建立一个自动完成的对象
{"input" : "suggestId"
,"location" : map
});
ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
var str = "";
var _value = e.fromitem.value;
var value = "";
if (e.fromitem.index > -1) {
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
value = "";
if (e.toitem.index > -1) {
_value = e.toitem.value;
value = _value.province + _value.city + _value.district + _value.street + _value.business;
}
str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
G("searchResultPanel").innerHTML = str;
});
var myValue;
ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
setPlace();
});
function setPlace(){
map.clearOverlays(); //清除地图上所有覆盖物
function myFun(){
var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); //添加标注
}
var local = new BMap.LocalSearch(map, { //智能搜索
onSearchComplete: myFun
});
local.search(myValue);
}
function G(id) {
return document.getElementById(id);
}
</script>
</html>
2710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
