百度地图LV1.5实践项目开发工具类bmap.util.jsV1.2
生活随笔
收集整理的這篇文章主要介紹了
百度地图LV1.5实践项目开发工具类bmap.util.jsV1.2
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
/*** 百度地圖使用工具類-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 自動(dòng)獲取地圖中心城市名稱，坐標(biāo)點(diǎn)地址解析 */ (function() {window.map={};window.Geocoder={};window.BmapUtils={};window.infoWindow={};window.LocalSearch={};/*** 百度地圖基礎(chǔ)操作*/BmapUtils = {/*** 全局變量*/CONSTANT : {DYNAMIC_CITY:"",CONTAINER : "map",DEFAULT_ZOOM : 12,SEARCH_PANEL:"r-result",LINE_MAKERS_SHOW:false,FEATURES:{}},/*** 獲取地圖視圖范圍坐標(biāo)* @returns {object} 范圍對象*/getBounds : function() {if (map) {var bs = map.getBounds(); // 獲取可視區(qū)域var bssw = bs.getSouthWest(); // 可視區(qū)域左下角var bsne = bs.getNorthEast(); // 可視區(qū)域右上角return {leftBottom : bssw,rightTop : bsne};}return null;},/*** 設(shè)置車輛圖標(biāo)* @param carImgUrl {string} 車輛圖片路徑* @returns {BMap.Icon} 百度Icon圖標(biāo)對象*/getIcon : function(carImgUrl,width,height) {var myIcon = new BMap.Icon(carImgUrl, new BMap.Size(width||20, height||20), { // 小車圖片// offset: new BMap.Size(0, -5), //相當(dāng)于CSS精靈imageOffset : new BMap.Size(0, 0)// 圖片的偏移量。為了是圖片底部中心對準(zhǔn)坐標(biāo)點(diǎn)。 });return myIcon;},/*** 初始化普通地圖* @param lon {number} 經(jīng)度* @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); // 默認(rèn)地圖初始化位置為北京map.centerAndZoom(point, zoom || this.CONSTANT.DEFAULT_ZOOM);},/*** 初始化3D地圖* @param lon {number} 經(jīng)度* @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 || "北京"); // 設(shè)置地圖顯示的城市 此項(xiàng)是必須設(shè)置的map.centerAndZoom(point, zoom || this.CONSTANT.DEFAULT_ZOOM);map.enableScrollWheelZoom(true);},/*** 初始化衛(wèi)星地圖* @param lon {number} 經(jīng)度* @param lat {number} 緯度* @param zoom {number} 縮放等級*/satelliteMap : function(lon, lat, zoom) {map = new BMap.Map(this.CONSTANT.CONTAINER, {mapType : BMAP_HYBRID_MAP,enableMapClick:false}); // 設(shè)置衛(wèi)星圖為底圖var point = new BMap.Point(lon || 116.4035, lat || 39.915);map.centerAndZoom(point, zoom || this.CONSTANT.DEFAULT_ZOOM);map.enableScrollWheelZoom(true);},/*** 初始化地圖（含普通操作控件）*/initBaiduMap:function(anchor){BmapUtils.initCommonMap(); // 初始化普通地圖map.enableDragging(); // 開啟拖拽// map.disableDragging(); // 禁止拖拽// map.enableInertialDragging(); // 開啟慣性拖拽map.enableScrollWheelZoom(true); // 允許鼠標(biāo)滾輪縮放地圖var navigtionControl=anchor||{anchor : BMAP_ANCHOR_TOP_LEFT};map.addControl(new BMap.NavigationControl(navigtionControl)); // 添加默認(rèn)縮放平移控件map.addControl(new BMap.ScaleControl({anchor : BMAP_ANCHOR_BOTTOM_LEFT})); // 左下角比例尺控件map.addControl(new BMap.OverviewMapControl()); // 添加默認(rèn)縮略地圖控件(鷹眼)var cr = new BMap.CopyrightControl({anchor : BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(cr); // 添加版權(quán)控件（支持自定義版權(quán)控件）window.map=map;},/*** 初始化小地圖* @param type {number} 平移縮放類型：平移和縮放1,只有平移2,只有縮放3,默認(rèn)只有縮放* @param position {number} 停靠的位置：上左1，上右2，下左3，下右4,默認(rèn)為上左*/smallMap:function(type,position){BmapUtils.initCommonMap(); // 初始化普通地圖map.enableDragging(); // 開啟拖拽map.enableScrollWheelZoom(true); // 允許鼠標(biāo)滾輪縮放地圖map.addControl(new BMap.ScaleControl({anchor : BMAP_ANCHOR_BOTTOM_LEFT})); // 左下角比例尺控件map.addControl(new BMap.OverviewMapControl()); // 添加默認(rèn)縮略地圖控件(鷹眼)var cr = new BMap.CopyrightControl({anchor : BMAP_ANCHOR_BOTTOM_LEFT});var navigtion_type="",where="";//平移導(dǎo)航的類型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;}//平移導(dǎo)航停靠的位置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); // 添加版權(quán)控件（支持自定義版權(quán)控件）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);},/*** 設(shè)置城市* @param result IP查詢結(jié)果*/setCity:function(result){BmapUtils.CONSTANT.DYNAMIC_CITY=result.name;},/*** IP自動(dòng)獲取城市名稱*/getDynamicCity:function(){var myCity = new BMap.LocalCity();myCity.get(this.setCity);return this.CONSTANT.DYNAMIC_CITY;},/*** 坐標(biāo)點(diǎn)地址解析* @param point 經(jīng)緯度點(diǎn)對象*/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} 經(jīng)度* @param lat {number} 緯度*/panTo : function(lon, lat) {var point = new BMap.Point(lon, lat);map.panTo(point);},/*** 平移地圖* @param lon {number} 經(jīng)度* @param lat {number} 緯度*/panToPoint: function(point) {map.panTo(point);},/*** 創(chuàng)建信息窗口* @param title {string} 標(biāo)題* @param message {string} 發(fā)送短信消息內(nèi)容* @param divContent {string} 文本內(nèi)容* @returns {BMap.InfoWindow} 信息對象*/createInfoWindow:function(title,message,divContent){var sendMessage=false;if(message) sendMessage=true;var opts = {width : 97, // 信息窗口寬度height : 95, // 信息窗口高度title : title, // 信息窗口標(biāo)題enableMessage : sendMessage, // 設(shè)置允許信息窗發(fā)送短息message : message // 允許發(fā)送短信 };window.infoWindow = new BMap.InfoWindow(divContent, opts); // 創(chuàng)建信息窗口對象return window.infoWindow;},/*** 打開一個(gè)信息窗口* @param title {string} 信息標(biāo)題* @param message {string} 需要發(fā)送的信息* @param divContent {string} 信息內(nèi)容* @param point {object} 百度坐標(biāo)點(diǎn)*/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} 百度坐標(biāo)點(diǎn)* @param zoomLevel {number} 縮放等級*/centerAndZoom:function(point,zoomLevel){map.setCenter(point);map.setZoom(zoomLevel);}};/*** 百度要素操作工具*/BmapUtils.tootls = {/*** 越界控制*/handleFeatureInBounds:function(point) {var bounds =map.getBounds();if (!bounds.containsPoint(point)){map.panTo(point); // 是否在視圖范圍之內(nèi)，若躍出視圖則平滑居中 }},/*** 測量兩點(diǎn)的距離* @param pointA 百度坐標(biāo)點(diǎn)A* @param pointB 百度坐標(biāo)點(diǎn)B* @return {number} 距離大小：單位：米(meter)*/distance : function(pointA, pointB) {return map.getDistance(pointA, pointB); // 獲取兩點(diǎn)距離 },/*** 添加Marker對象* @param title {String} toolTip文字* @param point {object} 百度坐標(biāo)點(diǎn)對象* @param name {string} 顯示名稱* @param showLabel {boolean} 是否顯示標(biāo)注的文本* @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坐標(biāo)* @param lon {number} 經(jīng)度* @param lat {number} 緯度* @param isShow {boolean} 系統(tǒng)打開或關(guān)閉*/addMarkerDisplayOrUnDisplay : function(lon, lat, isShow) {var marker = new BMap.Marker(new BMap.Point(lon, lat)); // 創(chuàng)建標(biāo)注marker.prototype=new BMap.Overlay();map.addOverlay(marker); // 將標(biāo)注添加到地圖中if (isShow) {marker.show();} else {marker.hide();}},/*** 添加折線(軌跡)* @param points 百度坐標(biāo)對象集合*/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;},/*** 添加折線(軌跡,包括起點(diǎn)、終點(diǎn))* @param sepoint {object} 起終點(diǎn)的名稱.start ,.end* @param points {array} 原始JSON坐標(biāo)對象集合* @param startImageUrk {string} 起點(diǎn)圖片路徑* @param endImageUrk {string} 終點(diǎn)圖片路徑*/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);},/*** 路徑規(guī)劃* * @param startPoint {object} 起點(diǎn)* @param endPoint {object} 終點(diǎn)* @param carImgUrl {string} 車輛圖片路徑*/roadPlanToRun : function(startPoint, endPoint, carImgUrl) {var driving2 = new BMap.DrivingRoute(map, {renderOptions : {map : map,autoViewport : true}}); // 駕車實(shí)例driving2.search(startPoint, endPoint); // 顯示一條公交線路var run = function() {var driving = new BMap.DrivingRoute(map); // 駕車實(shí)例 driving.search(myP1, myP2);driving.setSearchCompleteCallback(function() {var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); // 通過駕車實(shí)例，獲得一系列點(diǎn)的數(shù)組var paths = pts.length; // 獲得有幾個(gè)點(diǎn)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} 百度坐標(biāo)點(diǎn)集合* @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} 經(jīng)度* @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} 百度坐標(biāo)點(diǎn)集合*/addPolygon : function(points) {var polygon = new BMap.Polygon(points, {strokeColor : "blue",strokeWeight : 3,strokeOpacity : 0.5});polygon.id="polygon";map.addOverlay(polygon);},/*** 根據(jù)用戶覆蓋物的標(biāo)識(shí)屬性獲取覆蓋物* @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;},/*** 根據(jù)用戶覆蓋物的標(biāo)識(shí)屬性顯示覆蓋物* * @param properties {string} 屬性名稱* * @param nodeId {string} 屬性字段的值*/showOverlay:function(properties,value){var overlay=this.getOverlayByNodeId(properties, value);overlay.show();},/*** 根據(jù)用戶覆蓋物的標(biāo)識(shí)屬性隱藏覆蓋物* @param properties {string} 屬性名稱* @param nodeId {string} 屬性字段的值*/hideOverlay:function(properties,value){var overlay=this.getOverlayByNodeId(properties, value);overlay.hide();},/*** 根據(jù)用戶覆蓋物的標(biāo)識(shí)屬性移除覆蓋物* @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();},/*** 刪除軌跡回放的線條軌跡和起始圖標(biāo)覆蓋物*/removeTrackLineWithStartAndEndOverlay:function(){this.removeOverlay("id", "track_line");this.removeOverlay("id", "start");this.removeOverlay("id", "end");},/*** 控制縮放層級顯示圖標(biāo)顯示或隱藏* @param markers {array} 標(biāo)注數(shù)組* @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 = {/*** 本地探索（含自動(dòng)提示）* @param inputSuggestId {string} 輸入框的id屬性* @param searchResultPanelId {string} 結(jié)果面板的id屬性*/localSearch : function(inputSuggestId, searchResultPanelId) {function G(id) {return document.getElementById(id);}var ac = new BMap.Autocomplete( // 建立一個(gè)自動(dòng)完成的對象 {"input" : inputSuggestId,"location" : map});ac.addEventListener("onhighlight", function(e) { // 鼠標(biāo)放在下拉列表上的事件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; // 獲取第一個(gè)智能搜索的結(jié)果map.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp)); // 添加標(biāo)注 }local = new BMap.LocalSearch(map, { // 智能搜索 onSearchComplete : myFun});local.search(myValue);};ac.addEventListener("onconfirm", function(e) { // 鼠標(biāo)點(diǎn)擊下拉列表后的事件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("提示", "當(dāng)前搜索面積太廣，請將地圖放大到市級別后再搜索", "warning");return ;}if(poiInfo==""){$.messager.alert("提示", "請輸入搜索關(guān)鍵字", "warning");return ;}LocalSearch.searchInBounds(poiInfo, map.getBounds());}};/*** 百度地圖自定義控件*/BmapUtils.control={/*** 軌跡回放操作菜單控件*/addTrakPalyControl:function(){function TrackControl(){// 默認(rèn)停靠位置和偏移量this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;this.defaultOffset = new BMap.Size(10, 20);}// 通過JavaScript的prototype屬性繼承于BMap.ControlTrackControl.prototype = new BMap.Control();// 自定義控件必須實(shí)現(xiàn)自己的initialize方法,并且將控件的DOM元素返回// 在本方法中創(chuàng)建個(gè)div元素作為控件的容器,并將其添加到地圖容器中TrackControl.prototype.initialize = function(map){// 創(chuàng)建一個(gè)DOM元素// var mapContainerDiv= map.getContainer();var div=document.createElement("div");// 創(chuàng)建節(jié)點(diǎn)內(nèi)容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)" οnclick="playOrReplay()" class="easyui-linkbutton" data-options="disabled:true">播放</a> '+' <a id="thispause" href="javascript:void(0)" οnclick="pauseOrgo(1)" class="easyui-linkbutton" data-options="disabled:true">暫停</a> '+' <a id="thiscontinue" href="javascript:void(0)" οnclick="pauseOrgo(2)" class="easyui-linkbutton" data-options="disabled:true">繼續(xù)</a> '+' <a id="export" href="javascript:void(0)" οnclick="reportorExport()" class="easyui-linkbutton" data-options="disabled:true">導(dǎo)出</a> '+'</div></div>';var playDiv=document.createTextNode(document.createTextNode(htmlContent));// 添加文字說明 div.appendChild(playDiv);// 將DOM元素返回return div;};// 創(chuàng)建控件var myTrackCtrol = new TrackControl();// 添加到地圖當(dāng)中 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);});}};})();
* @update 自動(dòng)獲取地圖中心城市名稱，坐標(biāo)點(diǎn)地址解析 */ (function() {window.map={};window.Geocoder={};window.BmapUtils={};window.infoWindow={};window.LocalSearch={};/*** 百度地圖基礎(chǔ)操作*/BmapUtils = {/*** 全局變量*/CONSTANT : {DYNAMIC_CITY:"",CONTAINER : "map",DEFAULT_ZOOM : 12,SEARCH_PANEL:"r-result",LINE_MAKERS_SHOW:false,FEATURES:{}},/*** 獲取地圖視圖范圍坐標(biāo)* @returns {object} 范圍對象*/getBounds : function() {if (map) {var bs = map.getBounds(); // 獲取可視區(qū)域var bssw = bs.getSouthWest(); // 可視區(qū)域左下角var bsne = bs.getNorthEast(); // 可視區(qū)域右上角return {leftBottom : bssw,rightTop : bsne};}return null;},/*** 設(shè)置車輛圖標(biāo)* @param carImgUrl {string} 車輛圖片路徑* @returns {BMap.Icon} 百度Icon圖標(biāo)對象*/getIcon : function(carImgUrl,width,height) {var myIcon = new BMap.Icon(carImgUrl, new BMap.Size(width||20, height||20), { // 小車圖片// offset: new BMap.Size(0, -5), //相當(dāng)于CSS精靈imageOffset : new BMap.Size(0, 0)// 圖片的偏移量。為了是圖片底部中心對準(zhǔn)坐標(biāo)點(diǎn)。 });return myIcon;},/*** 初始化普通地圖* @param lon {number} 經(jīng)度* @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); // 默認(rèn)地圖初始化位置為北京map.centerAndZoom(point, zoom || this.CONSTANT.DEFAULT_ZOOM);},/*** 初始化3D地圖* @param lon {number} 經(jīng)度* @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 || "北京"); // 設(shè)置地圖顯示的城市 此項(xiàng)是必須設(shè)置的map.centerAndZoom(point, zoom || this.CONSTANT.DEFAULT_ZOOM);map.enableScrollWheelZoom(true);},/*** 初始化衛(wèi)星地圖* @param lon {number} 經(jīng)度* @param lat {number} 緯度* @param zoom {number} 縮放等級*/satelliteMap : function(lon, lat, zoom) {map = new BMap.Map(this.CONSTANT.CONTAINER, {mapType : BMAP_HYBRID_MAP,enableMapClick:false}); // 設(shè)置衛(wèi)星圖為底圖var point = new BMap.Point(lon || 116.4035, lat || 39.915);map.centerAndZoom(point, zoom || this.CONSTANT.DEFAULT_ZOOM);map.enableScrollWheelZoom(true);},/*** 初始化地圖（含普通操作控件）*/initBaiduMap:function(anchor){BmapUtils.initCommonMap(); // 初始化普通地圖map.enableDragging(); // 開啟拖拽// map.disableDragging(); // 禁止拖拽// map.enableInertialDragging(); // 開啟慣性拖拽map.enableScrollWheelZoom(true); // 允許鼠標(biāo)滾輪縮放地圖var navigtionControl=anchor||{anchor : BMAP_ANCHOR_TOP_LEFT};map.addControl(new BMap.NavigationControl(navigtionControl)); // 添加默認(rèn)縮放平移控件map.addControl(new BMap.ScaleControl({anchor : BMAP_ANCHOR_BOTTOM_LEFT})); // 左下角比例尺控件map.addControl(new BMap.OverviewMapControl()); // 添加默認(rèn)縮略地圖控件(鷹眼)var cr = new BMap.CopyrightControl({anchor : BMAP_ANCHOR_BOTTOM_LEFT});map.addControl(cr); // 添加版權(quán)控件（支持自定義版權(quán)控件）window.map=map;},/*** 初始化小地圖* @param type {number} 平移縮放類型：平移和縮放1,只有平移2,只有縮放3,默認(rèn)只有縮放* @param position {number} 停靠的位置：上左1，上右2，下左3，下右4,默認(rèn)為上左*/smallMap:function(type,position){BmapUtils.initCommonMap(); // 初始化普通地圖map.enableDragging(); // 開啟拖拽map.enableScrollWheelZoom(true); // 允許鼠標(biāo)滾輪縮放地圖map.addControl(new BMap.ScaleControl({anchor : BMAP_ANCHOR_BOTTOM_LEFT})); // 左下角比例尺控件map.addControl(new BMap.OverviewMapControl()); // 添加默認(rèn)縮略地圖控件(鷹眼)var cr = new BMap.CopyrightControl({anchor : BMAP_ANCHOR_BOTTOM_LEFT});var navigtion_type="",where="";//平移導(dǎo)航的類型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;}//平移導(dǎo)航停靠的位置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); // 添加版權(quán)控件（支持自定義版權(quán)控件）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);},/*** 設(shè)置城市* @param result IP查詢結(jié)果*/setCity:function(result){BmapUtils.CONSTANT.DYNAMIC_CITY=result.name;},/*** IP自動(dòng)獲取城市名稱*/getDynamicCity:function(){var myCity = new BMap.LocalCity();myCity.get(this.setCity);return this.CONSTANT.DYNAMIC_CITY;},/*** 坐標(biāo)點(diǎn)地址解析* @param point 經(jīng)緯度點(diǎn)對象*/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} 經(jīng)度* @param lat {number} 緯度*/panTo : function(lon, lat) {var point = new BMap.Point(lon, lat);map.panTo(point);},/*** 平移地圖* @param lon {number} 經(jīng)度* @param lat {number} 緯度*/panToPoint: function(point) {map.panTo(point);},/*** 創(chuàng)建信息窗口* @param title {string} 標(biāo)題* @param message {string} 發(fā)送短信消息內(nèi)容* @param divContent {string} 文本內(nèi)容* @returns {BMap.InfoWindow} 信息對象*/createInfoWindow:function(title,message,divContent){var sendMessage=false;if(message) sendMessage=true;var opts = {width : 97, // 信息窗口寬度height : 95, // 信息窗口高度title : title, // 信息窗口標(biāo)題enableMessage : sendMessage, // 設(shè)置允許信息窗發(fā)送短息message : message // 允許發(fā)送短信 };window.infoWindow = new BMap.InfoWindow(divContent, opts); // 創(chuàng)建信息窗口對象return window.infoWindow;},/*** 打開一個(gè)信息窗口* @param title {string} 信息標(biāo)題* @param message {string} 需要發(fā)送的信息* @param divContent {string} 信息內(nèi)容* @param point {object} 百度坐標(biāo)點(diǎn)*/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} 百度坐標(biāo)點(diǎn)* @param zoomLevel {number} 縮放等級*/centerAndZoom:function(point,zoomLevel){map.setCenter(point);map.setZoom(zoomLevel);}};/*** 百度要素操作工具*/BmapUtils.tootls = {/*** 越界控制*/handleFeatureInBounds:function(point) {var bounds =map.getBounds();if (!bounds.containsPoint(point)){map.panTo(point); // 是否在視圖范圍之內(nèi)，若躍出視圖則平滑居中 }},/*** 測量兩點(diǎn)的距離* @param pointA 百度坐標(biāo)點(diǎn)A* @param pointB 百度坐標(biāo)點(diǎn)B* @return {number} 距離大小：單位：米(meter)*/distance : function(pointA, pointB) {return map.getDistance(pointA, pointB); // 獲取兩點(diǎn)距離 },/*** 添加Marker對象* @param title {String} toolTip文字* @param point {object} 百度坐標(biāo)點(diǎn)對象* @param name {string} 顯示名稱* @param showLabel {boolean} 是否顯示標(biāo)注的文本* @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坐標(biāo)* @param lon {number} 經(jīng)度* @param lat {number} 緯度* @param isShow {boolean} 系統(tǒng)打開或關(guān)閉*/addMarkerDisplayOrUnDisplay : function(lon, lat, isShow) {var marker = new BMap.Marker(new BMap.Point(lon, lat)); // 創(chuàng)建標(biāo)注marker.prototype=new BMap.Overlay();map.addOverlay(marker); // 將標(biāo)注添加到地圖中if (isShow) {marker.show();} else {marker.hide();}},/*** 添加折線(軌跡)* @param points 百度坐標(biāo)對象集合*/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;},/*** 添加折線(軌跡,包括起點(diǎn)、終點(diǎn))* @param sepoint {object} 起終點(diǎn)的名稱.start ,.end* @param points {array} 原始JSON坐標(biāo)對象集合* @param startImageUrk {string} 起點(diǎn)圖片路徑* @param endImageUrk {string} 終點(diǎn)圖片路徑*/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);},/*** 路徑規(guī)劃* * @param startPoint {object} 起點(diǎn)* @param endPoint {object} 終點(diǎn)* @param carImgUrl {string} 車輛圖片路徑*/roadPlanToRun : function(startPoint, endPoint, carImgUrl) {var driving2 = new BMap.DrivingRoute(map, {renderOptions : {map : map,autoViewport : true}}); // 駕車實(shí)例driving2.search(startPoint, endPoint); // 顯示一條公交線路var run = function() {var driving = new BMap.DrivingRoute(map); // 駕車實(shí)例 driving.search(myP1, myP2);driving.setSearchCompleteCallback(function() {var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); // 通過駕車實(shí)例，獲得一系列點(diǎn)的數(shù)組var paths = pts.length; // 獲得有幾個(gè)點(diǎn)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} 百度坐標(biāo)點(diǎn)集合* @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} 經(jīng)度* @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} 百度坐標(biāo)點(diǎn)集合*/addPolygon : function(points) {var polygon = new BMap.Polygon(points, {strokeColor : "blue",strokeWeight : 3,strokeOpacity : 0.5});polygon.id="polygon";map.addOverlay(polygon);},/*** 根據(jù)用戶覆蓋物的標(biāo)識(shí)屬性獲取覆蓋物* @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;},/*** 根據(jù)用戶覆蓋物的標(biāo)識(shí)屬性顯示覆蓋物* * @param properties {string} 屬性名稱* * @param nodeId {string} 屬性字段的值*/showOverlay:function(properties,value){var overlay=this.getOverlayByNodeId(properties, value);overlay.show();},/*** 根據(jù)用戶覆蓋物的標(biāo)識(shí)屬性隱藏覆蓋物* @param properties {string} 屬性名稱* @param nodeId {string} 屬性字段的值*/hideOverlay:function(properties,value){var overlay=this.getOverlayByNodeId(properties, value);overlay.hide();},/*** 根據(jù)用戶覆蓋物的標(biāo)識(shí)屬性移除覆蓋物* @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();},/*** 刪除軌跡回放的線條軌跡和起始圖標(biāo)覆蓋物*/removeTrackLineWithStartAndEndOverlay:function(){this.removeOverlay("id", "track_line");this.removeOverlay("id", "start");this.removeOverlay("id", "end");},/*** 控制縮放層級顯示圖標(biāo)顯示或隱藏* @param markers {array} 標(biāo)注數(shù)組* @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 = {/*** 本地探索（含自動(dòng)提示）* @param inputSuggestId {string} 輸入框的id屬性* @param searchResultPanelId {string} 結(jié)果面板的id屬性*/localSearch : function(inputSuggestId, searchResultPanelId) {function G(id) {return document.getElementById(id);}var ac = new BMap.Autocomplete( // 建立一個(gè)自動(dòng)完成的對象 {"input" : inputSuggestId,"location" : map});ac.addEventListener("onhighlight", function(e) { // 鼠標(biāo)放在下拉列表上的事件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; // 獲取第一個(gè)智能搜索的結(jié)果map.centerAndZoom(pp, 18);map.addOverlay(new BMap.Marker(pp)); // 添加標(biāo)注 }local = new BMap.LocalSearch(map, { // 智能搜索 onSearchComplete : myFun});local.search(myValue);};ac.addEventListener("onconfirm", function(e) { // 鼠標(biāo)點(diǎn)擊下拉列表后的事件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("提示", "當(dāng)前搜索面積太廣，請將地圖放大到市級別后再搜索", "warning");return ;}if(poiInfo==""){$.messager.alert("提示", "請輸入搜索關(guān)鍵字", "warning");return ;}LocalSearch.searchInBounds(poiInfo, map.getBounds());}};/*** 百度地圖自定義控件*/BmapUtils.control={/*** 軌跡回放操作菜單控件*/addTrakPalyControl:function(){function TrackControl(){// 默認(rèn)停靠位置和偏移量this.defaultAnchor = BMAP_ANCHOR_BOTTOM_RIGHT;this.defaultOffset = new BMap.Size(10, 20);}// 通過JavaScript的prototype屬性繼承于BMap.ControlTrackControl.prototype = new BMap.Control();// 自定義控件必須實(shí)現(xiàn)自己的initialize方法,并且將控件的DOM元素返回// 在本方法中創(chuàng)建個(gè)div元素作為控件的容器,并將其添加到地圖容器中TrackControl.prototype.initialize = function(map){// 創(chuàng)建一個(gè)DOM元素// var mapContainerDiv= map.getContainer();var div=document.createElement("div");// 創(chuàng)建節(jié)點(diǎn)內(nèi)容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)" οnclick="playOrReplay()" class="easyui-linkbutton" data-options="disabled:true">播放</a> '+' <a id="thispause" href="javascript:void(0)" οnclick="pauseOrgo(1)" class="easyui-linkbutton" data-options="disabled:true">暫停</a> '+' <a id="thiscontinue" href="javascript:void(0)" οnclick="pauseOrgo(2)" class="easyui-linkbutton" data-options="disabled:true">繼續(xù)</a> '+' <a id="export" href="javascript:void(0)" οnclick="reportorExport()" class="easyui-linkbutton" data-options="disabled:true">導(dǎo)出</a> '+'</div></div>';var playDiv=document.createTextNode(document.createTextNode(htmlContent));// 添加文字說明 div.appendChild(playDiv);// 將DOM元素返回return div;};// 創(chuàng)建控件var myTrackCtrol = new TrackControl();// 添加到地圖當(dāng)中 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);});}};})();
?
轉(zhuǎn)載于:https://www.cnblogs.com/boonya/p/3240568.html
總結(jié)
以上是生活随笔為你收集整理的百度地图LV1.5实践项目开发工具类bmap.util.jsV1.2的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 苹果5s多少钱现在啊？
- 下一篇： 充实的日子里忙忙碌碌