[Baidu Map]百度地图 JAVASCRIPT API V2.0 大众版 工具类
浏览数：290 /
时间：2015年06月08日
关键代码：
/* *@description 百度地图 JAVASCRIPT API V2.0 大众版 工具类 *@author YanZhiwei *@see http://developer.baidu.com/map/reference/index.php *@email [email protected] */ (function () { map = {}; infoWindow = {}; BmapUtils = { CONSTANT: { DYNAMIC_CITY: "上海", CONTAINER: "baidumap", DEFAULT_ZOOM: 13, DEFAULT_INIT_ZOOM: 12, DEFAULT_MAX_ZOOM: 18, DEFAULT_MIN_ZOOM: 8 }, initNormalMap: function (lon, lat, zoom, maxzoom, minzoom) { /// <summary> /// 基本地图初始化 /// </summary> /// <param name="lon">纬度</param> /// <param name="lat">经度</param> /// <param name="zoom">显示级别</param> /// <param name="maxzoom">地图最大级别</param> /// <param name="minzoom">地图最小级别</param> 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); map.enableDragging(); // 开启拖拽 map.setMinZoom(minzoom || this.CONSTANT.DEFAULT_MIN_ZOOM);//地图最小级别 map.setMaxZoom(maxzoom || this.CONSTANT.DEFAULT_MAX_ZOOM);//地图最小级别 map.enableScrollWheelZoom(true); // 允许鼠标滚轮缩放地图 map.addControl(new BMap.NavigationControl(BMAP_ANCHOR_TOP_LEFT)); // 添加默认缩放平移控件 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); // 添加版权控件（支持自定义版权控件） }, addMapView: function () { /// <summary> /// 添加地图视图_普通街道_卫星视图_卫星和路网的混合 /// </summary> if (map) map.addControl(new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_SATELLITE_MAP, BMAP_PERSPECTIVE_MAP] })); }, addMarker: function (marker) { /// <summary> /// 将标记添加到地图 /// </summary> /// <param name="marker">标记</param> if (map) map.addOverlay(marker); }, focused: function (point, zoom) { /// <summary> /// 聚焦点 /// </summary> /// <param name="point">point</param> /// <param name="zoom">级别</param> if (point) { var bounds = map.getBounds(); map.centerAndZoom(point, zoom || this.CONSTANT.DEFAULT_ZOOM); if (!bounds.containsPoint(point)) { setTimeout(function () { map.panTo(point); }, 500); } } } }; BmapUtils.tool = { CONSTANT: { RANDOM_NUMER: 100 }, addRandomInViewRange: function (number) { /// <summary> /// 在可视区域内添加随机标记 /// 默认99个 /// </summary> /// <param name="number">标记个数</param> if (map) { var bounds = map.getBounds(); var sw = bounds.getSouthWest(); var ne = bounds.getNorthEast(); var lngSpan = Math.abs(sw.lng - ne.lng); var latSpan = Math.abs(ne.lat - sw.lat); var mkNumber = number || this.CONSTANT.RANDOM_NUMER; for (var i = 0; i < mkNumber ; i++) { var marker = BmapUtils.marker.addWithTitle(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7), i); marker.id = i; BmapUtils.marker.setInfoWindow(marker, "上海啊上海啊", ‘‘, ‘122‘); BmapUtils.marker.setLable(marker, i); BmapUtils.addMarker(marker); } } } }; BmapUtils.overlays = { find: function (properties, value) { /// <summary> /// 查找覆盖物 /// </summary> /// <param name="properties">键</param> /// <param name="value">值</param> /// <returns type="">找到则返回覆盖物；若没找到则返回NULL</returns> var overlays = map.getOverlays(); for (var i = 0; i < overlays.length; i++) { var overlay = overlays[i]; if (overlay[properties] == value) return overlay; } }, findAll: function (properties, value) { /// <summary> /// 查找符合条件覆盖物的集合 /// </summary> /// <param name="properties">键</param> /// <param name="value">值</param> /// <returns type="">Array</returns> var finded = new Array; var overlays = map.getOverlays(); for (var i = 0; i < overlays.length; i++) { var overlay = overlays[i]; if (overlay[properties] == value) finded.push(overlay); } return finded; }, count: function () { var overlays = map.getOverlays(); return overlays.length; }, show: function (properties, value) { /// <summary> /// 查找覆盖物并显示 /// </summary> /// <param name="properties">键</param> /// <param name="value">值</param> var overlay = this.find(properties, value); if (overlay) { overlay.show(); } }, remove: function (properties, value) { /// <summary> /// 查找覆盖物并删除 /// </summary> /// <param name="properties">键</param> /// <param name="value">值</param> var overlay = this.find(properties, value); if (overlay) { map.removeOverlay(overlay); } }, hide: function (properties, value) { /// <summary> /// 查找覆盖物并隐藏 /// </summary> /// <param name="properties">键</param> /// <param name="value">值</param> var overlay = this.find(properties, value); if (overlay) { overlay.hide(); } }, clearAll: function () { /// <summary> /// 清除地图上所有的覆盖物 /// </summary> map.clearOverlays(); } }; BmapUtils.marker = { add: function (lon, lat) { /// <summary> /// 创建地图标记 /// 说明：需要 map.addOverlay(marker)或MarkerManger进行管理 /// </summary> /// <param name="lon">纬度</param> /// <param name="lat">经度</param> /// <returns type="">BMap.Marker</returns> if (map) { var marker = new BMap.Marker(new BMap.Point(lon, lat)); return marker; } }, addWithTitle: function (lon, lat, title) { /// <summary> ///创建标记并且设置toolTip文字 ///说明：需要 map.addOverlay(marker)或MarkerManger进行管理 /// </summary> /// <param name="lon">纬度</param> /// <param name="lat">经度</param> /// <param name="title">toolTip文字</param> /// <returns type="">BMap.Marker</returns> var marker = BmapUtils.marker.add(lon, lat); marker.setTitle(title); return marker; }, setLable: function (marker, name) { /// <summary> /// 设置标记显示名称 /// </summary> /// <param name="marker">标记</param> /// <param name="name">显示名称</param> if (marker) { var label = new BMap.Label(name, { offset: new BMap.Size(20, -10) }); marker.setLabel(label); } }, setIcon: function (marker, iconpath, size) { /// <summary> /// 设置标记图标 /// </summary> /// <param name="marker">标记</param> /// <param name="iconpath">图标路径</param> /// <param name="size">BMap.Size</param> if (marker) { var icon = new BMap.Icon(iconpath, size); marker.setIcon(icon); } }, findInBounds: function (properties, value) { /// <summary> /// 查找可视范围内标记 /// </summary> /// <param name="properties">键</param> /// <param name="value">值</param> /// <returns type="">若查找到则返回BMap.Marker；若查找不到则返回NULL</returns> var bounds = map.getBounds(); var overlays = map.getOverlays(); for (var i = 0; i < overlays.length; i++) { var overlay = overlays[i]; if (bounds.containsPoint(overlay.getPosition())) { if (overlay[properties] == value) return overlay; } } return null; }, findAllInBounds: function (properties, value) { /// <summary> /// 查找可视范围内符合条件标记的集合 /// </summary> /// <param name="properties"></param> /// <param name="value"></param> /// <returns type=""></returns> var finded = new Array; var bounds = map.getBounds(); var overlays = map.getOverlays(); for (var i = 0; i < overlays.length; i++) { var overlay = overlays[i]; if (bounds.containsPoint(overlay.getPosition())) { if (overlay[properties] == value) finded.push(overlay); } } return finded; }, focused: function (marker, zoom) { /// <summary> /// 标记聚焦 /// </summary> /// <param name="marker">标记</param> /// <param name="zoom">缩放级别</param> var point = marker.getPosition(); BmapUtils.focused(point, zoom); }, showInfoWindow: function (marker, title, message, htmlElement) { /// <summary> /// 显示InfoWindow /// </summary> /// <param name="marker">标记</param> /// <param name="title">信息窗标题文字</param> /// <param name="message">自定义部分的短信内容</param> /// <param name="htmlElement">htmlElement</param> var point = marker.getPosition(); BmapUtils.infoWindow.add(point, title, message, htmlElement, true); }, setInfoWindow: function (marker, title, message, htmlElement) { /// <summary> /// 设置marker标记点击时候展现的InfoWindow /// </summary> /// <param name="marker">标记</param> /// <param name="title">信息窗标题文字</param> /// <param name="message">自定义部分的短信内容</param> /// <param name="htmlElement">htmlElement</param> marker.addEventListener("click", function () { infoWindow = BmapUtils.infoWindow.create(title, message, htmlElement); marker.openInfoWindow(infoWindow); }); } }; BmapUtils.infoWindow = { create: function (title, message, htmlElement) { var sendMessage = false; if (message) sendMessage = true; var opts = { width: 100, //信息窗宽度，单位像素 height: 50, //信息窗高度，单位像素 title: title, // 信息窗标题文字，支持HTML内容 enableMessage: sendMessage, // 设置允许信息窗发送短息 message: message// 自定义部分的短信内容，可选项。完整的短信内容包括：自定义部分+位置链接，不设置时，显示默认短信内容。 }; infoWindow = new BMap.InfoWindow(htmlElement, opts); // 创建信息窗口对象 return infoWindow; }, add: function (point, title, message, htmlElement, focused) { /// <summary> /// 为point添加infoWindow对象 /// </summary> /// <param name="point">point</param> /// <param name="title">信息窗标题文字</param> /// <param name="message">自定义部分的短信内容</param> /// <param name="htmlElement">htmlElement</param> /// <param name="focused">是否聚焦</param> if (point) { infoWindow = this.create(title, message, htmlElement); map.openInfoWindow(infoWindow, point); if (focused) { BmapUtils.focused(point, map.getZoom()); } } } }; })();
测试代码：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="Scripts/jquery-1.7.1.js"></script> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uGL4KNjgj6qoH3bGu346o4WT"></script> <script src="BMapUtilsV2.js"></script> <script type="text/javascript"> $(document).ready(function () { BmapUtils.initNormalMap(); BmapUtils.addMapView(); BmapUtils.tool.addRandomInViewRange(); }); </script> </head> <body> <div id="baidumap" style="height:800px;width:100%"></div> <br /> <input id="Button1" type="button" value="addRandomInViewRange" onclick="BmapUtils.tool.addRandomInViewRange()" /> <input id="Button2" type="button" value="count" onclick=" alert(BmapUtils.overlays.count());" /> <input id="Button3" type="button" value="findall" onclick="alert(BmapUtils.overlays.findAll(‘id‘, ‘99‘).length);" /> <input id="Button3" type="button" value="findAllInBounds" onclick="alert(BmapUtils.marker.findAllInBounds(‘id‘, ‘99‘).length);" /> <input id="Button3" type="button" value="findInBounds" onclick="alert(BmapUtils.marker.findInBounds(‘id‘, ‘99‘).id);" /> <input id="Button4" type="button" value="hide" onclick="BmapUtils.overlays.hide(‘id‘, ‘99‘)" /> <input id="Button5" type="button" value="show" onclick="BmapUtils.overlays.show(‘id‘, ‘99‘)" /> <input id="Button5" type="button" value="focused" onclick="BmapUtils.marker.focused( BmapUtils.overlays.find(‘id‘, ‘99‘))" /> <input id="Button5" type="button" value="showInfoWindow" onclick="BmapUtils.marker.showInfoWindow( BmapUtils.overlays.find(‘id‘, ‘99‘),‘demo‘,‘‘,‘123‘)" /> </body> </html>
项目目录：
运行效果：
希望有所帮助！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
