百度地图整合功能分享修正版[ZMap.js] 实例源码!

时间:2023-03-08 16:22:50

ZMap 功能说明

ZMap 是学习百度地图 api 接口,开发基本功能后整的一个脚本类,本类方法功能大多使用 prototype 原型 实现;

包含的功能有:轨迹回放,圈画区域可编辑,判断几个坐标是否在一个圆圈内,生活服务查询,
从经纬度获取地址信息,地图工具包括测距,获取面积,以积打印地图,地图全屏,实时路况,坐标是否在polygon区域内,
打车方案,经过中间途经点,添加地图控件;

修改跟新增一些功能;

/**
* 百度地图 api 功能整合
* @author Gloot
* @email glootz@gmail.com
* @QQ 345268267
* @blog http://www.cnblogs.com/editor
* @dependency :<link href="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.css" rel="stylesheet" type="text/css" />
* <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2&services=true"></script>
* <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"></script>
* <script type="text/javascript" src="http://api.map.baidu.com/library/TrafficControl/1.4/src/TrafficControl_min.js"></script>
* <script type="text/javascript" src="/devices/scripts/GeoUtils.js"></script>
*/
console && console.log('In Zmap');
ZMap = {
mapObj : null,
mapId : '',
opts: ''
};

新增 dom 基本操作;

ZMap.dom = {
getE: function(eleId) {
return document.getElementById(eleId);
},
newE : function(eleId) {
var _ele = ZMap.dom.getE(eleId);
if (_ele) {
return _ele;
} var ele = document.createElement('div');
ZMap.dom.set(ele, 'id', eleId);
return ele;
},
after : function(newE, targetE) {
targetE.parentNode.lastChild == targetE ? targetE.parentNode.appendChild(newE) : targetE.parentNode.insertBefore(newE, targetE.nextSibling);
},
set : function(target,attr,val) {
target.setAttribute(attr, val);
},
remove: function(target) {
target.parentNode.removeChild(target);
},
getEbyCls : function(clsName, tagName) {
var ClassElements = [];
selElements = document.getElementsByTagName(tagName); for (var i = 0; i < selElements.length; i++) {
if (selElements[i].className == clsName) {
ClassElements[ClassElements.length] = selElements[i];
}
}
return ClassElements;
}
};

界面查看 : http://www.cnblogs.com/editor/p/4080517.html

功能介绍

1. 轨迹回放

/**
* 轨迹回放
* @param opts
* @returns {ZMap.GuiJiPlay}
*/
ZMap.GuiJiPlay = function(opts, flag) {
if (flag) {
ZMap.createMap(ZMap.mapId, ZMap.opts);
}
opts = opts || {};
this.points = [];
this.centerPoint = null;
this.index = 0;
this.timer = null;
this.polyline = null;
this.runlines = [];
this.speed = 1000;
this.isplay = false; this.potlen = 0;
this.marker = {
marker : null,
label: '',
icon: {
width: 50,
height: 50
}
}; if (opts.label && opts.label != '') {
this.marker.label = opts.label;
} if (opts.icon) {
this.marker.icon = opts.icon;
}
};

设置轨迹线路:

ZMap.GuiJiPlay.prototype.set = function(pointArr) {
var me = this; me.points = [];
for (itm in pointArr) {
var one = pointArr[itm]; if (typeof one != "string")
continue; var point = ZMap.getPoint(one); if (point && point instanceof BMap.Point) {
me.points.push(point);
}
} me.potlen = me.points.length; me.init();
};

使用方法:

var guiji ;
function guiJiMap() {
guiji = new ZMap.GuiJiPlay({
marker: {
marker: null,
label:'车'
}
});
var pointsStr = '116.401072,39.913859-116.401242,39.913859-116.401431,39.913873-116.401844,39.913886-116.402257,39.9139-116.402608,39.9139-116.402994,39.913914-116.403416,39.913928-116.403784,39.913942-116.404135,39.913949-116.404557,39.913962-116.405015,39.913997-116.405455,39.914004-116.405815,39.914011-116.406228,39.914045-116.406587,39.914045-116.406955,39.914059-116.407719,39.914052-116.40886,39.914108-116.408788,39.914101-116.409192,39.914101-116.409462,39.914108-116.409848,39.914115-116.410297,39.914163-116.410953,39.914239';
var arrs = pointsStr.split('-');
guiji.set(arrs);
}

执行回放: guiji.play(); 暂停: guiji.pause(); 重置: guiji.reset();

2. 圈画区域,并可编辑

/**
* 圈画区域,并可编辑
* @param flag
* @returns {ZMap.lineArea}
*/
ZMap.lineArea = function(opts, flag) {
if (flag) {
ZMap.createMap(ZMap.mapId, ZMap.opts);
} this.polygon = null;
this.historys = [];
this.callback = opts.callback || null;
this.linecolor = opts.color || 'blue';
this.draw = true;
this.init();
};

使用方法:

var linearea;
function lineAreaMap() {
linearea = new ZMap.lineArea({
color:'red',
callback : function(points, gon) { }
});
}

设置编辑: linearea.edit(); 关闭编辑: linearea.disable();

3. 是否在圆圈内:

/**
* 是否在圆圈范围内
* @param flag
* @returns {Array}
*/
ZMap.inCircleSearch = function(flag) {
if (flag) {
ZMap.createMap(ZMap.mapId, ZMap.opts);
} this.point = null;
this.distance = 500;
this.show = true;
this.circle = null;
this.inCircles = [];
this.markers = [];
this.markered = false;
}; ZMap.inCircleSearch.prototype.set = function(opts) {
var me = this; me.clear(); if (me.circle) {
ZMap.mapObj.removeOverlay(me.circle);
}
me.distance = opts.distance || 500;
me.point = opts.point || ZMap.mapObj.getCenter();
me.show = opts.show || true;
me.callback = opts.callback || function() {};
me.markered = opts.markered || false; if (me.show) {
me.circle = new BMap.Circle(me.point, me.distance ,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5});
ZMap.mapObj.addOverlay(me.circle);
}
};

使用方法 :

function circleSearchMap() {
var points = ['116.40329,39.915851', '116.403757,39.915816', '116.403722,39.915284', '116.40303,39.91482', '116.402455,39.915138','116.402105,39.915464','116.403308,39.915706','116.405392,39.914654']; ZMap.getMap().setZoom(18);
var inC = new ZMap.inCircleSearch();
inC.set({
distance: 100,
markered : true,
show : true
});
inC.search(points);
}

//points 是否检测的点; set(opts) 方法, opts 可以接收 point 参数,表示中心点, 如果没有, 则为 地图中心点; opts.show 是否显示圆圈, markered 是否显示检测点的 marker;

4. 生活服务搜索

/**
* 生活服务查询
* @param opts
* @param flag
* @returns {ZMap.liveSearch}
*/
ZMap.liveSearch = function(opts, flag) {
if (flag) {
ZMap.createMap(ZMap.mapId, ZMap.opts);
} this.local = new BMap.LocalSearch(ZMap.mapObj, {renderOptions: {map: ZMap.mapObj, autoViewport: true}});
this.callback = opts.callback;
this.init();
}; ZMap.liveSearch.prototype.init = function(){
var me = this;
me.local.setSearchCompleteCallback(function(rs) {
if (me.local.getStatus() == BMAP_STATUS_SUCCESS) {
//var poi = rs.getPoi(0);
//var point = poi.point;
me.callback && me.callback(rs);
}
});
}; ZMap.liveSearch.prototype.search = function(items) {//items 数组 ['酒店','银行'...]
var me = this;
var bo = ZMap.mapObj.getBounds();
me.local.searchInBounds(items ,bo);
};

使用方法:

var livesearch;
function liveSearchMap() {
livesearch = new ZMap.liveSearch({
callback : function(rs) {
$('#spn').html('查询完毕');
}
});
}

查询为: livesearch.search(['酒店', '银行', ...]);

5. 地图工具:

/**
* 地图工具,测距,面积,打印
*/
ZMap.tools = {
distance : {
open : function() {
if (!this.disTool) {
this.disTool = new BMapLib.DistanceTool(ZMap.mapObj);
}
this.disTool.open();
},
close: function() {
if (this.disTool) {
this.disTool.close();
}
}
},
area : function(pointArr, flag) {
if (flag) {
ZMap.createMap(ZMap.mapId, ZMap.opts);
} var historys = []; for (itm in pointArr) {
var one = pointArr[itm]; var _point = null;
try {
eval("_point=new BMap.Point("+one+")");
}catch(e) {} if (_point) {
historys.push(_point);
}
} var _polygon = new BMap.Polygon(historys, {strokeColor: "blue", strokeWeight: 5, strokeOpacity: 0.5}); ZMap.mapObj.addOverlay(_polygon); ZMap.addListener(_polygon, 'click', function(e) {
var resultArea = BMapLib.GeoUtils.getPolygonArea(_polygon); var result = "面积为: " + resultArea.toFixed(2) + "平方米";
ZMap.msgAlert({width:200, height:150, title:'区域面积'},result, ZMap.mapObj, e.point);
});
},
print : function(opts) {
var pot = ZMap.mapObj.getCenter();
var zoom = ZMap.mapObj.getZoom(); opts.width = opts.width || 700;
opts.height = opts.height || 600; window.open(opts.url + '?lng='+pot.lng+'&lat='+pot.lat+'&zoom='+zoom, '打印地图', "height="+opts.height+", width="+opts.width+", top=10, left=10,toolbar=yes, menubar=no, scrollbars=yes, resizable=yes, location=no, status=no");
}
};

使用方法:

1>. 测距: ZMap.tools.distance.open(); 双击结束:

2>. 面积:

var arrs = ['116.403722,39.915284', '116.40303,39.91482', '116.402455,39.915138','116.402105,39.915464','116.403308,39.915706','116.405392,39.914654'];
ZMap.tools.area(arrs);

3>. 打印: ZMap.tools.print({url: '/devices/print.do'});

6. 地图全屏:

/**
* 地图全屏
* @param opts
* @returns {ZMap.fullMap}
*/
ZMap.fullMap = function(opts) {
this.width = opts.width || 700;
this.height = opts.height || 640;
this.container = opts.container;
this.mapId = opts.mapId;
this.fullfunc = opts.fullfunc;
this.origifunc = opts.origifunc;
}; ZMap.fullMap.prototype.toFull = function() {
var me = this;
var _width = $(window).width();
var _height = $(window).height();
var posi = $('#'+me.container).css('position'); if (posi != 'absolute') {
$('#'+me.container).css({
position:'absolute',
width: _width + 'px',
height: _height + 'px'
}); $('#'+me.mapId).css('height', '100%'); ZMap.mapObj.width = _width;
ZMap.mapObj.height = _height; ZMap.mapObj.reset(); me.fullfunc && me.fullfunc();
}
}; ZMap.fullMap.prototype.toOrigi = function() {
var me = this;
var posi = $('#'+me.container).css('position'); if (posi == 'absolute') {
$('#'+me.container).css({
position:'relative',
width: me.width + 'px',
height: me.height + 'px'
}); $('#'+me.mapId).css('height', me.height + 'px'); ZMap.mapObj.width = me.width;
ZMap.mapObj.height = me.height; ZMap.mapObj.reset(); me.origifunc && me.origifunc();
}
};

地图 html 结构:

<div id="container" style="margin:0px auto; width:700px; height:600px; padding-bottom: -40px; overflow: hidden;">
<div id="panel" style="height:30px; width:100%; display:none; background: #6485ed;">
<span>X</span>
</div>
<div id="istmap" style="width:100%; height:640px;"></div>
</div>

this.container 用来设置 容器 , 即上面的 div#container; this.mapId即是地图容器id div#istmap;

panel 用于地图全屏时,返回原始状态;

使用方法:

var fullmap;
function fullMap() {
fullmap = new ZMap.fullMap({
container : 'container',
mapId : 'istmap',
fullfunc : function() {
$('#panel').css('display','block');
},
origifunc : function() {
$('#panel').css('display','none');
}
}); fullmap.toFull();
}

panel 的 X span 设置click 事件 :

$('#panel span').click(function() {
fullmap.toOrigi();
});

7. 实时路况:

/**
* 实时路况
* @returns {ZMap.runtimeTraffic}
*/
ZMap.realtimeTraffic = function() {
this.trafic = new BMapLib.TrafficControl({
showPanel : true //true false 没啥区别
}); ZMap.mapObj.addControl(this.trafic);
}; ZMap.realtimeTraffic.prototype.show = function() {
var me = this;
me.trafic.showTraffic();
}; ZMap.realtimeTraffic.prototype.hide = function() {
var me = this;
me.trafic.hideTraffic();
};

使用方法:

var realtrafic ;
function realTrafficMap() {
realtrafic = new ZMap.realtimeTraffic();
realtrafic.show();
}

关闭: realtrafic.hide();

8. 公交方案, 途经点:

/***
* 公交方案, 途经点
* @returns {ZMap.crossPointTraffic}
*/
ZMap.crossPointTraffic = function(opts) {
this.driving = new BMap.DrivingRoute(ZMap.mapObj, {renderOptions:{enableDragging: true,autoViewport: true}}); //renderOptions 下 map 会出现 起点,终点图标
this.start = opts.start;
this.end = opts.end;
this.pass = opts.pass;
this.icon = opts.icon;
this.mkrType = opts.type || 'Label';
this.polylines = []; this.init();
}; ZMap.crossPointTraffic.prototype.init = function() {
var me = this; //me.reset(); me.driving.setSearchCompleteCallback(function() {
var pts = me.driving.getResults().getPlan(0).getRoute(0).getPath();
var polyline = new BMap.Polyline(pts); me.polylines.push(polyline);
ZMap.mapObj.addOverlay(polyline); if (me.start && me.end) {
me.mkrType == 'Label' ? ZMap.labelMarker(me.icon.start, pts[0]) : ZMap.iconMarker(me.icon.start, pts[0]);
me.mkrType == 'Label' ? ZMap.labelMarker(me.icon.end, pts[pts.length - 1]) : ZMap.iconMarker(me.icon.end, pts[pts.length - 1]);
} else {
if (me.start) {
me.mkrType == 'Label' ? ZMap.labelMarker(me.icon.start, pts[0]) : ZMap.iconMarker(me.icon.start, pts[0]);
me.mkrType == 'Label' ? ZMap.labelMarker(me.icon.pass, pts[pts.length - 1]) : ZMap.iconMarker(me.icon.pass, pts[pts.length - 1]);
} else if (me.pass) {
me.mkrType == 'Label' ? ZMap.labelMarker(me.icon.pass, pts[pts.length - 1]) : ZMap.iconMarker(me.icon.pass, pts[pts.length - 1]);
} else {
me.mkrType == 'Label' ? ZMap.labelMarker(me.icon.end, pts[pts.length - 1]) : ZMap.iconMarker(me.icon.end, pts[pts.length - 1]);
} }
});
}; ZMap.crossPointTraffic.prototype.reset = function() {
var me = this;
if (me.polylines.length > 0) {
for (itm in me.polylines){
var line = me.polylines[itm];
ZMap.mapObj.removeOverlay(line);
} me.polylines = [];
};
me.start = false;
me.pass = false;
me.end = false;
}; ZMap.crossPointTraffic.prototype.search = function(start, end) {
var me = this;
me.driving.search(start, end);
};

使用方法:

function crossPointMap() {
var addrs = ["*", "三里屯", "百度大厦"]; var drlen = addrs.length;
for (var i=0;i<drlen;i++) {
if (i==0) {
continue;
} var opts = {};
if (drlen == 2) {
opts.start = true;
opts.end = true;
} else {
if ((i-1) == 0) {
opts.start = true;
}
else if (i == (drlen-1)) {
opts.end = true;
}else {
opts.pass = true;
}
} opts.icon = {};
opts.icon.start = '起点';
opts.icon.end = '终点';
opts.icon.pass = '途经点'; var drive = new ZMap.crossPointTraffic(opts);
drive.search(addrs[i-1], addrs[i]); ZMap.enables.scrollWheel();
}
}

三里屯,就是要经过的点;

实例源码

源码下载:http://files.cnblogs.com/editor/baiduMap2.rar

本项目源码采用 SpringMvc+Maven搭建,src/main/webapps 下即是 脚本源码;