天地图二次封装版本（javascript）

最新推荐文章于 2024-08-16 17:21:37 发布
最新推荐文章于 2024-08-16 17:21:37 发布
阅读量2.8k 收藏 3
点赞数 1
分类专栏： 地图
原文出处： https://my.oschina.net/tangSpace/blog/313801  （ 建议看这里）

摘要: 官方提供的使用方式略显繁琐，下面提供封装后的代码

/*********测试页面************/

<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>天地图测试</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/themes/icon.css">
		<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.4.4.min.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="http://api.tianditu.com/api-new/api/js/maps.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/common_map.js" charset="utf-8"></script>
		<script type="text/javascript">
		var MAP = null;
		$(function(){
			MAP = new BaseMap({
				mapId : 'mapDiv',
				width : 1200,
				height: 800,
				basePath	: '${pageContext.request.contextPath}',
				enableHandleMouseScroll : true,
				enableDoubleClickZoom	: true,
				mapType					: 1,
				isShowMapTypeBtn		: true,
				isNavBtn				: true,
				//导航
				isNavigation			: true,
				//搜索
				isSearch				: false,
				overviewMapCfg			: {
					anchor: "TMAP_ANCHOR_BOTTOM_RIGHT", 
		            size  : new TSize(180,120),
		            isOpen : true
				},
				markerPointMsgBoxTitle	: '停车场',
				getPointAltText	: function(p, marker){
					return p['name'];
				},
				defaultMarkerPoints		: [{
					lng	: 106.50989,
					lat	: 29.50048,
					icon : '',
					name	: '中国光大银行重庆沙坪坝分行',
					msgDatas : ['<b style="font-size:14px;color:#FF0000">中国光大银行重庆沙坪坝分行</b><br/>',{
						text : '名称：',
						content : '名称1111'
					},{
						text : '地址：',
						content : '地址111111'
					}]
				},{
					lng	: 106.50989,
					lat	: 30.50048,
					icon : '',
					msgDatas : '文中还分析了这几年来圈内的“倒星风潮”内幕,称周星驰人品差和忘恩负义只是误读。文中指出,当年洪金宝与周星驰因拍摄《功夫》闹翻系周星驰要求高,频频要求动作导演洪

金宝重拍,身为前辈的洪金宝觉得面子上过不去,就离开了剧组。这场纷争最终随着《功夫》的上映,洪金宝拿走了可观分红而告一段落。'
				}],
				onMarkerPointAdded : function(point, marker){
					console.log('marker pointer added');
				},
				polygonMsgBoxTitle	: '面标注',
				polygonPointDatas	: [['<b style="font-size:14px;color:#FF0000">中国光大银行重庆沙坪坝分行</b><br/>',{
					text : '名称：',
					content : '名称1111'
				},{
					text : '地址：',
					content : '地址111111'
				}]],
				defaultPolygonPoints : '106.44912,29.52886|106.44053,29.44847|106.63176,29.49569',
				onPolygonPointsAdded : function(points, polygon){
					console.log('polygon added');
				}
			});
		});
		
		
		function testAddPoint(){
			MAP.addMarkerPoints({
				lng : $('#lng1').val(),
				lat : $('#lat1').val()
			},{
				centerLng:$('#lng1').val(),
				centerLat:$('#lat1').val(),
				zoom:5,
				isClear:false
			});
		}
		
		function getPolygonDatas(){
			alert(MAP.getPolygonToolDrawPointStr());
			console.log(MAP.getPolygonToolDrawData());
		}
		
		function getMarkerToolData(){
			//alert(MAP.getMarkerToolPointData());
			console.log(MAP.getMarkerToolPointData());
		}
		
		var chooseDialog = null;
		function openChooseDialog(){
			if(!chooseDialog){
				chooseDialog = new BaseMapLngLatChooseDialog({
					dialog : {
						title : '点标注',
						width : 800,
						height: 600
					},
					map : {
						basePath : '${pageContext.request.contextPath}',
						isSearch : true
					},
					onOkEvent : function(pointData){
						alert(pointData.lng + ',' + pointData.lat);
					}
				});
			}
			chooseDialog.show();
		}
		
		
		var chooseAreaDialog = null;
		function openChooseAreaDialog(){
			if(!chooseAreaDialog){
				chooseAreaDialog = new BaseMapAreaChooseDialog({
					dialog : {
						title : '选取区域',
						width : 1000,
						height: 600
					},
					map : {
						basePath : '${pageContext.request.contextPath}',
						isSearch : true
					},
					onOkEvent : function(pointsData,pointsStr){
						alert(pointsStr);
					}
				});
			}
			chooseAreaDialog.show();
		}
		</script>
	</head>
	<body>
		<div id="mapDiv"></div>
		<input type="button" value="清除标注点" οnclick="MAP.clearMarkerPoints()" />
		<input type="text" id="lng1"/> <input type="text" id="lat1" />
		<input type="button" value="新增标注点" οnclick="testAddPoint()" />
		
		<input type="button" value="开启面标注" οnclick="MAP.openPolygonTool()" />
		<input type="button" value="获取面标注数据" οnclick="getPolygonDatas()" />
		
		<input type="button" value="开启点标注" οnclick="MAP.openMarkerTool()" />
		<input type="button" value="关闭点标注" οnclick="MAP.closeMarkerTool()" />
		<input type="button" value="获取点标注数据" οnclick="getMarkerToolData()" />
		
		<input type="button" value="弹出选择经纬度" οnclick="openChooseDialog()"	/>
		
		<input type="button" value="区域标注" οnclick="openChooseAreaDialog()"	/>
	</body>
</html>

/**************核心JS文件****************/ 
/***
 * 地图基类
 */
var BaseMap = function (config) {
    if (config == undefined) config = {};
    var c = config;


    //基础路径
    this.basePath = c.basePath || '';


    //初始化内部默认属性
    this._initDefaultProps();


    /*****参数及参数解析*******/
    //宽度
    this.width = c.width || 800;
    //高度
    this.height = c.height || 600;


    //地图面板id
    this.mapId = c.mapId || 'mapDiv';
    //投影方式
    this.projection = c.projection || 'EPSG:4326';
    //放大级别
    this.zoom = c.zoom || 12;
    //地图中心经度
    this.mapCenterLng = c.mapCenterLng || '106.50989';
    //地图中心纬度
    this.mapCenterLat = c.mapCenterLat || '29.50048';
    //是否启用鼠标滚轮放大
    this.enableHandleMouseScroll = c.enableHandleMouseScroll || false;
    //是否启用双击放大
    this.enableDoubleClickZoom = c.enableDoubleClickZoom || false;
    //默认地图类型（矢量地图1=TMAP_NORMAL_MAP、卫星2=TMAP_SATELLITE_MAP、混合3=TMAP_HYBRID_MAP）
    this.mapType = c.mapType || 1;
    //是否显示地图类型切换按钮
    this.isShowMapTypeBtn = (c.isShowMapTypeBtn == undefined) ? true : (c.isShowMapTypeBtn ? true : false);


    //鹰眼配置(anchor、size、isOpen)
    this.overviewMapCfg = c.overviewMapCfg || null;
    //是否显示比例尺（默认true）
    this.isScale = (c.isScale == undefined) ? true : (c.isScale ? true : false);
    //是否显示缩放平移控件（在没有传递isNavBtn的情况下，如果传递了navBtnCfg则未true），默认false
    this.isNavBtn = c.isNavBtn == undefined ? ((c.navBtnCfg && true) ? true : false) : (c.isNavBtn ? true : false);
    //缩放平移控件配置
    this.navBtnCfg = c.navBtnCfg || this.defaultNavBtnCfg;


    //默认标注点
    this.defaultMarkerPoints = c.defaultMarkerPoints || null;
    //经度key
    this.markerPointLngKey = c.markerPointLngKey || 'lng';
    //纬度key
    this.markerPointLatKey = c.markerPointLatKey || 'lat';
    //标注点图标key
    this.markerPointIconKey = c.markerPointIconKey || 'icon';
    //默认图标
    this.markerPointIcon = c.markerPointIcon || this.defaultMarkerPointIcon;
    this.markerPointToolIcon = c.markerPointToolIcon || this.defaultMarkerPointToolIcon;


    //标注点提示框标题
    this.markerPointMsgBoxTitle = c.markerPointMsgBoxTitle || '';


    //面提示框标题
    this.polygonMsgBoxTitle = c.polygonMsgBoxTitle || '';


    //面标注参数配置
    this.polygonCfg = c.polygonCfg || this.defaultPolygonCfg;


    //默认面标注点
    this.defaultPolygonPoints = c.defaultPolygonPoints || null;


    //与面标注点（defaultPolygonPoints）对应，要么是一个object（所有面标注共用数据），
    //要么是一个数组（与defaultPolygonPoints索引对应数据）
    this.polygonPointDatas = c.polygonPointDatas || null;


    //是否含有导航功能
    this.isNavigation = c.isNavigation || false;
    //是否含有搜索功能
    this.isSearch = c.isSearch || false;




    /*******内部数据********/
    this.data = {};
    //标注点
    this.data.markers = [];
    //面标注区域
    this.data.polygons = [];
    //搜索功能区ID
    this.data.searchBtnsId = [];
    //导航功能区ID
    this.data.navigationId = [];


    //面标注工具标注后的数据存储
    this.data.polygonToolDrawData = null;


    //当前点标注工具标注点的数据存储
    this.data.markerToolPointData = null;




    /*******方法回调********/
    //获取标注点的提示文字
    this.getPointAltText = c.getPointAltText || null;


    /*******事件处理********/
    //当标注点加载后触发，参数：point , marker
    this.onMarkerPointAdded = c.onMarkerPointAdded || null;
    this.onMarkerPointClick = c.onMarkerPointClick || null;


    //如果没有处理标注点单击事件，是否允许默认事件处理
    this.isAllowDefaultPointClickHandle = (c.isAllowDefaultClickHandle == undefined) ? true : (c.isAllowDefaultClickHandle ? true : false);


    //当面标注区域加载后触发，参数：points , polygon
    this.onPolygonPointsAdded = c.onPolygonPointsAdded || null;
    this.onPolygonPointsClick = c.onPolygonPointsClick || null;


    //如果没有处理面单击事件，是否允许默认事件处理
    this.isAllowDefaultPolygonClickHandle = (c.isAllowDefaultPolygonClickHandle == undefined) ? true : (c.isAllowDefaultPolygonClickHandle ? true : false);


    //当面标注完成后触发
    this.onDrawPolygonComplete = c.onDrawPolygonComplete || null;


    //执行初始化
    this.initialize();
};


//初始化内部默认属性
BaseMap.prototype._initDefaultProps = function () {
    /*******内部默认属性********/
    //比例尺控件对象
    this.scale = null;


    //缩放平移控件对象 
    this.navBtnControl = null;


    //面标注工具
    this.polygonTool = null;


    //点标注工具
    this.markerTool = null;
    //当前点标注工具标注的点
    this.currentMarkerPoint = null;


    //缩放平移控件默认配置
    this.defaultNavBtnCfg = {
        //缩放平移的显示类型 
        type: "TMAP_NAVIGATION_CONTROL_LARGE",
        //缩放平移控件显示的位置
        anchor: "TMAP_ANCHOR_TOP_LEFT",
        //缩放平移控件的偏移值 
        offset: [0, 0],
        showZoomInfo: true
    };


    //默认面标注配置
    this.defaultPolygonCfg = {
        //边线颜色
        strokeColor: '#F16C78',
        //填充颜色。当参数为空时，多边形覆盖物将没有填充效果
        fillColor: '#F4C3C3',
        //边线的宽度，以像素为单位
        strokeWeight: 4,
        //边线透明度，取值范围0 - 1
        strokeOpacity: 0.8,
        //填充的透明度，取值范围0 - 1
        fillOpacity: 0.3,
        //边线的样式，solid或dashed
        strokeStyle: 'solid',
        //是否显示面积，如果不显示面积，则可以作为画面控件使用，默认值为true
        showLabel: true
    };


    //默认标注点图标
    this.defaultMarkerPointIcon = this.getIcon('marker06', 72);


    //默认标注工具图标
    this.defaultMarkerPointToolIcon = this.getIcon('marker05', 72);
};


/**获取images/markers目录下的图标**/
BaseMap.prototype.getIcon = function (name, size) {
    if (!size) size = 24;
    return new TIcon(this.basePath + '/images/markers/' + name + '_' + size + '.png', new TSize(size, size));
};
//获取图标
BaseMap.prototype.getIconByUrl = function (url, size) {
    if (!size) {
        size = 24;
    }
    if (url.indexOf('http') == 0) {
        return new TIcon(url, new TSize(size, size));
    }
    return new TIcon(this.basePath + url, new TSize(size, size));
};


//地图初始化
BaseMap.prototype.initialize = function () {
    var me = this;


    //设置地图大小
    $('#' + me.mapId).width(me.width);
    $('#' + me.mapId).height(me.height);


    //生成导航面板
    if (me.isNavigation) {
        me.showNavigation();
    }


    //生成搜索面板
    if (me.isSearch) {
        me.showSearchPanel();
    }


    me.map = new TMap(me.mapId, me.projection);


    //设置中心点
    me.map.centerAndZoom(new TLngLat(me.mapCenterLng, me.mapCenterLat), me.zoom);


    //注册导航事件
    if (me.isNavigation) {
        me.registerNavigation();
    }


    //注册搜索事件
    if (me.isSearch) {
        me.registerSearch();
    }


    // 允许中键放大地图
    if (me.enableHandleMouseScroll) {
        me.map.enableHandleMouseScroll();
    }
    // 允许双击放大地图
    if (me.enableDoubleClickZoom) {
        me.map.enableDoubleClickZoom();
    }
    // 鹰眼
    if (me.overviewMapCfg) {
        me.map.addControl(new TOverviewMapControl(me.overviewMapCfg));
    }


    //比例尺
    if (me.isScale) {
        //创建比例尺控件对象
        me.scale = new TScaleControl();
        //添加比例尺控件
        me.map.addControl(me.scale);
    }


    //缩放平移控件
    if (me.isNavBtn) {
        //创建缩放平移控件对象 
        me.navBtnControl = new TNavigationControl(me.navBtnCfg);
        //添加缩放平移控件 
        me.map.addControl(me.navBtnControl);
    }


    // 地图类型
    if (me.mapType) {
        if (me.mapType === 2) {
            me.map.setMapType(TMAP_SATELLITE_MAP);
        } else if (me.mapType === 3) {
            me.map.setMapType(TMAP_HYBRID_MAP);
        } else {
            //默认矢量地图
            me.map.setMapType(TMAP_NORMAL_MAP);
        }
    }


    //地图类型按钮
    if (me.isShowMapTypeBtn) {
        me.map.addControl(new TMapTypeControl({ mapTypes: [TMAP_NORMAL_MAP, TMAP_SATELLITE_MAP, TMAP_HYBRID_MAP] }));
    }


    //加载默认标注点
    if (me.defaultMarkerPoints) {
        me.addMarkerPoints(me.defaultMarkerPoints, null);
    }


    //加载默认面标注
    if (me.defaultPolygonPoints) {
        me.addPolygonPoints(me.defaultPolygonPoints, null);
    }


};


//生成ID
BaseMap.prototype._genDomID = function (type) {
    __map_gen_dom_idx++;
    return "_basemap_gen_" + (type || '') + __map_gen_dom_idx;
};


//清除标注点
BaseMap.prototype.clearMarkerPoints = function () {
    var me = this;
    if (me.data.markers && me.data.markers.length) {
        for (var i in me.data.markers) {
            me.map.removeOverLay(me.data.markers[i]);
        }
        me.data.markers.length = 0;
    }
    me.data.markers = [];
};


//添加标注点
//cfg = {centerLng:'',centerLat:'',zoom:12,isClear:false} 
//配置包含中心点经纬度，地图放大级别，是否清除已有的标注点
BaseMap.prototype.addMarkerPoints = function (points, cfg) {
    var me = this;
    if (cfg && cfg.isClear) {
        me.clearMarkerPoints();
    }


    if (points) {
        if (!me.data.markers) {
            me.data.markers = [];
        }
        if (points.length) {
            for (var i = 0; i < points.length; i++) {
                var p = points[i];
                var marker = new TMarker(new TLngLat(p[me.markerPointLngKey], p[me.markerPointLatKey]));
                var markerIcon = me.markerPointIcon;
                if (p[me.markerPointIconKey]) {
                    markerIcon = me.getIconByUrl(p[me.markerPointIconKey]);
                }
                marker.setIcon(markerIcon);
                var altText = null;
                if (me.getPointAltText) {
                    altText = me.getPointAltText.call(me, p, marker);
                }
                if (altText) {
                    marker.setTitle(altText);
                }
                var clickEventHandler = null;
                if (me.onMarkerPointClick) {
                    clickEventHandler = me.onMarkerPointClick;
                } else if (me.isAllowDefaultPointClickHandle) {
                    clickEventHandler = me.defaultPointClickHandler;
                }
                if (clickEventHandler) {
                    (function (me, p, marker) {
                        TEvent.addListener(marker, "click", function () {
                            clickEventHandler.call(me, p, marker, this);
                        });
                    })(me, p, marker);
                }
                me.map.addOverLay(marker);
                me.data.markers.push(marker);
                if (me.onMarkerPointAdded) {
                    (function (me, p, marker) {
                        me.onMarkerPointAdded.call(me, p, marker);
                    })(me, p, marker);
                }
            }
        } else {
            var p = points;
            var marker = new TMarker(new TLngLat(p[me.markerPointLngKey], p[me.markerPointLatKey]));
            var markerIcon = me.markerPointIcon;
            if (p[me.markerPointIconKey]) {
                markerIcon = me.getIconByUrl(p[me.markerPointIconKey]);
            }
            marker.setIcon(markerIcon);
            var altText = null;
            if (me.getPointAltText) {
                altText = me.getPointAltText.call(me, p, marker);
            }
            if (altText) {
                marker.setTitle(altText);
            }
            var clickEventHandler = null;
            if (me.onMarkerPointClick) {
                clickEventHandler = me.onMarkerPointClick;
            } else if (me.isAllowDefaultPointClickHandle) {
                clickEventHandler = me.defaultPointClickHandler;
            }
            if (clickEventHandler) {
                (function (me, p, marker) {
                    TEvent.addListener(marker, "click", function () {
                        clickEventHandler.call(me, p, marker, this);
                    });
                })(me, p, marker);
            }
            me.map.addOverLay(marker);
            me.data.markers.push(marker);
            if (me.onMarkerPointAdded) {
                (function (me, p, marker) {
                    me.onMarkerPointAdded.call(me, p, marker);
                })(me, p, marker);
            }
        }
    }


    //解析配置
    if (cfg) {
        if (cfg.centerLng != undefined && cfg.centerLat != undefined) {
            me.map.centerAndZoom(new TLngLat(cfg.centerLng, cfg.centerLat), cfg.zoom || me.zoom);
        }
    }
};


//清除标注点
BaseMap.prototype.clearPolygonPoints = function () {
    var me = this;
    if (me.data.polygons && me.data.polygons.length) {
        for (var i in me.data.polygons) {
            me.map.removeOverLay(me.data.polygons[i]);
        }
        me.data.polygons.length = 0;
    }
    me.data.polygons = [];
};




//添加标注面
//polygonPointStrs 一个字符串或字符串数组
//一个字符串代表一个多边形，字符串中包含多个经纬度，多个经纬度组合用竖线(|)分隔，经度、纬度之间用逗号(,)分隔
//cfg = {centerLng:'',centerLat:'',zoom:12,isClear:false} 
//配置包含中心点经纬度，地图放大级别，是否清除已有的面标注点
BaseMap.prototype.addPolygonPoints = function (polygonPointStrs, cfg) {
    var me = this;
    if (cfg && cfg.isClear) {
        me.clearPolygonPoints();
    }


    if (polygonPointStrs) {
        var p = null, polygon = null;
        if (!me.data.polygons) {
            me.data.polygons = [];
        }
        if (typeof polygonPointStrs == 'string') {
            //单个面标注数据
            if (typeof me.polygonPointDatas == 'string') {
                me._addPolygon(polygonPointStrs, me.polygonPointDatas);
            } else if (me.polygonPointDatas && me.polygonPointDatas.length) {
                me._addPolygon(polygonPointStrs, me.polygonPointDatas[0] || null);
            } else {
                me._addPolygon(polygonPointStrs, me.polygonPointDatas || null);
            }
        } else {
            //多个面标注数据
            for (var i in polygonPointStrs) {
                if (typeof me.polygonPointDatas == 'string') {
                    me._addPolygon(polygonPointStrs[i], me.polygonPointDatas);
                } else if (me.polygonPointDatas && me.polygonPointDatas.length) {
                    me._addPolygon(polygonPointStrs[i], me.polygonPointDatas[i] || null);
                } else {
                    me._addPolygon(polygonPointStrs[i], me.polygonPointDatas || null);
                }
            }
        }
    }


    //解析配置
    if (cfg) {
        if (cfg.centerLng != undefined && cfg.centerLat != undefined) {
            me.map.centerAndZoom(new TLngLat(cfg.centerLng, cfg.centerLat), cfg.zoom || me.zoom);
        }
    }
};


//添加面标注（私有方法）
BaseMap.prototype._addPolygon = function (polygonPointStr, polygonPointData) {
    var me = this;
    var items = polygonPointStr.split("|");
    if (items && items.length) {
        var lngLatStr = null, lngLat = null;
        var polygon = null, points = [];
        for (var i in items) {
            lngLatStr = items[i];
            if (lngLatStr == null || '' == lngLatStr) {
                continue;
            }
            lngLat = lngLatStr.split(",");
            points.push(new TLngLat(lngLat[0], lngLat[1]));
        }
        //面标注至少3个点
        if (points.length >= 3) {
            polygon = new TPolygon(points, me.polygonCfg);




            var clickEventHandler = null;
            if (me.onPolygonPointsClick) {
                clickEventHandler = me.onPolygonPointsClick;
            } else if (me.isAllowDefaultPolygonClickHandle) {
                clickEventHandler = me.defaultPolygonClickHandler;
            }
            if (clickEventHandler) {
                (function (me, points, polygonPointData, polygon) {
                    TEvent.addListener(polygon, "click", function (eventPixel) {
                        clickEventHandler.call(me, points, polygonPointData, polygon, eventPixel, this);
                    });
                })(me, points, polygonPointData, polygon);
            }


            me.map.addOverLay(polygon);
            me.data.polygons.push(polygon);


            if (me.onPolygonPointsAdded) {
                (function (me, points, polygonPointData, polygon) {
                    me.onPolygonPointsAdded.call(me, points, polygonPointData, polygon);
                })(me, points, polygonPointData, polygon);
            }
        }
    }
};


//标注点单击事件默认处理方法，弹出提示框
BaseMap.prototype.defaultPointClickHandler = function (point, marker, event) {
    var me = this;
    var config = {
        offset: new TPixel(-125, 90),
        position: new TLngLat(marker.getLngLat().lng, marker.getLngLat().lat)
    };
    me.showMsgBox((me.markerPointMsgBoxTitle || ''), point && point.msgDatas, config, 320, 155);
};


//面单击事件默认处理方法，弹出提示框
BaseMap.prototype.defaultPolygonClickHandler = function (points, polygonPointData, polygon, pixel, event) {
    var me = this;
    var bounds = polygon.getBounds();
    var center = bounds.getCenter();
    var config = {
        offset: new TPixel(-130, 20),
        //position: new TLngLat(points[0].getLng(), points[0].getLat())
        position: new TLngLat(center.getLng(), center.getLat())
    };
    me.showMsgBox((me.polygonMsgBoxTitle || ''), polygonPointData, config, 320, 155);
};


//弹出提示
BaseMap.prototype.showMsgBox = function (title, msgDatas, cfg, width, height) {
    var me = this;
    var contentWidth = width - 20;
    if (contentWidth < 220) {
        contentWidth = 220;
    }
    var contentHeight = height - 55;
    if (contentHeight < 50) {
        contentHeight = 50;
    }
    var html = [];
    var msgLabelId = me._genDomID('alt_msg_label');
    html.push('<div id="' + msgLabelId + '" style="width:' + width + 'px;">');
    html.push('<div style="margin:4px 10px 3px 10px;height:18px;"><b><span style="color:#333333;font-size:14px;">'
			+ (title || '') + '</span><span  style="float:right;width:12px;height:12px;background:url(\''
			+ me.basePath + '/images/btn_close.jpg\') no-repeat 0px 0px;cursor:pointer;" title="关闭" class="close_btn"></span></b></div>');
    html.push('<hr style="height: 2px;padding:0px;margin:0px 3px; background-color: #484848;">');
    html.push('<div style="margin:10px;height:' + contentHeight + 'px;overflow:auto;">');
    html.push('<table width="' + contentWidth + '" border="0" style="font-size:12px;">');
    if (typeof msgDatas == 'string') {
        html.push('<tr><td align="left">' + msgDatas + '</td></tr>');
    } else {
        if (msgDatas && msgDatas.length) {
            for (var i in msgDatas) {
                if (typeof msgDatas[i] == 'string') {
                    html.push('<tr><td align="left" colspan="2">' + msgDatas[i] + '</td></tr>');
                } else {
                    html.push('<tr><td class="key" width="60" align="left" style="font-weight:bold;">' + (msgDatas[i]['text'] || ''));
                    html.push('</td><td class="value" align="left">' + (msgDatas[i]['content'] || '') + '</td></tr>');
                }
            }
        }
    }
    html.push('</table>');
    html.push('</div>');
    html.push('</div>');


    var altMsgLabel = new TLabel(cfg);
    altMsgLabel.setTitle(title || '');
    altMsgLabel.setLabel(html.join(''));
    altMsgLabel.setBorderColor('#B3B3B3');
    me.map.addOverLay(altMsgLabel);


    //绑定关闭图层事件
    $('#' + msgLabelId + ' .close_btn').delegate('', 'click', function () {
        me.map.removeOverLay(altMsgLabel);
    });
};


//开启面标注工具
BaseMap.prototype.openPolygonTool = function (polygonCfg) {
    var me = this;
    if (!me.map) {
        return;
    }
    if (!me.polygonTool) {
        //清除数据
        me.data.polygonToolDrawData = null;
        me.polygonTool = new TPolygonTool(me.map, polygonCfg || me.polygonCfg);
        //注册测面工具绘制完成后的事件 
        //参数说明： 
        //points：用户最后绘制的折线的点坐标数组。 
        //length：用户最后绘制的折线的地理长度。
        //polyline：当前测距所画线的对象。
        TEvent.addListener(this.polygonTool, "draw", function (points, length, polyline) {
            //数据存储
            me.data.polygonToolDrawData = {
                //坐标点数组
                'points': points,
                //总面积（单位：平方米）
                'area': length,
                //坐标点总距离
                'totalDistance': me.polygonTool.getDistance(points)
            };


            //关闭面标注工具
            me.closePolygonTool();


            //回调事件
            if (me.onDrawPolygonComplete) {
                me.onDrawPolygonComplete.call(me, points, length, polyline, this);
            }
        });
    }
    me.polygonTool.open();
};


//关闭面标注工具
BaseMap.prototype.closePolygonTool = function () {
    var me = this;
    if (me.polygonTool) {
        me.polygonTool.close();
    }
};


//获取面标注数据
BaseMap.prototype.getPolygonToolDrawData = function () {
    return this.data.polygonToolDrawData;
};


//获取面标注坐标串
BaseMap.prototype.getPolygonToolDrawPointStr = function () {
    if (this.data.polygonToolDrawData) {
        var points = this.data.polygonToolDrawData.points;
        var pointStrArr = [];
        if (points && points.length) {
            for (var i in points) {
                pointStrArr.push(points[i].getLng() + ',' + points[i].getLat());
            }
        }
        if (pointStrArr.length) {
            return pointStrArr.join('|');
        }
    }
    return '';
};




//开启点标注工具
BaseMap.prototype.openMarkerTool = function (markerIcon) {
    var me = this;
    if (!me.map) {
        return;
    }
    if (!me.markerTool) {
        me.data.markerToolPointData = null;
        me.markerTool = new TMarkTool(me.map);
        //注册标注的mouseup事件 
        TEvent.addListener(me.markerTool, "mouseup", function (point) {
            me.data.markerToolPointData = {
                'lng': point.getLng(),
                'lat': point.getLat()
            };


            me.currentMarkerPoint = new TMarker(point);
            me.currentMarkerPoint.setTitle('经纬度：' + point.getLng() + ',' + point.getLat());
            if (markerIcon) {
                me.currentMarkerPoint.setIcon(markerIcon);
            } else {
                me.currentMarkerPoint.setIcon(me.markerPointToolIcon);
            }
            me.map.addOverLay(me.currentMarkerPoint);
            me.currentMarkerPoint.enableEdit();
            TEvent.bind(me.currentMarkerPoint, "dragend", me.currentMarkerPoint, function (lngLat) {
                me.data.markerToolPointData = {
                    'lng': lngLat.getLng(),
                    'lat': lngLat.getLat()
                };
                me.currentMarkerPoint.setTitle('经纬度：' + lngLat.getLng() + ',' + lngLat.getLat());
            });
            me.markerTool.close();
        });
        me.markerTool.open();
    } else {
        if (this.currentMarkerPoint) {
            this.currentMarkerPoint.enableEdit();
        }
    }
};


//关闭点标注
BaseMap.prototype.closeMarkerTool = function (markerCfg) {
    if (this.currentMarkerPoint) {
        this.currentMarkerPoint.disableEdit();
    }
}


//获取点标注数据
BaseMap.prototype.getMarkerToolPointData = function () {
    return this.data.markerToolPointData;
};




/********************************************************************导航函数************************************************************/
//生成导航面板
BaseMap.prototype.showNavigation = function () {
    var me = this;
    me.data.navigationId.starBtnId = me._genDomID('starBtn');
    me.data.navigationId.endBtnId = me._genDomID('endBtn');
    me.data.navigationId.searchBtnId = me._genDomID('searchBtnId');
    me.data.navigationId.resultDiv = me._genDomID('resultDivNavigation');
    me.data.navigationId.start = me._genDomID('start');
    me.data.navigationId.end = me._genDomID('end');
    me.data.navigationId.endTips = me._genDomID('endTips');
    var searchDivId = me._genDomID('searchDiv');


    var html = '';
    html += '<div id=' + searchDivId + ' style="background-color: RGB(237,244,255);height=500px;">';
    html += '<div style="font-size:13px; border:1px solid #999999; line-height:27px; padding-left:7px">';
    html += '<input type="radio" name="planType" value="0" checked="checked"/>最少时间';
    html += '<input type="radio" name="planType" value="1"/>最短距离';
    html += '<input type="radio" name="planType" value="2"/>避开高速';
    html += '<input type="radio" name="planType" value="3"/>步行';
    html += '<br/>';
    html += '起点：<input type="text" id="' + me.data.navigationId.start + '" value="" readonly="readonly"/>';
    html += '<input type="button" value="选择起点" id="' + me.data.navigationId.starBtnId + '" />';
    html += '<br/>';
    html += '终点：<input type="text" id="' + me.data.navigationId.endTips + '" value="" readonly="readonly"/>';
    html += '<input type="hidden" id="' + me.data.navigationId.end + '" value=""/>';
    html += '<input type="button" id=' + me.data.navigationId.endBtnId + ' value="终点"/>';
    html += '<br/>';
    html += '<input type="button" id=' + me.data.navigationId.searchBtnId + ' value="驾车路线搜索"/>';
    html += '</div>';
    html += '<br/>';
    html += '<div id="' + me.data.navigationId.resultDiv + '" style=" width:300px; overflow-y:scroll; border: solid 1px gray;"></div>';
    html += '</div>';


    var navigationPanelWidth = 310;
    var mapWidth = me.width - navigationPanelWidth - 20;
    me.containerId = me.mapId;
    me.mapId = me._genDomID('mapDiv');
    var navigationPanelId = me._genDomID('navigationPanel');
    var mapContainerDom = $('#' + me.containerId);
    mapContainerDom.css('width', me.width);
    mapContainerDom.css('height', me.height);
    mapContainerDom.layout();
    mapContainerDom.layout('add', {
        region: 'west',
        width: navigationPanelWidth,
        height: me.height,
        style: {
            zIndex: 100
        },
        title: '导航',
        content: '<div id="' + navigationPanelId + '"></div>',
        split: true,
        onCollapse: function () {
            me.map.checkResize();
        },
        onExpand: function () {
            me.map.checkResize();
        }
    });


    $('#' + navigationPanelId).append($(html));


    mapContainerDom.layout('add', {
        region: 'center',
        style: {
            zIndex: 98
        },
        content: '<div id="' + me.mapId + '" style="width:100%;height:100%;"></div>'
    });


    $('#' + searchDivId).height((me.height - 30));


};


//定位关键点 
BaseMap.prototype.showNavigationPosition = function (lng, lat, des) {
    var me = this;
    if (me.infoWin) {
        me.map.removeOverLay(me.infoWin);
        me.infoWin = null;
    }
    var lnglat = new TLngLat(lng, lat);
    me.infoWin = new TInfoWindow(lnglat, new TPixel([0, 0]));
    me.infoWin.setLabel(des);
    me.map.addOverLay(me.infoWin);
    //打开信息窗口时地图自动平移 
    me.infoWin.enableAutoPan();
}


//注册导航功能
BaseMap.prototype.registerNavigation = function () {
    var me = this;
    me.startIcon = me.basePath + '/images/start.png';
    me.endIcon = me.basePath + '/images/end.png';
    var configCar = {
        policy: 0,
        onSearchComplete: function (result) {
            //添加起始点 
            var icon = new TIcon(me.startIcon, new TSize(24, 24), { anchor: new TPixel(12, 12) })
            var startMarker = new TMarker(me.startLngLat, { icon: icon });
            me.map.addOverLay(startMarker);
            //向地图上添加终点 
            var icon = new TIcon(me.endIcon, new TSize(24, 24), { anchor: new TPixel(12, 12) })
            var endMarker = new TMarker(me.endLngLat, { icon: icon });
            me.map.addOverLay(endMarker);


            me.obj = result;
            var resultList = document.createElement("div");
            //获取方案个数  
            var routes = result.getNumPlans();
            for (var i = 0; i < routes; i++) {
                //获得单条驾车方案结果对象 
                var plan = result.getPlan(i);


                //显示单个方案面板 
                var div = document.createElement("div");
                div.style.cssText = "font-size:12px; cursor:pointer; border:1px solid #999999";


                //显示方案内容 
                var describeStr = "<strong>总时间：" + plan.getDuration() + "秒，总距离：" + Math.round(plan.getDistance()) + "公里</strong>";
                describeStr += "<div><img src='" + me.startIcon + "'/>" + $('#' + me.data.navigationId.start).val() + "</div>";


                //显示该方案每段的描述信息 
                var numRoutes = plan.getNumRoutes();
                for (var m = 0; m < numRoutes; m++) {
                    var route = plan.getRoute(m);
                    describeStr += (m + 1) + ".<span>" + route.getDescription() + "</span><br/>"


                    //显示该方案每段的详细描述信息 
                    var numStepsStr = "";
                    var numSteps = route.getNumSteps();
                    for (var n = 0; n < numSteps; n++) {
                        var step = route.getStep(n);
                        var showPositionId = me._genDomID('position');
                        numStepsStr += "<p>" + (n + 1) + ")<a href='#' id='" + showPositionId + "' >" + step.getDescription() + "</a></p>";
                        (function (step) {
                            $('#' + showPositionId).delegate('', 'click', function () {
                                me.showNavigationPosition(step.getPosition().getLng(), step.getPosition().getLat(), step.getDescription());
                            });
                        })(step);
                    }
                    describeStr += numStepsStr;
                }
                describeStr += "<div><img src='" + me.endIcon + "'/>" + $('#' + me.data.navigationId.end).val() + "</div>";
                div.innerHTML = describeStr;
                resultList.appendChild(div);


                //显示驾车线路 
                var line = new TPolyline(plan.getPath(), { strokeColor: "red", strokeWeight: 5, strokeOpacity: 0.9 });
                me.map.addOverLay(line);


                //显示最佳级别 
                me.map.setViewport(plan.getPath());
            }
            //显示公交搜索结果 
            $('#' + me.data.navigationId.resultDiv).append(resultList);
        }
    };
    me.drivingRoute = new TDrivingRoute(me.map, configCar);
    var config = {
        icon: new TIcon(me.startIcon, new TSize(24, 24), { anchor: new TPixel(14, 28) })
    };
    me.startTool = new TMarkTool(me.map, config);
    TEvent.addListener(me.startTool, "mouseup", function (point) {
        var icon = new TIcon(me.startIcon, new TSize(24, 24), { anchor: new TPixel(14, 28) })
        var startMarker = new TMarker(point, { icon: icon });
        me.map.addOverLay(startMarker);
        me.startTool.close();
        $('#' + me.data.navigationId.start).val(point.getLng() + "," + point.getLat());
    });
    var config = {
        icon: new TIcon(me.endIcon, new TSize(24, 24), { anchor: new TPixel(14, 28) })
    };
    me.endTool = new TMarkTool(me.map, config);
    TEvent.addListener(me.endTool, "mouseup", function (point) {
        var icon = new TIcon(me.endIcon, new TSize(24, 24), { anchor: new TPixel(14, 28) })
        var endMarker = new TMarker(point, { icon: icon });
        me.map.addOverLay(endMarker);
        me.endTool.close();
        $('#' + me.data.navigationId.end).val(point.getLng() + "," + point.getLat());
        $('#' + me.data.navigationId.endTips).val(point.getLng() + "," + point.getLat());
    });


    // 设置终点的值
    //TODO
    //	$("#end").val(tempLng+","+tempLat);
    //	$("#endTips").val(name);


    // 给开始结束按钮绑定事件
    $('#' + me.data.navigationId.starBtnId).bind('click', function () {
        me.startTool.open();
    });
    $('#' + me.data.navigationId.endBtnId).bind('click', function () {
        me.endTool.open();
    });
    $('#' + me.data.navigationId.searchBtnId).bind('click', function () {
        $('#' + me.data.navigationId.resultDiv).html('');
        me.map.clearOverLays();
        var startVal = $('#' + me.data.navigationId.start).val().split(",");
        me.startLngLat = new TLngLat(startVal[0], startVal[1]);
        var endVal = $('#' + me.data.navigationId.end).val().split(",");
        me.endLngLat = new TLngLat(endVal[0], endVal[1]);
        me.drivingRoute.setPolicy(getNavigationRadioValue());
        me.drivingRoute.search(me.startLngLat, me.endLngLat);
    });
}


//获得驾车路线策略 
function getNavigationRadioValue() {
    var obj = $('input[name=planType]');
    for (var i = 0; i < obj.length; i++) {
        if (obj[i].checked) {
            return obj[i].value;
        }
    }
}
/********************************************************************导航函数end************************************************************/


/********************************************************************搜索函数************************************************************/
BaseMap.prototype.localSearchResult = function (result) {
    this.clearAllSearchContent();
    this.promptSearch(result);
    switch (parseInt(result.getResultType())) {
        case 1:
            this.poisSearch(result.getPois());
            break;
        case 2:
            this.statisticsSearch(result.getStatistics());
            break;
        case 3:
            this.areaSearch(result.getArea());
            break;
        case 4:
            this.suggestsSearch(result.getSuggests());
            break;
        case 5:
            this.lineDataSearch(result.getLineData());
            break;
    }
}


BaseMap.prototype.registerSearch = function () {
    var me = this;
    var config = {
        pageCapacity: 17,	//每页显示的数量 
        //接收数据的回调函数 
        onSearchComplete: function () {
            me.localSearchResult.apply(me, arguments);
        }
    }
    me.localsearch = new TLocalSearch(me.map, config);
    $('#' + me.data.searchBtnsId.searchBtn).bind('click', function () {
        me.localsearch.search($('#' + me.data.searchBtnsId.keyWord).val());
        $('#' + me.data.searchBtnsId.pageDiv).show();
    });
}


BaseMap.prototype.clearAllSearchContent = function () {
    this.map.clearOverLays();
    $('#' + this.data.searchBtnsId.searchDiv).html('');
    $('#' + this.data.searchBtnsId.resultDiv).css('display', 'none');
    $('#' + this.data.searchBtnsId.statisticsDiv).html('');
    $('#' + this.data.searchBtnsId.statisticsDiv).css('display', 'none');
    $('#' + this.data.searchBtnsId.promptDiv).html('');
    $('#' + this.data.searchBtnsId.promptDiv).css('display', 'none');
    $('#' + this.data.searchBtnsId.suggestsDiv).html('');
    $('#' + this.data.searchBtnsId.suggestsDiv).css('display', 'none');
    $('#' + this.data.searchBtnsId.lineDataDiv).html('');
    $('#' + this.data.searchBtnsId.lineDataDiv).css('display', 'none');


    marker = new TMarker(new TLngLat(this.mapCenterLng, this.mapCenterLat));
    this.map.addOverLay(marker);
    marker.enableEdit();
    listener = TEvent.bind(marker, "dragend", marker, this.dragendSearch);
}


BaseMap.prototype.promptSearch = function (obj) {
    var prompts = obj.getPrompt();
    if (prompts) {
        var promptHtml = "";
        for (var i = 0; i < prompts.length; i++) {
            var prompt = prompts[i];
            var promptType = prompt.type;
            var promptAdmins = prompt.admins;
            var meanprompt = prompt.DidYouMean;
            if (promptType == 1) {
                promptHtml += "<p>您是否要在" + promptAdmins[0].name + "</strong>搜索更多包含<strong>" + obj.getKeyword() + "</strong>的相关内容？<p>";
            } else if (promptType == 2) {
                promptHtml += "<p>在<strong>" + promptAdmins[0].name + "</strong>没有搜索到与<strong>" + obj.getKeyword() + "</strong>相关的结果。<p>";
                if (meanprompt) {
                    promptHtml += "<p>您是否要找：<font weight='bold' color='#035fbe'><strong>" + meanprompt + "</strong></font><p>";
                }
            } else if (promptType == 3) {
                promptHtml += "<p style='margin-bottom:3px;'>有以下相关结果，您是否要找：</p>"
                for (i = 0; i < promptAdmins.length; i++) {
                    promptHtml += "<p>" + promptAdmins[i].name + "</p>";
                }
            }
        }
        if (promptHtml != "") {
            $('#' + this.data.searchBtnsId.promptDiv).css('display', 'block');
            $('#' + this.data.searchBtnsId.promptDiv).html(promptHtml);
        }
    }
}


//解析点数据结果 
BaseMap.prototype.poisSearch = function (obj) {
    var me = this;
    if (obj) {
        //显示搜索列表 
        var divMarker = document.createElement("div");
        //坐标数组，设置最佳比例尺时会用到 
        var zoomArr = [];
        for (var i = 0; i < obj.length; i++) {
            //闭包 
            (function (i) {
                //名称 
                var name = obj[i].name;
                //地址 
                var address = obj[i].address;
                //坐标 
                var lnglatArr = obj[i].lonlat.split(" ");
                var lnglat = new TLngLat(lnglatArr[0], lnglatArr[1]);


                var winHtml = "地址:" + address;


                //创建标注对象 
                var marker = new TMarker(lnglat);
                //地图上添加标注点 
                me.map.addOverLay(marker);
                //注册标注点的点击事件 
                TEvent.bind(marker, "click", marker, function () {
                    var info = this.openInfoWinHtml(winHtml);
                    info.setTitle(name);
                });
                zoomArr.push(lnglat);


                //在页面上显示搜索的列表 
                var a = document.createElement("a");
                a.href = "javascript://";
                a.innerHTML = name;
                a.onclick = function () {
                    me.showPositionSearch(marker, name, winHtml);
                }
                divMarker.appendChild(document.createTextNode((i + 1) + "."));
                divMarker.appendChild(a);
                divMarker.appendChild(document.createElement("br"));
            })(i);
        }
        //显示地图的最佳级别 
        me.map.setViewport(zoomArr);
        //显示搜索结果 
        divMarker.appendChild(document.createTextNode('共' + me.localsearch.getCountNumber() + '条记录，分' + me.localsearch.getCountPage() + '页,当前第' + me.localsearch.getPageIndex() + '页'));
        $('#' + this.data.searchBtnsId.searchDiv).append(divMarker);
        $('#' + this.data.searchBtnsId.resultDiv).css('display', 'block');
    }
}


//显示信息框 
BaseMap.prototype.showPositionSearch = function (marker, name, winHtml) {
    var info = marker.openInfoWinHtml(winHtml);
    info.setTitle(name);
}


//解析推荐城市
BaseMap.prototype.statisticsSearch = function (obj) {
    if (obj) {
        //坐标数组，设置最佳比例尺时会用到 
        var pointsArr = [];
        var priorityCitysHtml = "";
        var allAdminsHtml = "";
        var priorityCitys = obj.priorityCitys;
        if (priorityCitys) {
            //推荐城市显示  
            priorityCitysHtml += "在中国以下城市有结果<ul>";
            for (var i = 0; i < priorityCitys.length; i++) {
                priorityCitysHtml += "<li>" + priorityCitys[i].name + "(" + priorityCitys[i].count + ")</li>";
            }
            priorityCitysHtml += "</ul>";
        }


        var allAdmins = obj.allAdmins;
        if (allAdmins) {
            allAdminsHtml += "更多城市<ul>";
            for (var i = 0; i < allAdmins.length; i++) {
                allAdminsHtml += "<li>" + allAdmins[i].name + "(" + allAdmins[i].count + ")";
                var childAdmins = allAdmins[i].childAdmins;
                if (childAdmins) {
                    for (var m = 0; m < childAdmins.length; m++) {
                        allAdminsHtml += "<blockquote>" + childAdmins[m].name + "(" + childAdmins[m].count + ")</blockquote>";
                    }
                }
                allAdminsHtml += "</li>"
            }
            allAdminsHtml += "</ul>";
        }
        document.getElementById("statisticsDiv").style.display = "block";
        document.getElementById("statisticsDiv").innerHTML = priorityCitysHtml + allAdminsHtml;


        $('#' + this.data.searchBtnsId.statisticsDiv).css('display', 'block');
        $('#' + this.data.searchBtnsId.statisticsDiv).html(priorityCitysHtml + allAdminsHtml);
    }
}


//解析行政区划边界 
BaseMap.prototype.areaSearch = function (obj) {
    if (obj) {
        //坐标数组，设置最佳比例尺时会用到 
        var pointsArr = [];
        var points = obj.points;
        for (var i = 0; i < points.length; i++) {
            var regionLngLats = [];
            var regionArr = points[i].region.split(",");
            for (var m = 0; m < regionArr.length; m++) {
                var lnglatArr = regionArr[m].split(" ");
                var lnglat = new TLngLat(lnglatArr[0], lnglatArr[1]);
                regionLngLats.push(lnglat);
                pointsArr.push(lnglat);
            }
            //创建线对象 
            var line = new TPolyline(regionLngLats, { strokeColor: "blue", strokeWeight: 3, strokeOpacity: 1, strokeStyle: "dashed" });
            //向地图上添加线 
            this.map.addOverLay(line);
        }
        //显示最佳比例尺 
        this.map.setViewport(pointsArr);
    }
}


//解析建议词信息 
BaseMap.prototype.suggestsSearch = function (obj) {
    if (obj) {
        //建议词提示，如果搜索类型为公交规划建议词或公交站搜索时，返回结果为公交信息的建议词。 
        var suggestsHtml = "建议词提示<ul>";
        for (var i = 0; i < obj.length; i++) {
            suggestsHtml += "<li>" + obj[i].name + "&nbsp;&nbsp;<font style='color:#666666'>" + obj[i].address + "</font></li>";
        }
        $('#' + this.data.searchBtnsId.suggestsDiv).css('display', 'block');
        $('#' + this.data.searchBtnsId.suggestsDiv).html(suggestsHtml);
    }
}


//解析公交信息 
BaseMap.prototype.lineDataSearch = function (obj) {
    if (obj) {
        //公交提示 
        var lineDataHtml = "公交提示<ul>";
        for (var i = 0; i < obj.length; i++) {
            lineDataHtml += "<li>" + obj[i].name + "&nbsp;&nbsp;<font style='color:#666666'>共" + obj[i].stationNum + "站</font></li>";
        }
        lineDataHtml += "</ul>";


        $('#' + this.data.searchBtnsId.lineDataDiv).css('display', 'block');
        $('#' + this.data.searchBtnsId.lineDataDiv).html(lineDataHtml);
    }
}


BaseMap.prototype.dragendSearch = function (lnglat) {
    this.map.removeOverLay(infoWin);
    var nowLng = lnglat.getLng();
    var nowLat = lnglat.getLat();
    var config = {
        text: "经度：" + nowLng + "</br>纬度：" + nowLat,
        offset: new TPixel(-45, -50),
        position: lnglat
    };
    infoWin = new TLabel(config);
    this.map.addOverLay(infoWin);
}


BaseMap.prototype.showSearchPanel = function () {
    var me = this;
    me.data.searchBtnsId.searchBtn = me._genDomID('searchBtn');
    me.data.searchBtnsId.promptDiv = me._genDomID('promptDiv');
    me.data.searchBtnsId.statisticsDiv = me._genDomID('statisticsDiv');
    me.data.searchBtnsId.suggestsDiv = me._genDomID('suggestsDiv');
    me.data.searchBtnsId.lineDataDiv = me._genDomID('lineDataDiv');
    me.data.searchBtnsId.resultDiv = me._genDomID('resultDiv');
    me.data.searchBtnsId.searchDiv = me._genDomID('searchDiv');
    me.data.searchBtnsId.pageDiv = me._genDomID('pageDiv');
    me.data.searchBtnsId.first_page = me._genDomID('first_page');
    me.data.searchBtnsId.up_page = me._genDomID('up_page');
    me.data.searchBtnsId.next_page = me._genDomID('next_page');
    me.data.searchBtnsId.end_page = me._genDomID('end_page');
    me.data.searchBtnsId.turn_page = me._genDomID('turn_page');
    me.data.searchBtnsId.hide_page = me._genDomID('hide_page');
    me.data.searchBtnsId.pageId = me._genDomID('pageId');
    me.data.searchBtnsId.keyWord = me._genDomID('keyWord');
    var searchDivId = me._genDomID('searchDiv');


    var html = '';
    html += '<div id=' + searchDivId + ' style="background-color: RGB(237,244,255);height=500px;">';
    html += '<div style="font-size:13px; border:1px solid #999999; line-height:27px; padding-left:7px">';
    html += '搜索内容：<input type="text" id="' + me.data.searchBtnsId.keyWord + '"/>';
    html += '<input type="button" id="' + me.data.searchBtnsId.searchBtn + '" value="搜索"/>';
    html += '</div>';
    html += '<br/>';
    html += '<div id="' + me.data.searchBtnsId.promptDiv + '" class="prompt"></div>';
    html += '<div id="' + me.data.searchBtnsId.statisticsDiv + '" class="statistics"></div>';
    html += '<div id="' + me.data.searchBtnsId.suggestsDiv + '" class="suggests"></div>';
    html += '<div id="' + me.data.searchBtnsId.lineDataDiv + '" class="lineData"></div>';
    html += '<div id="' + me.data.searchBtnsId.resultDiv + '" class="result">';
    html += '<div id="' + me.data.searchBtnsId.searchDiv + '"></div>';
    html += '<div id="' + me.data.searchBtnsId.pageDiv + '">';
    html += '<input type="button" value="第一页" id="' + me.data.searchBtnsId.first_page + '" />';
    html += '<input type="button" value="上一页" id="' + me.data.searchBtnsId.up_page + '" />';
    html += '<input type="button" value="下一页" id="' + me.data.searchBtnsId.next_page + '" />';
    html += '<input type="button" value="最后一页" id="' + me.data.searchBtnsId.end_page + '" />';
    html += '<br/>';
    html += '转到第<input type="text" value="1" id="' + me.data.searchBtnsId.pageId + '" size="3"/>页';
    html += '<input type="button" id="' + me.data.searchBtnsId.turn_page + '" value="转到"/>';
    html += '<input type="button" id="' + me.data.searchBtnsId.hide_page + '" value="收起"/>';
    html += '</div>';
    html += '</div>';
    html += '</div>';


    var navigationPanelWidth = 310;
    var mapWidth = me.width - navigationPanelWidth - 20;
    me.containerId = me.mapId;
    me.mapId = me._genDomID('mapDiv');
    var navigationPanelId = me._genDomID('navigationPanel');
    var mapContainerDom = $('#' + me.containerId);
    mapContainerDom.css('width', me.width);
    mapContainerDom.css('height', me.height);
    mapContainerDom.layout();
    mapContainerDom.layout('add', {
        region: 'west',
        width: navigationPanelWidth,
        height: me.height,
        style: {
            zIndex: 100
        },
        title: '搜索',
        content: '<div id="' + navigationPanelId + '"></div>',
        split: true,
        onCollapse: function () {
            me.map.checkResize();
        },
        onExpand: function () {
            me.map.checkResize();
        }
    });


    $('#' + navigationPanelId).append($(html));


    mapContainerDom.layout('add', {
        region: 'center',
        style: {
            zIndex: 98
        },
        content: '<div id="' + me.mapId + '" style="width:100%;height:100%;"></div>'
    });


    $('#' + searchDivId).height((me.height - 30));


    //绑定事件
    $('#' + me.data.searchBtnsId.first_page).bind('click', function () {
        me.localsearch.firstPage();
    });
    $('#' + me.data.searchBtnsId.up_page).bind('click', function () {
        me.localsearch.previousPage();
    });
    $('#' + me.data.searchBtnsId.next_page).bind('click', function () {
        me.localsearch.nextPage();
    });
    $('#' + me.data.searchBtnsId.end_page).bind('click', function () {
        me.localsearch.lastPage();
    });
    $('#' + me.data.searchBtnsId.turn_page).bind('click', function () {
        me.localsearch.gotoPage(parseInt($('#' + me.data.searchBtnsId.pageId).val()));
    });
    $('#' + me.data.searchBtnsId.hide_page).bind('click', function () {
        me.clearAllSearchContent();
    });


    $('#' + me.data.searchBtnsId.pageDiv).hide();
}
/********************************************************************搜索函数end************************************************************/






/*********************选取经纬度Dialog*************************/
var BaseMapLngLatChooseDialog = function (init_params) {
    var p = init_params, me = this;
    me.dialogId = me._genDomID('dialog');
    me.mapDivId = me._genDomID('mapdiv');
    me.onOkEvent = p.onOkEvent || null;


    me.dialogDom = $('<div id="' + me.dialogId + '"></div>');
    $(document.body).append(me.dialogDom);


    var dialogParams = p['dialog'] || {};
    if (dialogParams.closed == undefined) {
        dialogParams.closed = true;//dialog默认关闭
    }
    dialogParams.width = dialogParams.width || 600;
    dialogParams.height = dialogParams.height || 440;
    dialogParams.modal = true;
    dialogParams.title = dialogParams.title || '标注点';


    dialogParams.content = '<div id="' + me.mapDivId + '" style="width:800px;height:600px;"></div>';
    dialogParams.buttons = [{
        text: '确定',
        iconCls: 'icon-ok',
        handler: function () {
            var point = me.map.getMarkerToolPointData();
            if (me.onOkEvent) {
                me.onOkEvent.call(me, point);
            }
            me.close();
        }
    }, {
        text: '关闭',
        iconCls: 'icon-cancel',
        handler: function () {
            me.close();
        }
    }];
    me.dialogDom.dialog(dialogParams);


    me.map = null;
    me.mapParams = p['map'] || {};
    me.mapParams.mapId = me.mapDivId;
    me.mapParams.width = dialogParams.width - 31;
    me.mapParams.height = dialogParams.height - 75;
};


//显示
BaseMapLngLatChooseDialog.prototype.show = function () {
    if (this.dialogDom) {
        this.dialogDom.dialog('open');
        if (!this.map) {
            this.map = new BaseMap(this.mapParams);
            this.map.openMarkerTool();
        }
    }
};


//关闭
BaseMapLngLatChooseDialog.prototype.close = function () {
    if (this.dialogDom) {
        this.dialogDom.dialog('close');
    }
};


//关闭
BaseMapLngLatChooseDialog.prototype.setTitle = function (title) {
    if (this.dialogDom) {
        this.dialogDom.dialog('setTitle', title || '');
    }
};


//ID生成
BaseMapLngLatChooseDialog.prototype._genDomID = function (type) {
    __map_gen_dom_idx++;
    return "_basemap_lnglat_choosedialog_gen_" + (type || '') + __map_gen_dom_idx;
};






/*********************选取区域Dialog*************************/
var BaseMapAreaChooseDialog = function (init_params) {
    var p = init_params, me = this;
    me.dialogId = me._genDomID('dialog');
    me.mapDivId = me._genDomID('mapdiv');


    me.onOkEvent = p.onOkEvent || null;
    me.dialogDom = $('<div id="' + me.dialogId + '"></div>');
    $(document.body).append(me.dialogDom);


    var dialogParams = p['dialog'] || {};
    if (dialogParams.closed == undefined) {
        dialogParams.closed = true;//dialog默认关闭
    }
    dialogParams.width = dialogParams.width || 600;
    dialogParams.height = dialogParams.height || 440;


    dialogParams.modal = true;
    dialogParams.title = dialogParams.title || '区域标注';


    dialogParams.content = '<div id="' + me.mapDivId + '"></div>';
    dialogParams.buttons = [{
        text: '确定',
        iconCls: 'icon-ok',
        handler: function () {
            var pointsStr = me.map.getPolygonToolDrawPointStr();
            var pointsData = me.map.getPolygonToolDrawData();
            if (me.onOkEvent) {
                me.onOkEvent.call(me, pointsData, pointsStr);
            }
            me.close();
        }
    }, {
        text: '重新选取',
        iconCls: 'icon-edit',
        handler: function () {
            if (me.area) {
                try {
                    me.map.map.removeOverLay(me.area);
                } catch (e) {
                }


                me.area = null;
                me.map.openPolygonTool();
            }
        }
    }, {
        text: '关闭',
        iconCls: 'icon-cancel',
        handler: function () {
            me.close();
        }
    }];
    me.dialogDom.dialog(dialogParams);


    me.map = null;
    me.mapParams = p['map'] || {};
    me.mapParams.mapId = me.mapDivId;
    me.mapParams.width = dialogParams.width - 31;
    me.mapParams.height = dialogParams.height - 75;
    me.area = null; //选取的区域
    me.mapParams.onDrawPolygonComplete = function (points, length, polyline, eventOwn) {
        me.area = polyline;
    };
};


//显示
BaseMapAreaChooseDialog.prototype.show = function () {
    if (this.dialogDom) {
        this.dialogDom.dialog('open');
        if (!this.map) {
            this.map = new BaseMap(this.mapParams);
            this.map.openPolygonTool();
        }
    }
};


//关闭
BaseMapAreaChooseDialog.prototype.close = function () {
    if (this.dialogDom) {
        this.dialogDom.dialog('close');
    }
};


//关闭
BaseMapAreaChooseDialog.prototype.setTitle = function (title) {
    if (this.dialogDom) {
        this.dialogDom.dialog('setTitle', title || '');
    }
};


//ID生成
BaseMapAreaChooseDialog.prototype._genDomID = function (type) {
    __map_gen_dom_idx++;
    return "_basemap_area_choosedialog_gen_" + (type || '') + __map_gen_dom_idx;
};


//全局ID索引
__map_gen_dom_idx = 0;


© 著作权归作者所有

chelen_jak
关注
专栏目录
Openlayers 教程 01 - 初始化（helloworld ）以及加载天地图底图示例
linzi19900517的博客
02-24 2661
Openlayers 教程，主要是平时项目中用的较多的功能方法的总结，可以根据这些文章对 openlayers 进行二次封装提供给自己项目使用。
JavaScript 之封装、继承、多态
Mr_Zhang2的博客
04-01 256
面向对象编程
天地图JS API制作专题图
吴道简的博客
02-12 1292
最近看了一份人民大学的报告，《中国城市政商关系排行榜2020》，https://new.qq.com/omn/20201230/20201230A0F3MY00.html。 讲的是中国各个城市的政商关系健康指数，决定拿这份报告中的数据，来做一份html的专题图。 效果如下（有审图号，地图不违规）： 一、数据获取 做这份专题图，需要两个数据，一个是各省的边界数据，一个是各省的政商关系健康指数，后者从报告中摘取就行。 前者的参考腾讯地图web api：https://lbs.qq...
【天地图】VUE3关于天地图部分功能hooks封装useTdtMap.js
YueMiaoL的博客
11-01 4958
各方法详细说明在代码里体现，首先创建一个hooks——useTdtMap.js。该hooks除了需引入天地图外，还需引入开源库。引入天地图hooks并初始化地图，以下都为。仅根据个人习惯封装，仅供参考。
天地图实现画点、线、面及编辑功能
最新发布
平平无奇的小菜鸡
08-16 370
最后如果有需要修改线跟面顶点样式的话，因为天地图本身没有提供相关的属性，可以在每个顶点处打个点来变相实现效果。然后准备一个div跟几个操作按钮。点击编辑，保存和清除。
vue3+Ts+Ant Design Vue +天地图组件封装
唯见青山不见君
04-09 2606
这是一个基于Ant Design Vue组件封装的天地图组件,主要功能是实现一个带有地图选择点位,搜索打点功能的基本模态框
天地图弹窗实现打点的公共组件封装
博客简介
10-14 562
【代码】天地图弹窗实现打点的公共组件。
天地图二次开发培训
09-26
### 天地图二次开发培训：深入解析关键技术与实践 #### 引言 天地图二次开发培训聚焦于地理信息系统（GIS）在数字城市建设和设计领域的应用，尤其针对省市级节点的二次开发过程。这一主题不仅涵盖了系统设备采购的...
HTML+JS实现一个百战天虫类页面游戏
06-18
可以使用二维数组来表示地图，每个单元格代表地图的一个部分，可以是可通行的地面或障碍物。通过JavaScript，我们可以读取和修改这个数据结构，实现虫子在地图上的移动和碰撞检测。 JavaScript的定时器（`...
JavaScript面向对象实现-坦克大战（附前端全套学习路线）
weixin_51689029的博客
06-24 1492
【课程简介】使用javascript+面向对象实现一个坦克大战游戏，让更多的同学能更加深入地理解面向对象思想。文末附有前端全套学习路线。【主讲内容】1. 讲解什么是面向对象，javascript中如何实现面向对象2. 分析坦克大战中需要用到哪些对象3. 使用canvas实现游戏地图的绘制4. 使用canvas实现坦克的绘制5. 如何使用键盘控制坦克移动6. 如何生成敌对的坦克7. 如何使用寻路算法让敌人寻找玩家的坦克...
arcgis js引入天地图的js（最新可用）
01-28
博客地址：https://blog.csdn.net/KK_bluebule/article/details/83414871，里面有具体的使用方法
天地图 实现标注，搜索，缩放，比例尺，切换类型功能
u013365404的专栏
05-18 5413
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;天地图－地图API－范例－纯文字的信息窗口&lt;/title&gt; &lt;script type="text/
天地图Map方法setCenter和pan实现地图定位和平移
Rocky balboa
03-31 1710
map.panTo(new T.LngLat(110.074846, 39.201972), 15);
QT5.12.9 百度离线地图
zdhkai的博客
03-17 3279
选中要下载的区域进行下载我这里只下载普通地图，在下载目录生成tiles目录，如果选择混合地图会生成三个目录，并将目录内容拷贝斑马鱼对应目录下。将bmap-offline目录拷贝到QT工程目录下。
天地图获取点击位置的经纬度
热门推荐
qq_41117545的博客
10-30 1万+
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="keywords" content="天地图"/> <title>天地图－地图API－范例－地图拾取器</title> <style type="text/css"> .
vue之openlayers天地图的加载
gis_sss的博客
09-15 1515
一、矢量天地图 （1）导入依赖的文件 import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js'; import {XYZ,TileWMS,Vector as VectorSource,ImageWMS,Cluster} from 'ol/source.js'; （2）矢量天地图的函数封装 /** * 说明...
天地图引用及设置导航路线
qq_45733762的博客
07-29 1929
代码】天地图引用及设置导航路线。
Vue+element-ui Table二次封装实践详解
"本文将介绍如何在Vue.js项目中对element-ui的Table组件进行二次封装，以实现更灵活、统一的表格样式和功能。通过封装，可以提高代码复用率，简化开发流程。作者分享了自己的实践过程，包括封装的原因、实现步骤及...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值