百度地图JavaScript API V1.5初级开发工具类

时间:2021-05-08 20:35:30
/**
* 百度地图使用工具类-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
*/
(function(){ var map={};
window.BmapUtils;
/**
* 百度地图基础操作
*/
BmapUtils={
/**
* 全局变量
*/
CONSTANT:{
CONTAINER:"map",
DEFAULT_ZOOM:12
},
/**
* 获取地图视图范围坐标
* @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;
},
/**
* 设置车辆图标
* @param carImgUrl 车辆图片路径
* @returns {BMap.Icon} 百度Icon图标对象
*/
getIcon:function(carImgUrl){
var myIcon = new BMap.Icon(carImgUrl, new BMap.Size(32, 20), { //小车图片
//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);
var point = new BMap.Point(lon||116.331398,lat||39.897445); // 默认地图初始化位置为北京
map.centerAndZoom(point,zoom||this.CONSTANT.DEFAULT_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});
var point = new BMap.Point(lon||116.4035,lat||39.915);
map.setCurrentCity(cityname||"北京"); // 设置地图显示的城市 此项是必须设置的
map.centerAndZoom(point,zoom||this.CONSTANT.DEFAULT_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}); //设置卫星图为底图
var point = new BMap.Point(lon||116.4035,lat||39.915);
map.centerAndZoom(point,zoom||this.CONSTANT.DEFAULT_ZOOM);
map.enableScrollWheelZoom(true);
},
/**
* IP定位城市
*/
ipLocateCity:function(){
var myFun=function (result){
var cityName = result.name;
map.setCenter(cityName);
};
var myCity = new BMap.LocalCity();
myCity.get(myFun);
},
/**
* 平移地图
* @param lon {number} 经度
* @param lat {number} 纬度
*/
panTo:function(lon,lat){
var point=new BMap.Point(lon,lat);
map.panTo(point);
},
/**
* GPS坐标转百度坐标
* @param lon {number} 经度
* @param lat {number} 纬度
* @returns {object} 百度坐标对象
*/
gpsLonLatToBaituLngLat:function(lon,lat){
var baidu={lng:{},lat:{}};
var gpsPoint = new BMap.Point(lon,lat); // GPS坐标 //坐标转换完之后的回调函数
var translateCallback = function (point){
baidu=point;
};
BMap.Convertor.translate(gpsPoint,0,translateCallback); // 真实经纬度转成百度坐标
return baidu;
},
/**
* Google坐标转百度坐标
* @param lon {number} 经度
* @param lat {number} 纬度
* @returns {object} 百度坐标对象
*/
googleLngLatToBaiduLngLat:function(lon,lat){
var baidu={lng:{},lat:{}};
var ggPoint = new BMap.Point(lon,lat); // Google坐标
var translateCallback = function (point){
baidu=point;
};
BMap.Convertor.translate(ggPoint,2,translateCallback); //GCJ-02坐标转成百度坐标
return baidu;
},
/**
* 批量转换坐标
* @param type {number} 参数2,表示是从GCJ-02坐标到百度坐标。参数0,表示是从GPS到百度坐标
* @param jsonPoints {Array} 原始JSON坐标对象集合
* @returns {Array}
* @notice 百度和谷歌的经纬度坐标顺序是相反的
*/
convertPoints:function(type,jsonPoints){
var points = [],convertedPoints=[];
if(jsonPoints){
for ( var i = 0; i < jsonPoints.length; i++) {
var lonlat=jsonPoints[i];
var point=new BMap.Point(lonlat.lon,lonlat.lat);
points.push(point);
}
}
var callback=function (xyResults){
for(var index in xyResults){
xyResult = xyResults[index];
if(xyResult.error != 0){
continue; //出错就直接返回;
}
var point = new BMap.Point(xyResult.x, xyResult.y);
convertedPoints.push(point);
}
};
BMap.Convertor.transMore(points,type,callback); // 参数2,表示是从GCJ-02坐标到百度坐标。参数0,表示是从GPS到百度坐标
return convertedPoints;
},
/**
* 打开一个信息窗口
* @param jsonObj {object} JSON数据对象
*/
addInfoWindow:function(jsonObj){
var point=new BMap.Point(jsonObj.lon,jsonObj.lat);
var opts = {
width : 200, // 信息窗口宽度
height: 60, // 信息窗口高度
title : jsonObj.name , // 信息窗口标题
enableMessage:true, // 设置允许信息窗发送短息
message:jsonObj.message // 允许发送短信
};
var infoWindow = new BMap.InfoWindow("地址:"+jsonObj.address, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); // 开启信息窗口
} }; /**
* 百度要素操作工具
*/
BmapUtils.tootls={
/**
* @param pointA 百度坐标点A
* @param pointB 百度坐标点B
* @return {number} 距离大小:单位:米(meter)
*/
distance:function(pointA,pointB){
return map.getDistance(pointA,pointB); //获取两点距离
},
/**
* 添加折线(轨迹)
*@param jsonPoints 原始JSON坐标对象集合
*/
addLineFeature:function(jsonPoints){
var points=[];
if(jsonPoints){
for ( var i = 0; i < jsonPoints.length; i++) {
var lonlat=jsonPoints[i];
var point=new BMap.Point(lonlat.lon,lonlat.lat);
points.push(point);
}
}
var polyline = new BMap.Polyline(points, {strokeColor:"#08ffee", strokeWeight:3, strokeOpacity:0.5});
map.addOverlay(polyline); //添加折线到地图上
},
/**
* 添加折线(轨迹,包括起点、终点)
*@param jsonPoints {array} 原始JSON坐标对象集合
*@param startImageUrk {string} 起点图片路径
*@param endImageUrk {string} 终点图片路径
*/
addLineFeatureAndStartAndEndPoint:function(jsonPoints,startImageUrk,endImageUrk){
var index=jsonPoints.length-1;
var startPoint=new BMap.Point(jsonPoints[0].lon,jsonPoints[0].lat);
var endPoint=new BMap.Point(jsonPoints[index].lon,jsonPoints[index].lat);
var startIcon=BmapUtils.getIcon(startImageUrk);
var endIcon=BmapUtils.getIcon(endImageUrk);
var startMarker = new BMap.Marker(startPoint,{icon:startIcon});
var endMarker = new BMap.Marker(endPoint,{icon:endIcon});
map.addOverlay(startMarker);
map.addOverlay(endMarker);
this.addLineFeature(jsonPoints);
},
/**
* 添加Marker对象
* @param point {object} 百度坐标点对象
* @param jsonObj {object} Json对象
* @param showLabel {boolean} 是否显示标注的文本
*/
addMarker:function(point,jsonObj,showLabel){
var marker = new BMap.Marker(point);
if(showLabel){
var label = new BMap.Label(jsonObj.name,{offset:new BMap.Size(20,-10)});
marker.setLabel(label);
}
map.addOverlay(marker);
},
/**
*定位i添加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)); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
if(isShow){
marker.show();
}else{
marker.hide();
}
},
/**
* 批量添加Marker对象
* @param jsonPoints {Array} Json坐标信息对象
* @param showLabel {boolean} 是否显示标注的文本
*/
addMarkers:function(jsonPoints,showLabel){
if(jsonPoints){
for ( var i = 0; i < jsonPoints.length; i++) {
var jsonObj=jsonPoints[i];
var point=new BMap.Point(jsonObj.lon,jsonObj.lat);
this.addMarker(point,jsonObj,showLabel);
}
}
},
/**
* 路径规划
* @param startPoint {object} 起点
* @param endPoint {object} 终点
* @param carImgUrl {string} 车辆图片路径
*/
addLineFeatureAndRun: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});
map.addOverlay(polygon);
}
}; /**
* 百度探索处理
*/
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();
});
}
}; BmapUtils.initCommonMap(); // 初始化普通地图
map.enableDragging(); // 开启拖拽
//map.disableDragging(); // 禁止拖拽
//map.enableInertialDragging(); // 开启惯性拖拽
map.enableScrollWheelZoom(true); // 允许鼠标滚轮缩放地图
map.addControl(new BMap.NavigationControl()); // 添加默认缩放平移控件
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); //添加版权控件(支持自定义版权控件) })();