百度地图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 ...
随机推荐
- hdu5772-String problem(最大权闭合子图问题)
解析: 多校标答 第一类:Pij 表示第i个点和第j个点组合的点,那么Pij的权值等于w[i][j]+w[j][i](表示得分)第二类:原串中的n个点每个点拆出一个点,第i个点权值为 –a[s[i]] ...
- pyqt tabWidget例子学习1
from PyQt4 import QtGui from PyQt4 import QtCore from PyQt4.QtCore import pyqtSlot,SIGNAL,SLOT impor ...
- [重磅] 让HTML5达到原生的体验 系列之中的一个 避免切页白屏
非常多人都想.甚至曾使用HTML5开发跨平台App.而且想达到原生App的体验. 最后的结果都是无奈的放弃.HTML5貌似美好,但坑太多.想做到原生App的体验差点儿不可为. 也曾有过著名的faceb ...
- 文件atime未变问题的研究
1. atime, ctime 以及mtime 这三个名词属于文件/文件夹的属性,存在于inode数据结构之中. 通过系统调用stat可以获取stat结构,其中包括:atime(accesstime) ...
- classloader.getresources() 介绍
◆普通情况下,我们都使用相对路径来获取资源,这种灵活性比較大. 比方当前类为com/bbebfe/Test.class 而图像资源比方sample.gif应该放置在com/bbebfe/sample. ...
- 关闭SQL Server 数据库所有使用连接
使用存储过程终止:在查询分析器下创建终止数据库所有接连的存储过程,通过调用该存储过程可以关闭所有使用该数据库的连接操作.--创建终止使用数据库下所有进程的存储过程,参数为数据库名称use maste ...
- swift中的传值
光阴似箭,日月如梭,转眼间学习的旅途已经过了一大半了,忘着自己所敲过的成批的代码,看着自己付出和努力,默默地为自己这几个月的奋斗感到欣慰,不论学习的路途再怎么的艰辛,但是自己还是坚持过来了,回想着以往 ...
- zabbix server is not running: the information displayed may not be current
一.1.关闭selinux及防火墙 2.在/etc/hosts文件里加入ip及对应的主机名. 3.修改配置文件:zabbix.conf.php /opt/data/apache2/htdocs/zab ...
- 使用xtrabakcup 备份inodb数据库
1,获取yum源 rpm -ivh http://www.percona.com/downloads/percona-release/redhat/0.1-3/percona-release-0.1- ...
- css2如何设置全屏背景图片
每次在做一个网站后台登陆页面的时候,当UI给我一张背景是不规律的背景图片,但是在设置为背景时,总会遇到屏幕大小的问题,导致背景图片有可能平铺.这样UI的效果达不到也会很难看. 本来我想用body{ba ...