百度地图JavaScript API V1.5初级开发工具类
/**
* 百度地图使用工具类-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); //添加版权控件(支持自定义版权控件) })();
百度地图JavaScript API V1.5初级开发工具类的更多相关文章
- 百度地图JavaScript API使用
最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...
- 百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
- 百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
- 【百度地图JavaScript API】手机端浏览器定位的实现
[百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476
- 百度地图 JavaScript API 极速版 开发体会
前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...
- 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题
项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...
- 百度地图JavaScript API本地搜索的结果面板
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 百度地图 JavaScript API
最近有点懒 项目结尾了 完了好长时间 没有去总结项目中的问题 想了下还是写写吧 这是一个关于百度地图的 网页展示 <!DOCTYPE html><html><head ...
- 百度地图 Javascript API 笔记
因为最近的一个项目用到,所以自己整理了一下遇到的一些坑 自己写了一个类库来二次封装用于调起常用的功能:https://github.com/iRuxu/iBMap 快速文档链接 Javascript ...
随机推荐
- linux网址
1. 上海爱墨电子科技有限公司 http://www.shaimo.cn/showproduct.asp?piccat_id=196&pic_id=780 2. http://lxr.free ...
- poj 1503 大数相加(java)
代码: import java.math.*; import java.util.Scanner; public class Main { public static void main(String ...
- STL List容器
转载http://www.cnblogs.com/fangyukuan/archive/2010/09/21/1832364.html 各个容器有很多的相似性.先学好一个,其它的就好办了.先从基础开始 ...
- How to check for and disable Java in OS X
Java used to be deeply embedded in OS X, but in recent versions of the OS it's an optional install. ...
- android自己定义ViewPager之——3D效果应用
今天在github里看到一个3D效果的ViewPager,感觉做出来的ViewPager滑动的时候效果十分的炫,就check out下来研究了一下怎样实现的.以及怎样使用.将整个ViewPager稍加 ...
- RSA加密算法及其与SpringMVC集成
如有不足,敬请各位提出批评,定会改正.THX! 本文介绍的是RSA加密算法+Spring Security在SpringMVC中的集成使用. Spring Security是什么? 引用: Sprin ...
- GridView控件中插入自定义删除按钮并弹出确认框
GridView控件中插入自定义删除按钮,要实现这个功能其实有多种方法,这里先记下我使用的方法,以后再添加其他方法. 一.实现步骤 1.在GridView中添加模板列(TemplateField). ...
- T4运行时模板
可以通过Visual Studio运行时文本模板在您的应用程序在运行时生成文本字符串. 执行应用程序的计算机不必具有 Visual Studio. 运行库模板有时称为"预处理文本模板&quo ...
- hadoop启动守护进程报JAVA_HOME is not set and could not be found
hadoop启动守护进程 sbin/start-dfs.sh 报如下错误:JAVA_HOME is not set and could not be found 解决办法(JAVA_HOME修改为具体 ...
- nginx启动报错(1113: No mapping for the Unicode character exists in the target multi-byte code page)
使用windows版本的nginx启动时遇到(1113: No mapping for the Unicode character exists in the target multi-byte co ...