MultiZMap 功能說明
MultiZMap.js 本類方法功能大多使用 prototype 原型 實作,它是 ZMap 的多加載版本,主要用于類似 DWZ 這個 多标簽的 UI 的架構;
包含的功能有:軌迹回放,圈畫區域可編輯,判斷幾個坐标是否在一個圓圈内,生活服務查詢,
從經緯度擷取位址資訊,地圖工具包括測距,擷取面積,以積列印地圖,地圖全屏,實時路況,坐标是否在polygon區域内,
打車方案,經過中間途經點,添加地圖控件;
界面檢視 : http://www.cnblogs.com/editor/p/4080517.html
MultiZMap 關健代碼說明
1. 初始化代碼:
/**
* 百度地圖 api 功能整合, 用于類似于 DWZ 這種富UI架構
* @author Gloot
* @QQ 345268267
* @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 MultiZMap!');
function MultiZMap(opts) {
this.mapId = opts.mapId || 'mapId';
this.container = opts.container || 'container';
this.level = opts.level || 12;
this.lng = opts.lng;
this.lat = opts.lat;
this.addr = opts.addr;
this.callback = opts.callback;
this.mapObj = null;
var me = this;
this.enables = {
scrollWheel: function() {
me.mapObj.enableScrollWheelZoom();
}
};
this.disables = {
doubleClkZoom : function() {
me.mapObj.disableDoubleClickZoom();
}
};
this.controls = {
addNavi : function(opts) {
me.mapObj.addControl(new BMap.NavigationControl(opts));
},
addScale : function(opts) {
me.mapObj.addControl(new BMap.ScaleControl(opts));
},
addOverview : function(opts) {
me.mapObj.addControl(new BMap.OverviewMapControl(opts));
},
addMapType : function(opts) {
me.mapObj.addControl(new BMap.MapTypeControl(opts));
},
addGeolocation : function(opts) { //mobi
try {
me.mapObj.addControl(new BMap.GeolocationControl(opts));
}catch(e) {}
}
};
};
MultiZMap.defaults = {
city : '泉州',
level: 12
};
2. 建立加載地圖:
MultiZMap.prototype.create = function() {
var me = this;
me.mapObj = new BMap.Map(me.mapId);
if (me.lng && me.lat) {
var point = new BMap.Point(me.lng, me.lat);
me.mapObj.centerAndZoom(point, me.level);
} else if(me.addr){
me.mapObj.centerAndZoom(me.addr, me.level);
} else {
me.mapObj.centerAndZoom(MultiZMap.defaults.city, me.level);
}
me.callback && me.callback();
setTimeout(function() { //删除版權
$('#'+me.mapId).find('.anchorBL').remove();
}, 1000);
};
3. 使用方法:
var multiMap = new MultiZMap({
mapId: 'mapId',
container : 'container',
lng: 116.404,
lat: 39.915,
level: 15,
callback: function() {
//
}
});
multiMap.create();
4. html 代碼樣例:
1> 引用腳本:
<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="/devices/scripts/jquery-1.7.2.js"></script>
<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>
<script type="text/javascript" src="/devices/scripts/MultiZMap.js"></script>
2> 地圖容器塊:
<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="mapId" style="width:100%; height:640px;"></div>
</div>
上面地圖建立執行個體說明:
mapId: 為地圖容器;
container: 為地圖輔助容器,内嵌一個 panel div,用于全屏,或列印時顯示關閉及列印按鈕;
callback: 為地圖加載後的回調方法;
MultiZMap 部分輔助功能
1. dom 原生操作塊:
MultiZMap.dom = {
getE: function(eleId) {
return document.getElementById(eleId);
},
newE : function(eleId) {
var _ele = MultiZMap.dom.getE(eleId);
if (_ele) {
return _ele;
}
var ele = document.createElement('div');
MultiZMap.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;
}
};
2. 事件處理方法塊:
MultiZMap.prototype.addListener = function(type,callback) {
MultiZMap.events.add('Main', this.mapObj, type, callback);
};
/**
* 1. add => key: method_objName[x]
* eg: GuiJiPlay_polyline
* 2. ZMap.mapObj => key: Main
* 3. caches => key : method_objName[x]_type || Main_type
*/
MultiZMap.events = {
caches : {},
add : function(key,obj,type,callback) {
obj.addEventListener(type, callback);
this.caches[key+'_'+type] = {'obj':obj, 'type':type, 'callback':callback};
},
remove : function(key, type) {
this.removeByKey(key+'_'+type);
},
removeByKey : function(keytype) {
if (this.caches[key]) {
var json = this.caches[keytype];
json['obj'] && json['obj'].removeEventListener(json['type'], json['callback']);
delete this.caches[key];
}
},
clear : function () {
for (keytype in this.caches) {
this.removeByKey(keytype);
}
this.caches = {};
}
};
詳見位址: 百度地圖 api 功能封裝類 (ZMap.js) 新增管理事件功能 [源碼下載下傳]
MultiZMap 部分功能執行個體
1. 軌迹回放功能:
/**
* 軌迹回放
* @param opts
* @returns {ZMap.GuiJiPlay}
*/
MultiZMap.prototype.GuiJiPlay = function(multiMap, 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.multiMap = multiMap;
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;
}
};
MultiZMap.prototype.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 = me.multiMap.getPoint(one);
if (point && point instanceof BMap.Point) {
me.points.push(point);
}
}
me.potlen = me.points.length;
me.init();
};
MultiZMap.prototype.GuiJiPlay.prototype.init = function() {
var me = this;
me.clear();
me.centerPoint = new BMap.Point((me.points[0].lng + me.points[me.potlen - 1].lng) / 2, (me.points[0].lat + me.points[me.potlen - 1].lat) / 2);
me.multiMap.mapObj.panTo(me.centerPoint);
me.polyline = new BMap.Polyline(me.points, {strokeColor: "blue", strokeWeight: 5, strokeOpacity: 1});
me.multiMap.mapObj.addOverlay(me.polyline);
if (!me.marker.icon) {
me.marker.marker = me.multiMap.iconMarker(me.marker.icon, me.points[0]);
} else if (me.marker.label != '') {
me.marker.marker = me.multiMap.labelMarker(me.marker.label, me.points[0]);
} else {
me.marker.marker = me.multiMap.marker(me.points[0]);
}
};
MultiZMap.prototype.GuiJiPlay.prototype.reset = function() {
var me = this;
me.index = 0;
if (me.marker.marker && me.points.length > 0) {
me.marker.marker.setPosition(me.points[0]);
}
me.pause();
};
MultiZMap.prototype.GuiJiPlay.prototype.clear = function() {
var me = this;
if (me.polyline) {
me.multiMap.mapObj.removeOverlay(me.polyline);
}
me.clearStepline();
me.polyline = null;
me.runlines = [];
me.reset();
};
MultiZMap.prototype.GuiJiPlay.prototype.clearStepline = function() {
var me = this;
for (itm in me.runlines) {
var line = me.runlines[itm];
if (line instanceof BMap.Polyline) {
me.multiMap.mapObj.removeOverlay(line);
}
}
};
MultiZMap.prototype.GuiJiPlay.prototype.play = function(speed) {
var me = this;
if (speed)
me.speed = speed;
if (!me.isplay) {
me.clearStepline();
me.isplay = true;
}
var point = me.points[me.index];
if(me.index > 0) {
var cline = new BMap.Polyline([me.points[me.index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1});
me.multiMap.mapObj.addOverlay(cline);
me.runlines.push(cline);
}
me.marker.marker.setPosition(point);
me.index++;
if(true) {
me.multiMap.mapObj.panTo(point);
}
if(me.index < me.points.length) {
me.timer = window.setTimeout(function() {
me.play();
}, me.speed);
} else {
me.multiMap.mapObj.panTo(point);
}
};
MultiZMap.prototype.GuiJiPlay.prototype.pause = function() {
var me = this;
if(me.timer) {
window.clearTimeout(me.timer);
}
me.timer = null;
me.isplay = false;
};
使用方法:
var guiji ;
function guiJiMap() {
guiji = new multiMap.GuiJiPlay(multiMap, {
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);
}
MultiZMap 版本, 需要傳入目前 MultiZMap 的對象,用于在功能中擷取 mapObj地圖對象等,以及其他的一些方法;
執行回放: guiji.play(); 暫停: guiji.pause(); 重置: guiji.reset();
2.1. 地圖全屏 <1> [可使用于 非嵌入iframes 或 複雜結構]:
/**
* 地圖全屏
* @param opts
* @returns {ZMap.fullMap}
*/
MultiZMap.prototype.fullMap = function(multiMap, 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;
this.multiMap = multiMap;
};
MultiZMap.prototype.fullMap.prototype.toFull = function() {
var me = this;
var _width = $(window).width();
var _height = $(window).height();
var posi = $('#'+me.multiMap.container).css('position');
if (posi != 'absolute') {
$('#'+me.multiMap.container).css({
position:'absolute',
width: _width + 'px',
height: _height + 'px',
top : '0px',
left : '0px'
});
$('#'+me.multiMap.mapId).css('height', '100%');
me.multiMap.mapObj.width = _width;
me.multiMap.mapObj.height = _height;
me.multiMap.mapObj.reset();
me.fullfunc && me.fullfunc();
}
};
MultiZMap.prototype.fullMap.prototype.toOrigi = function() {
var me = this;
var posi = $('#'+me.multiMap.container).css('position');
if (posi == 'absolute') {
$('#'+me.multiMap.container).css({
position:'relative',
width: me.width + 'px',
height: me.height + 'px'
});
$('#'+me.multiMap.mapId).css('height', me.height + 'px');
me.multiMap.mapObj.width = me.width;
me.multiMap.mapObj.height = me.height;
me.multiMap.mapObj.reset();
me.origifunc && me.origifunc();
}
};
this.container 用來設定 容器 , 即上面的 div#container; this.mapId即是地圖容器id div#mapId;
var fullmap;
function fullMap() {
fullmap = new multiMap.fullMap(multiMap, {
container : 'container',
mapId : 'mapId',
fullfunc : function() {
$('#panel').css('display','block');
},
origifunc : function() {
$('#panel').css('display','none');
}
});
fullmap.toFull();
}
panel 的 X span 設定click 事件 :
$('#panel span').click(function() {
fullmap.toOrigi();
});
2.2, 地圖全屏 <2> [可用于任何 html 結構]
/**
* 地圖全屏 append 方式 [For Like Dwz MultiTabs UI]
* @multiMap
* @returns {ZMap.XfullMap}
*/
MultiZMap.prototype.XfullMap = function(multiMap, opts) {
this.width = opts.width || 700;
this.height = opts.height || 640;
this.fullfunc = opts.fullfunc;
this.origifunc = opts.origifunc;
this.multiMap = multiMap;
this.fullId = 'Full_'+multiMap.container;
};
MultiZMap.prototype.XfullMap.prototype.toFull = function(point) {
var me = this;
var _width = $(window).width();
var _height = $(window).height();
var fullMapObj = $('#'+me.fullId);
if (fullMapObj.length == 0) {
$("<div id='"+me.fullId+"'>")
.css({
position:'absolute',
width: _width + 'px',
height: _height + 'px',
top : '0px',
left : '0px'
})
.appendTo('body');
fullMapObj = $('#'+me.fullId);
}
fullMapObj.show();
fullMapObj.append($('#'+me.multiMap.container).children());
$('#'+me.multiMap.mapId).css('height', '100%');
me.multiMap.mapObj.width = _width;
me.multiMap.mapObj.height = _height;
me.multiMap.mapObj.reset();
me.multiMap.panTo(point);
me.fullfunc && me.fullfunc();
};
MultiZMap.prototype.XfullMap.prototype.toOrigi = function(point) {
var me = this;
var fullMapObj = $('#'+me.fullId);
if (fullMapObj.length > 0) {
$('#'+me.multiMap.container).append(fullMapObj.children());
fullMapObj.hide();
}
$('#'+me.multiMap.mapId).css('height', me.height + 'px');
me.multiMap.mapObj.width = me.width;
me.multiMap.mapObj.height = me.height;
me.multiMap.mapObj.reset();
me.origifunc && me.origifunc();
me.multiMap.panTo(point);
};
var fullmap;
function fullMap() {
fullmap = new multiMap.XfullMap(multiMap, {
//container : 'container',
//mapId : 'mapId',
fullfunc : function() {
$('#panel').css('display','block');
},
origifunc : function() {
$('#panel').css('display','none');
}
});
fullmap.toFull();
}
使用方法與第一種方式,一模一樣;
3. 公交方案, 途經點:
/***
* 公交方案, 途經點
* @returns {ZMap.crossPointTraffic}
*/
MultiZMap.prototype.crossPointTraffic = function(multiMap, opts) {
this.driving = new BMap.DrivingRoute(multiMap.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.multiMap = multiMap;
this.init();
};
MultiZMap.prototype.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);
me.multiMap.mapObj.addOverlay(polyline);
var potEnd = pts[pts.length - 1];
if (me.start && me.end) {
me.mkrType == 'Label' ? me.multiMap.labelMarker(me.icon.start, pts[0]) : me.multiMap.iconMarker(me.icon.start, pts[0]);
me.mkrType == 'Label' ? me.multiMap.labelMarker(me.icon.end, potEnd) : me.multiMap.iconMarker(me.icon.end, potEnd);
} else {
if (me.start) {
me.mkrType == 'Label' ? me.multiMap.labelMarker(me.icon.start, pts[0]) : me.multiMap.iconMarker(me.icon.start, pts[0]);
me.mkrType == 'Label' ? me.multiMap.labelMarker(me.icon.pass, potEnd) : me.multiMap.iconMarker(me.icon.pass, potEnd);
} else if (me.pass) {
me.mkrType == 'Label' ? me.multiMap.labelMarker(me.icon.pass, potEnd) : me.multiMap.iconMarker(me.icon.pass, potEnd);
} else {
me.mkrType == 'Label' ? me.multiMap.labelMarker(me.icon.end, potEnd) : me.multiMap.iconMarker(me.icon.end, potEnd);
}
}
});
};
MultiZMap.prototype.crossPointTraffic.prototype.reset = function() {
var me = this;
if (me.polylines.length > 0) {
for (itm in me.polylines){
var line = me.polylines[itm];
me.multiMap.mapObj.removeOverlay(line);
}
me.polylines = [];
};
me.start = false;
me.pass = false;
me.end = false;
};
MultiZMap.prototype.crossPointTraffic.prototype.search = function(start, end) {
var me = this;
me.driving.search(start, end);
};
function crossPointMap() {
var addrs = ["天安門", "三裡屯", "百度大廈"];
multiMap.centerCity("北京市", 15);
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 multiMap.crossPointTraffic(multiMap, opts);
drive.search(addrs[i-1], addrs[i]);
multiMap.enables.scrollWheel();
}
}
三裡屯,就是要經過的點;
完整執行個體參考: 百度地圖整合功能分享修正版[ZMap.js] 執行個體源碼!
執行個體源碼
源碼下載下傳:https://files.cnblogs.com/editor/MultiZMap.rar
本項目源碼采用 SpringMvc+Maven搭建,src/main/webapps 下即是 腳本源碼;