/**
* 百度地图使用工具类-v1.5
*
* @author boonya
* @date 2013-7-7
* @address Chengdu,Sichuan,China
* @email boonya@sina.com
* @company KWT.Shenzhen.Inc.com
* @notice 有些功能需要加入外部JS库才能使用，另外还需要申请地图JS key .
* 申请地址：http://developer.baidu.com/map/apply-key.htm
* @update log: 添加覆盖物聚合显示,设置地图bounds不起作用，需要使用Viewport对象来完成，此对象存储的是地图的中心点和缩放等级
* //提示代码如下：只要获取到中心点和缩放等级，地图就可以定位和缩放到适合的等级去显示了
* //var viewport=map.getViewport();
* //var pointCenter=viewport.center;
* //var zoom=viewport.zoom
*/
(function() {
window.map={};
window.Geocoder={};
window.BmapUtils={};
window.infoWindow={};
window.LocalSearch={};
/**
* 百度地图基础操作
*/
BmapUtils = {
/**
* 全局变量
*/
CONSTANT : {
DYNAMIC_CITY:"",
CONTAINER : "map",
DEFAULT_ZOOM : 18,
DEFAULT_INIT_ZOOM : 12,
SEARCH_PANEL:"r-result",
LINE_MAKERS_SHOW:false,
FEATURES:{}
},
/**
* 获取地图视图范围坐标
* @returns {object} 范围对象
*/
getBounds : function() {
if (map) {
var bs = map.getBounds(); // 获取可视区域
var bssw = bs.getSouthWest(); // 可视区域左下角
var bsne = bs.getNorthEast(); // 可视区域右上角
return {
leftBottom : bssw,
rightTop : bsne
};
}
return null;
},
/**
* 设置一个集合点的Bounds
* @param points
*/
toBounds:function(points){
if(points){
var bounds =new BMap.Bounds();
for ( var k = 0; k < points.length; k++) {
var point =points[k];
bounds.extend(point);
}
var point=bounds.getCenter();
map.setCenter(point);
}
},
/**
* 设置车辆图标
* @param carImgUrl {string} 车辆图片路径
* @returns {BMap.Icon} 百度Icon图标对象
*/
getIcon : function(carImgUrl,width,height) {
var myIcon = new BMap.Icon(carImgUrl, new BMap.Size(width||32, height||32), { // 小车图片
// offset: new BMap.Size(0, -5), //相当于CSS精灵
imageOffset : new BMap.Size(0, 0)// 图片的偏移量。为了是图片底部中心对准坐标点。
});
return myIcon;
},
/**
* 初始化普通地图
* @param lon {number} 经度
* @param lat {number} 纬度
* @param zoom {number} 缩放等级
*/
initCommonMap : function(lon, lat, zoom) {
map = new BMap.Map(this.CONSTANT.CONTAINER,{enableMapClick:false});
var point = new BMap.Point(lon || 116.331398, lat || 39.897445); // 默认地图初始化位置为北京
map.centerAndZoom(point, zoom || this.CONSTANT.DEFAULT_INIT_ZOOM);
},
/**
* 初始化3D地图
* @param lon {number} 经度
* @param lat {number} 纬度
* @param cityname {string} 城市名称
* @param zoom {number} 缩放等级
*/
my3Dmap : function(lon, lat, cityname, zoom) {
map = new BMap.Map(this.CONSTANT.CONTAINER, {
mapType : BMAP_PERSPECTIVE_MAP,
enableMapClick:false
});
var point = new BMap.Point(lon || 116.4035, lat || 39.915);
map.setCurrentCity(cityname || "北京"); // 设置地图显示的城市 此项是必须设置的
map.centerAndZoom(point, zoom || this.CONSTANT.DEFAULT_INIT_ZOOM);
map.enableScrollWheelZoom(true);
},
/**
* 初始化卫星地图
* @param lon {number} 经度
* @param lat {number} 纬度
* @param zoom {number} 缩放等级
*/
satelliteMap : function(lon, lat, zoom) {
map = new BMap.Map(this.CONSTANT.CONTAINER, {
mapType : BMAP_HYBRID_MAP,
enableMapClick:false
}); // 设置卫星图为底图
var point = new BMap.Point(lon || 116.4035, lat || 39.915);
map.centerAndZoom(point, zoom || this.CONSTANT.DEFAULT_INIT_ZOOM);
map.enableScrollWheelZoom(true);
},
/**
* 初始化地图（含普通操作控件）
*/
initBaiduMap:function(anchor){
BmapUtils.initCommonMap(); // 初始化普通地图
map.enableDragging(); // 开启拖拽
// map.disableDragging(); // 禁止拖拽
// map.enableInertialDragging(); // 开启惯性拖拽
map.enableScrollWheelZoom(true); // 允许鼠标滚轮缩放地图
var navigtionControl=anchor||{anchor : BMAP_ANCHOR_TOP_LEFT};
map.addControl(new BMap.NavigationControl(navigtionControl)); // 添加默认缩放平移控件
map.addControl(new BMap.ScaleControl({
anchor : BMAP_ANCHOR_BOTTOM_LEFT
})); // 左下角比例尺控件
map.addControl(new BMap.OverviewMapControl()); // 添加默认缩略地图控件(鹰眼)
var cr = new BMap.CopyrightControl({
anchor : BMAP_ANCHOR_BOTTOM_LEFT
});
map.addControl(cr); // 添加版权控件（支持自定义版权控件）
window.map=map;
},
/**
* 初始化小地图
* @param type {number} 平移缩放类型：平移和缩放1,只有平移2,只有缩放3,默认只有缩放
* @param position {number} 停靠的位置：上左1，上右2，下左3，下右4,默认为上左
*/
smallMap:function(type,position){
BmapUtils.initCommonMap(); // 初始化普通地图
map.enableDragging(); // 开启拖拽
map.enableScrollWheelZoom(true); // 允许鼠标滚轮缩放地图
map.addControl(new BMap.ScaleControl({
anchor : BMAP_ANCHOR_BOTTOM_LEFT
})); // 左下角比例尺控件
map.addControl(new BMap.OverviewMapControl()); // 添加默认缩略地图控件(鹰眼)
var cr = new BMap.CopyrightControl({
anchor : BMAP_ANCHOR_BOTTOM_LEFT
});
var navigtion_type="",where="";
//平移导航的类型
switch (type) {
case 1:
navigtion_type=BMAP_NAVIGATION_CONTROL_SMALL;
break;
case 2:
navigtion_type=BMAP_NAVIGATION_CONTROL_PAN;
break;
case 3:
navigtion_type=BMAP_NAVIGATION_CONTROL_ZOOM;
break;
default:
navigtion_type=BMAP_NAVIGATION_CONTROL_ZOOM;
break;
}
//平移导航停靠的位置
switch (position) {
case 1:
where=BMAP_ANCHOR_TOP_LEFT;
break;
case 2:
where=BMAP_ANCHOR_TOP_RIGHT;
break;
case 3:
where=BMAP_ANCHOR_BOTTOM_LEFT;
break;
case 4:
where=BMAP_ANCHOR_BOTTOM_LEFT;
break;
default:
where=BMAP_ANCHOR_TOP_LEFT;
break;
}
map.addControl(cr); // 添加版权控件（支持自定义版权控件）
map.addControl(new BMap.NavigationControl({anchor: where, type: navigtion_type}));
LocalSearch=new BMap.LocalSearch(map, {
renderOptions:{map: map,panel:this.CONSTANT.SEARCH_PANEL}
});
window.map=map;
},
/**
* IP定位城市
*/
ipLocateCity : function() {
var myFun = function(result) {
var cityName = result.name;
map.setCenter(cityName);
};
var myCity = new BMap.LocalCity();
myCity.get(myFun);
},
/**
* 设置城市
* @param result IP查询结果
*/
setCity:function(result){
BmapUtils.CONSTANT.DYNAMIC_CITY=result.name;
},
/**
* IP自动获取城市名称
*/
getDynamicCity:function(){
var myCity = new BMap.LocalCity();
myCity.get(this.setCity);
return this.CONSTANT.DYNAMIC_CITY;
},
/**
* 坐标点地址解析
* @param point 经纬度点对象
*/
getGeocoderInfoByPoint:function(point){
Geocoder.getLocation(point, function(rs) {
var addComp = rs.addressComponents;
Geocoder.point=point;
Geocoder.city=addComp.city;
Geocoder.address=addComp.province + " " + addComp.city + " "
+ addComp.district + " " + addComp.street+ " " + addComp.streetNumber;
});
return Geocoder;
},
/**
* 平移地图
* @param lon {number} 经度
* @param lat {number} 纬度
*/
panTo : function(lon, lat) {
var point = new BMap.Point(lon, lat);
map.panTo(point);
},
/**
* 平移地图
* @param lon {number} 经度
* @param lat {number} 纬度
*/
panToPoint: function(point) {
map.panTo(point);
},
/**
* 创建信息窗口
* @param title {string} 标题
* @param message {string} 发送短信消息内容
* @param divContent {string} 文本内容
* @returns {BMap.InfoWindow} 信息对象
*/
createInfoWindow:function(title,message,divContent){
var sendMessage=false;
if(message) sendMessage=true;
var opts = {
width : 97, // 信息窗口宽度
height : 95, // 信息窗口高度
title : title, // 信息窗口标题
enableMessage : sendMessage, // 设置允许信息窗发送短息
message : message // 允许发送短信
};
window.infoWindow = new BMap.InfoWindow(divContent, opts); // 创建信息窗口对象
return window.infoWindow;
},
/**
* 打开一个信息窗口
* @param title {string} 信息标题
* @param message {string} 需要发送的信息
* @param divContent {string} 信息内容
* @param point {object} 百度坐标点
*/
addInfoWindow : function(title,message,divContent,point,isCenter) {
window.infoWindow=this.createInfoWindow(title, message, divContent);
window.infoWindow.enableAutoPan();
map.openInfoWindow(window.infoWindow, point); // 开启信息窗口
if(isCenter)map.setCenter(point);
},
/**
* 获取地图上打开的信息窗口
* @returns object||null
*/
getOpendInfoWindow:function(){
return map.getInfoWindow();
},
/**
* 重绘信息窗口
* @param 信息窗口对象
*/
redrawInfoWindow:function(){
window.infoWindow.redraw();
},
/**
* 居中和缩放
* @param point {object} 百度坐标点
* @param zoomLevel {number} 缩放等级
*/
centerAndZoom:function(point,zoomLevel){
map.setCenter(point);
map.setZoom(zoomLevel);
},
/**
* 设置最适合的显示级别和地图中心(覆盖物聚合)
* @param points
*/
getViewport:function(points){
if(points){
var options={
enableAnimation:true,
margins:[5,5,5,5]
};
var viewport =map.getViewport(points,options);
var centerPoint=viewport.center;
var zoom=viewport.zoom;
map.setCenter(centerPoint);
map.setZoom(zoom);
}
}
}; /**
* 百度要素操作工具
*/
BmapUtils.tootls = {
/**
* 越界控制
*/
handleFeatureInBounds:function(point) {
var bounds =map.getBounds();
if (!bounds.containsPoint(point)){
map.panTo(point); // 是否在视图范围之内，若跃出视图则平滑居中
}
},
/**
* 测量两点的距离
* @param pointA 百度坐标点A
* @param pointB 百度坐标点B
* @return {number} 距离大小：单位：米(meter)
*/
distance : function(pointA, pointB) {
return map.getDistance(pointA, pointB); // 获取两点距离
},
/**
* 添加Marker对象
* @param title {String} toolTip文字
* @param point {object} 百度坐标点对象
* @param name {string} 显示名称
* @param showLabel {boolean} 是否显示标注的文本
* @param myIcon {boolean} Icon图片对象
*/
addMarker : function(title,point, name, showLabel,myIcon) {
var marker = new BMap.Marker(point,{icon:myIcon});
if (showLabel) {
var label = new BMap.Label(name, {
offset : new BMap.Size(20, -10)
});
marker.setLabel(label);
}
marker.setTitle(title);
map.addOverlay(marker);
return marker;
},
/**
* 定位添加marker坐标
* @param lon {number} 经度
* @param lat {number} 纬度
* @param isShow {boolean} 系统打开或关闭
*/
addMarkerDisplayOrUnDisplay : function(lon, lat, isShow) {
var marker = new BMap.Marker(new BMap.Point(lon, lat)); // 创建标注
marker.prototype=new BMap.Overlay();
map.addOverlay(marker); // 将标注添加到地图中
if (isShow) {
marker.show();
} else {
marker.hide();
}
},
/**
* 添加折线(轨迹)
* @param points 百度坐标对象集合
*/
addLineFeature : function(points,style) {
var default_style={
strokeColor : "#3976F0",
strokeWeight : 3,
strokeOpacity : 0.5
};
var polyline = new BMap.Polyline(points,style|| default_style );
polyline.id="track_line";
map.addOverlay(polyline); // 添加折线到地图上
return polyline;
},
/**
* 添加折线(轨迹,包括起点、终点)
* @param sepoint {object} 起终点的名称.start ,.end
* @param points {array} 原始JSON坐标对象集合
* @param startImageUrk {string} 起点图片路径
* @param endImageUrk {string} 终点图片路径
*/
addLineFeatureAndStartAndEndPoint : function(sepoint,points, startImageUrk, endImageUrk,lineStyle) {
var len=points.length;
var index =len - 1;
var startPoint = points[0];
var endPoint =points[index];
var startIcon = BmapUtils.getIcon(startImageUrk,20,20);
startIcon.setImageSize(new BMap.Size(20,20));
var endIcon = BmapUtils.getIcon(endImageUrk,20,20);
endIcon.setImageSize(new BMap.Size(20,20));
var startMarker = new BMap.Marker(startPoint, {
icon : startIcon
});
var endMarker = new BMap.Marker(endPoint, { icon : endIcon});
startMarker.id="start";
startMarker.setTitle(sepoint.start);
endMarker.id="end";
endMarker.setTitle(sepoint.end);
/*if(len>=2){
var d=(len/2)+"";
d=parseInt(d);
map.centerAndZoom(points[d],13);
}*/
this.addLineFeature(points,lineStyle);
map.addOverlay(startMarker);
map.addOverlay(endMarker);
},
/**
* 路径规划
*
* @param startPoint {object} 起点
* @param endPoint {object} 终点
* @param carImgUrl {string} 车辆图片路径
*/
roadPlanToRun : function(startPoint, endPoint, carImgUrl) {
var driving2 = new BMap.DrivingRoute(map, {
renderOptions : {
map : map,
autoViewport : true
}
}); // 驾车实例
driving2.search(startPoint, endPoint); // 显示一条公交线路 var run = function() {
var driving = new BMap.DrivingRoute(map); // 驾车实例
driving.search(myP1, myP2);
driving.setSearchCompleteCallback(function() {
var pts = driving.getResults().getPlan(0).getRoute(0)
.getPath(); // 通过驾车实例，获得一系列点的数组
var paths = pts.length; // 获得有几个点 var carMk = new BMap.Marker(pts[0], {
icon : BmapUtils.getIcon(carImgUrl)
});
map.addOverlay(carMk);
i = 0;
function resetMkPoint(i) {
carMk.setPosition(pts[i]);
if (i < paths) {
setTimeout(function() {
i++;
resetMkPoint(i);
}, 100);
}
}
setTimeout(function() {
resetMkPoint(5);
}, 100); });
}; setTimeout(function() {
run();
}, 500);
},
/**
* 轨迹回放
* @param points {Array} 百度坐标点集合
* @param carImgUrl {string} 车辆图片的地址
*/
trackPlay : function(points, carImgUrl) {
var carMk = new BMap.Marker(points[0], {
icon : BmapUtils.getIcon(carImgUrl)
});
map.addOverlay(carMk);
var i = 0;
function resetMkPoint(i) {
carMk.setPosition(points[i]);
if (i < paths) {
setTimeout(function() {
i++;
resetMkPoint(i);
}, 100);
}
}
setTimeout(function() {
resetMkPoint(i);
}, 100);
},
/**
* 添加圆
* @param lon {number} 经度
* @param lat {number} 纬度
* @param radius{number} 半径
*/
addCircle : function(lon, lat, radius) {
var point = new BMap.Point(lon, lat);
map.centerAndZoom(point, 16);
var circle = new BMap.Circle(point, radius);
map.addOverlay(circle);
},
/**
* 添加多边形
* @param points {array} 百度坐标点集合
*/
addPolygon : function(points) {
var polygon = new BMap.Polygon(points, {
strokeColor : "blue",
strokeWeight : 3,
strokeOpacity : 0.5
});
polygon.id="polygon";
map.addOverlay(polygon);
},
/**
* 根据用户覆盖物的标识属性获取覆盖物
* @param properties {string} 属性名称
* @param nodeId {string} 属性字段的值
*/
getOverlayByNodeId:function(properties,value){
var overlays=map.getOverlays();
for ( var i = 0,le=overlays.length; i < le; i++) {
var overlay=overlays[i];
if(overlay[properties]==value){
return overlay;
}
}
return null;
},
/**
* 根据用户覆盖物的标识属性显示覆盖物
*
* @param properties {string} 属性名称
*
* @param nodeId {string} 属性字段的值
*/
showOverlay:function(properties,value){
var overlay=this.getOverlayByNodeId(properties, value);
overlay.show();
},
/**
* 根据用户覆盖物的标识属性隐藏覆盖物
* @param properties {string} 属性名称
* @param nodeId {string} 属性字段的值
*/
hideOverlay:function(properties,value){
var overlay=this.getOverlayByNodeId(properties, value);
overlay.hide();
},
/**
* 根据用户覆盖物的标识属性移除覆盖物
* @param properties {string} 属性名称
* @param nodeId {string} 属性字段的值
*/
removeOverlay:function(properties,value){
var overlay=this.getOverlayByNodeId(properties, value);
if(overlay) map.removeOverlay(overlay);
},
/**
* 删除地图上所有覆盖物
*/
removeAllOverlays:function(){
map.clearOverlays();
},
/**
* 删除轨迹回放的线条轨迹和起始图标覆盖物
*/
removeTrackLineWithStartAndEndOverlay:function(){
this.removeOverlay("id", "track_line");
this.removeOverlay("id", "start");
this.removeOverlay("id", "end");
},
/**
* 控制缩放层级显示图标显示或隐藏
* @param markers {array} 标注数组
* @param zoom {number} 缩放等级
*/
controlMakersHideOrShowByZoom:function(markers,zoom){
if(markers){
var map_zoom=map.getZoom();
if(map_zoom<zoom){
for ( var i = 0; i < markers.length; i++) {
var overlay=markers[i];
if(overlay){
overlay.prototype=new BMap.Overlay();
overlay.hide();
}
}
BmapUtils.CONSTANT.LINE_MAKERS_SHOW=false;
}else{
if(BmapUtils.CONSTANT.LINE_MAKERS_SHOW==false){
for ( var i = 0; i <markers.length; i++) {
var overlay=markers[i];
if(overlay){
overlay.prototype=new BMap.Overlay();
overlay.show();
}
}
BmapUtils.CONSTANT.LINE_MAKERS_SHOW=true;
}
}
}
}
}; /**
* 百度探索处理
*/
BmapUtils.search = {
/**
* 本地探索（含自动提示）
* @param inputSuggestId {string} 输入框的id属性
* @param searchResultPanelId {string} 结果面板的id属性
*/
localSearch : function(inputSuggestId, searchResultPanelId) {
function G(id) {
return document.getElementById(id);
}
var ac = new BMap.Autocomplete( // 建立一个自动完成的对象
{
"input" : inputSuggestId,
"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(searchResultPanelId).innerHTML = str;
}); var myValue = "", local = {};
var setPlace = function() {
map.clearOverlays(); // 清除地图上所有覆盖物
function myFun() {
var pp = local.getResults().getPoi(0).point; // 获取第一个智能搜索的结果
map.centerAndZoom(pp, 18);
map.addOverlay(new BMap.Marker(pp)); // 添加标注
}
local = new BMap.LocalSearch(map, { // 智能搜索
onSearchComplete : myFun
});
local.search(myValue);
};
ac.addEventListener("onconfirm", function(e) { // 鼠标点击下拉列表后的事件
var _value = e.item.value;
myValue = _value.province + _value.city + _value.district
+ _value.street + _value.business;
G(searchResultPanelId).innerHTML = "onconfirm<br />index = "
+ e.item.index + "<br />myValue = " + myValue;
setPlace();
});
},
/**
* POI查询
* @param inputId {string} 输入框id属性名称
*/
poiSearch:function(inputId){
var poiInfo=$("#"+inputId).val();
var mapZoom=map.getZoom();
if(mapZoom<12){
$.messager.alert("提示", "当前搜索面积太广，请将地图放大到市级别后再搜索", "warning");
return ;
}
if(poiInfo==""){
$.messager.alert("提示", "请输入搜索关键字", "warning");
return ;
}
LocalSearch.searchInBounds(poiInfo, map.getBounds());
}
}; /**
* 百度地图自定义控件
*/
BmapUtils.control={
/**
* 轨迹回放操作菜单控件
*/
addTrakPalyControl:function(){
function TrackControl(){
// 默认停靠位置和偏移量
this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;
this.defaultOffset = new BMap.Size(10, 20);
} // 通过JavaScript的prototype属性继承于BMap.Control
TrackControl.prototype = new BMap.Control(); // 自定义控件必须实现自己的initialize方法,并且将控件的DOM元素返回
// 在本方法中创建个div元素作为控件的容器,并将其添加到地图容器中
TrackControl.prototype.initialize = function(map){
// 创建一个DOM元素
// var mapContainerDiv= map.getContainer();
var div=document.createElement("div");
// 创建节点内容 var htmlContent='<div class="playDiv" style="z-index: 1000;position: absolute; right: 10px; bottom: 20px;">'+
'<div class="f-right ml20">'+
'<input id="slider_" class="easyui-slider" style="width:200px;background-color: orange;" data-options="showTip:true,min:0,step:10,max:100,rule:[0,'|',10,'|',20,'|',30,'|',40,'|',50,'|',60,'|',70,'|',80,'|',90,'|',100],tipFormatter:function(v){return v+'%';},onSlideEnd:function(value){process(value);}" style="float:left"/>'+
' </div>'+
'<div class="f-right" id="uoptions">'+
' <a id="thisplay" href="javascript:void(0)" onclick="playOrReplay()" class="easyui-linkbutton" data-options="disabled:true">播放</a> '+
' <a id="thispause" href="javascript:void(0)" onclick="pauseOrgo(1)" class="easyui-linkbutton" data-options="disabled:true">暂停</a> '+
' <a id="thiscontinue" href="javascript:void(0)" onclick="pauseOrgo(2)" class="easyui-linkbutton" data-options="disabled:true">继续</a> '+
' <a id="export" href="javascript:void(0)" onclick="reportorExport()" class="easyui-linkbutton" data-options="disabled:true">导出</a> '+
'</div></div>';
var playDiv=document.createTextNode(document.createTextNode(htmlContent));
// 添加文字说明
div.appendChild(playDiv);
// 将DOM元素返回
return div;
};
// 创建控件
var myTrackCtrol = new TrackControl();
// 添加到地图当中
map.addControl(myTrackCtrol);
}
}; /**
* 地图事件
*/
BmapUtils.event={
zoomed:function(markers,zoom){
map.addEventListener("zoomend",function(){
BmapUtils.tootls.controlMakersHideOrShowByZoom(markers, zoom);
});
},
removeZoomed:function(markers,zoom){
map.removeEventListener("zoomend",function(){
BmapUtils.tootls.controlMakersHideOrShowByZoom(markers, zoom);
});
},
moveend:function(tagId){
map.addEventListener("moveend",function(e){
var point=map.getCenter();
BmapUtils.getGeocoderInfoByPoint(point);
$("#"+tagId).html(Geocoder.city);
});
},
dragend:function(tagId){
map.addEventListener("dragend",function(){
var point=map.getCenter();
BmapUtils.getGeocoderInfoByPoint(point);
$("#"+tagId).html(Geocoder.city);
});
},
tilesloaded:function(tagId){
map.addEventListener("tilesloaded",function(){
var point=map.getCenter();
BmapUtils.getGeocoderInfoByPoint(point);
$("#"+tagId).html(Geocoder.city);
});
}
}; })();