1、demo.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- 修改弹窗 -->
<div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="addLabel">
<div class="modal-dialog" role="document" id="modaladd">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="addLabel"></h4>
</div>
<div class="modal-body" style="height: 100%;width:100%;padding: 2px;display: flex;">
<div id="divTable">
<table width="100%" border="0" cellspacing="5" cellpadding="0" style="margin-bottom:0px;border-collapse:separate;border-spacing:10px;">
</table>
</div>
<div id="divMap" style="position:relative;">
<div id="map_search" class="col-xs-4" style="position:absolute; top:12px; left:40px; z-index: 999;">
<div class="col-xs-8">
<input id="search_key" class="form-control" autocomplete="off"></input>
</div>
<div class="col-xs-4" style="padding-left: 0px;">
<button id="mapsearch" type="button" class="btn btn-info" onclick="mapsearch();">搜索</button>
</div>
</div>
<div id = "r-result" style="position: absolute;z-index: 999;left: 70px;top: 40px;">
<ul id="tablist" style="list-style-type:none;padding-left: 10px;">
</ul>
</div>
<div id="mapContent" style="width: 100%;height: 100%;"></div>
</div>
</div>
<div class="modal-footer" style="padding:5px;">
<button type="button" class="btn btn-default" data-dismiss="modal">取消<i class="ico ico-right fa fa-close"></i></button>
<button type="button" class="btn btn-primary" onclick="return saveData();">保存<i class="ico ico-right fa fa-save"></i></button>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="js/mapAreaMark.js"></script>
<script src="js/demo.js"></script>
2、demo.js
// 当前js可用于百度地图单个点的页面,以下变量根据实际情况进行赋值
var _place = "杭州市";
var _points = []; // 点位
var zoom = 16; // 默认缩放层级
// 根据点位反显区域
showPoints(result.points);
3、mapAreaMark.js
// 当前js可用于百度地图单个点的页面,以下变量根据实际情况进行赋值
/* var _place = "杭州市";
var _points = [];
var zoom = 16; // 默认缩放层级 */
// 调整窗体大小
function inincontent(){
$("#modaladd").attr("style", "height:" + ($(window).height() - 50) + "px;" + "width:" + ($(window).width()-20) + "px;margin:10px 0 0 10px;");
$("#divTable").attr("style", "max-height:" + ($("#modaladd").height() - 80) + "px;overflow-y:auto;");
$("#divMap").height($("#modaladd").height()-80);
$("#divMap").width($("#modaladd").width()-290);
}
window.onresize = function(){
inincontent();
};
// 初始化地图
$(function () {
inincontent();
initMap();
});
var map;
function initMap(){
map = new BMap.Map("mapContent",{enableMapClick:false}); // enableMapClick:false 关闭地图可点功能
map.centerAndZoom(_place, zoom);
setMapEvent();
addDrawingControl();
}
// 地图事件设置函数:
function setMapEvent() {
map.enableDragging(); // 开启拖拽
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
map.enableKeyboard(); //启用键盘上下左右键移动地图
map.disableDoubleClickZoom(); // 关闭鼠标双击放大
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
map.addControl(ctrl_nav);
// 添加清除区域控件
addClearControl();
}
var drawingControl = null;
function addClearControl(){
function ZoomControl() {
// 设置默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_TOP_RIGHT;
this.defaultOffset = new BMap.Size(121, 5);
}
// 通过JavaScript的prototype属性继承于BMap.Control
ZoomControl.prototype = new BMap.Control();
ZoomControl.prototype.initialize = function (map) {
// 创建一个DOM元素
var div = document.createElement("div");
// 添加文字说明
div.appendChild(document.createTextNode(""));
// 设置样式
div.style.width = "48px";
div.style.right = "121px";
div.style.boxShadow="1px 1px 3px rgba(0,0,0,0.3)";
div.style.height = "37px";
div.style.cursor = "pointer";
div.style.border = "1px solid rgb(180, 180, 180)";
div.style.backgroundColor = "white";
div.style.background = "url("+cms.util.uiServicePath+"/images/but/clear.png) no-repeat";
div.title = "清除";
div.id = "divClear";
// 绑定事件,点击一次放大两级
div.onclick = function (e) {
_points = [];
_overlay = null;
drawingControl.close();
map.clearOverlays();
drawingControl.open();
}
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
// 将DOM元素返回
return div;
}
// 创建控件实例并添加到地图当中
var myZoomCtrl = new ZoomControl();
map.addControl(myZoomCtrl);
}
//地图控件添加函数:
function addDrawingControl() {
var styleOptions = {
strokeColor: "blue", //边线颜色。
fillColor: "blue", //填充颜色。当参数为空时,圆形将没有填充效果。
strokeWeight: 3, //边线的宽度,以像素为单位。
strokeOpacity: 0.8, //边线透明度,取值范围0 - 1。
fillOpacity: 0.6, //填充的透明度,取值范围0 - 1。
strokeStyle: 'solid' //边线的样式,solid或dashed。
}
//向地图添加绘制工具
drawingControl = new BMapLib.DrawingManager(map, {
isOpen: true, //是否开启绘制模式
enableDrawingTool: true, //是否显示工具栏
enableCalculate: false,
drawingToolOptions: {
anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
offset: new BMap.Size(5, 5), //偏离值
scale: 0.8, //工具栏缩放比例
drawingModes: [BMAP_DRAWING_POLYGON]
},
polygonOptions: styleOptions //多边形的样式
});
//默认绘制区域
drawingControl.setDrawingMode(BMAP_DRAWING_POLYGON);
//添加鼠标绘制工具监听事件,用于获取绘制结果
drawingControl.addEventListener('overlaycomplete', overlaycomplete);
}
//绘画回调函数
var _overlay =null;
var overlaycomplete = function (e) {
if(_overlay != null){
swal("不可添加多个路线/区域!");
map.removeOverlay(e.overlay);
return false;
}
_overlay = e.overlay;
var arrs = [];
e.overlay.enableEditing();
arrs = e.overlay.getPath();
_points = arrs;
drawingControl.setDrawingMode();
// showWindowView(_toiId,arrs);
//更新事件
e.overlay.addEventListener("lineupdate",
function () {
var arrs =[];
this.enableEditing();
arrs=this.getPath();
// showWindowView(_toiId,arrs);
_points = arrs;
_overlay = e.overlay;
}
);
};
// 添加地图检索控件
function mapsearch(){
$("#tablist").find("li").remove();
$("#tablist").css("display","block");
var key = $("#search_key").val();
var options = {
onSearchComplete: function(results){
if (local.getStatus() == BMAP_STATUS_SUCCESS){
// $("#r-result").attr("style","display:block;")
// 判断状态是否正确
for (var i = 0; i < results.getCurrentNumPois(); i ++){
if(i < 7){ // 只取前七条数据
var poi = results.getPoi(i);
if(i%2==0){
document.getElementById("tablist").innerHTML+=
'<li style="background-color:lihghtblue;cursor: pointer;" onclick="setSearchMark(\'' + poi.point.lat+'\',\'' + poi.point.lng + '\',\'' + poi.address + '\');"><a class="text-info" style="font-size:8px">' + poi.title+'</a><br><span style="font-size:8px">地址:' + poi.address + '</span></li>';
}else{
document.getElementById("tablist").innerHTML+=
'<li style="background-color:lihghtgreen;cursor: pointer;" onclick="setSearchMark(\'' + poi.point.lat+'\',\'' + poi.point.lng + '\',\'' + poi.address + '\');"><a class="text-info" style="font-size:8px">' + poi.title+'</a><br><span style="font-size:8px">地址:' + poi.address + '</span></li>';
}
}
}
document.getElementById("r-result").style.backgroundColor="#fff"
}
}
};
var local = new BMap.LocalSearch(map, options);
local.search(key);
}
function setSearchMark(lat,lng,address){
if(lng != "" && lat != ""){
var new_point = new BMap.Point(lng,lat);
map.panTo(new_point);
$("#search_key").val(address);
}
addDrawingControl();
$("#tablist").css("display","none");
}
$('#add').on('hide.bs.modal', function () {
$("#tablist").css("display","none");
$("#search_key").val("");
map.clearOverlays();
_overlay = null;
});
// 当模态框对用户可见时触发
$('#add').on('shown.bs.modal', function () {
setMark();
});
// 设_place为中心点
function setMark(){
if(_overlay != null){
_overlay.addEventListener("lineupdate", function (el) {
var arrs =[];
this.enableEditing();
arrs=this.getPath();
_points = arrs;
_overlay = this;
});
map.addOverlay(_overlay);
_overlay.enableEditing();
var points = _overlay.getPath();
map.centerAndZoom(points[0], zoom);
_points = points;
}else{
map.clearOverlays();
addDrawingControl();
map.centerAndZoom(_place, zoom);
}
}
// enter键回车触发搜索按钮
document.onkeydown = function (e) {
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
$('#mapsearch').click();
}
}
// 反显区域
function showPoints(points){
var overlayspoint = [];
if(points != null && points.length > 0){
for(var i = 0; i < points.length; i++){
overlayspoint.push(new BMap.Point(points[i].lng, points[i].lat));
}
var polygon = new BMap.Polygon(overlayspoint, {
strokeColor: "blue",
fillColor: "blue",
strokeWeight: 3,
strokeOpacity: 0.8,
fillOpacity: 0.6,
strokeStyle: 'solid'
});
_overlay = polygon;
}
}