Map篇———动态地图坐标的实现

尛⑦出品——转载请注明出处~！

从Grid搞了一个连接过来。

数据取的是静态数据

  statics: {
        getDummyData: function () {	
            return [
                ['3m Co',71.72,0.02,0.03,'9/1 12:00am',"<a οnclick=dd(\"121.52502,31.258850\")>查看位置</a>"],
                ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am',"<a οnclick=dd(\"121.82402,31.257850\")>查看位置</a>"],
                ['American Express Company',52.55,0.01,0.02,'9/1 12:00am',"<a οnclick=dd(\"121.62402,31.357850\")>查看位置</a>"],
                ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am',"<a οnclick=dd(\"121.12402,31.057850\")>查看位置</a>"],
                ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am',"<a οnclick='dd()'>查看位置</a>"],
                ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am',"<a οnclick='dd()'>查看位置</a>"],
                ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am',"<a οnclick='dd()'>查看位置</a>"],
                ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am',"<a οnclick='dd()'>查看位置</a>"],
                ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am',"<a οnclick='dd()'>查看位置</a>"],
                ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am',"<a οnclick='dd()'>查看位置</a>"],
                ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am',"<a οnclick='dd()'>查看位置</a>"],
                ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am',"<a οnclick='dd()'>查看位置</a>"],
                ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am',"<a οnclick='dd()'>查看位置</a>"]
            ];
        }
    }

function dd(zb){
    	var aa=new BatteryBusSystem.Notemap();
		aa.createWindow(desktop,zb); 
		//alert(grid.getSelectionModel().selected());
}

Notemap.js文件

/*!
 * DeskTop + 百度地图 动态地标刷新
 * 尛⑦——荣誉出品
 */

Ext.define('BatteryBusSystem.Notemap', {
    extend: 'Ext.ux.desktop.Module',

    requires: [
        //'Ext.form.field.HtmlEditor'
    ],

    id:'notemap',

    init : function(){
        this.launcher = {
            iconCls:'notepad',
            handler : this.createWindow,
            scope: this
        }
    },
    createWindow:function (B,zb){		//zb为传来的地标位置
    	if(B==undefined){
    		B = this.app.getDesktop();
    		
    	}if(zb==undefined){
    		zb="121.52402,31.257705";
    	}
    	var mapzb=zb;
    	var desktop = B;
    	//var desktop = this.app.getDesktop();
        var wiew = desktop.getWindow('notemap');
    	var strHtml = "<div style='width:100%;height:100%;border:1px' id='mapDiv'>12</div>";
    	//alert(!wiew);
    	if(!wiew){
	    	wiew=desktop.createWindow({  
	            //autoShow:true,   //自动显示
	    		id:'notemap',
	    		title: '地图定位',
	    		width:'59%',
	            height:'52%',
	            layout:'fit',
	            iconCls:'.anchorBL{display:none; } ',
	    		items:[{
	    			id:'myMap',
	    			html:strHtml,
	    			region: 'center'
	    		}]
	    	});
    	}
    	wiew.show();
    	
    	//marker 标注点数组
	    	var markerArr = [	//可以为JSON 
	    		{title:"测试",content:"备注测试",point:mapzb,isOpen:0,icon:{w:23,h:25,l:23,t:21,x:9,lb:12}}
		 	];
    	function initMap(){
    		map = new BMap.Map('mapDiv');
    		var poi= new BMap.Point(mapzb.split(",")[0],mapzb.split(",")[1]);   	//根据传来的坐标进行分解,如若是JSON则需要修改此处
    		map.centerAndZoom(poi,14);
    		map.enableScrollWheelZoom();
	        addMapControl();//向地图添加控件
    		addMarker();//向地图中添加marker
    	}
    	//地图控件添加函数：
		    function addMapControl(){
		        //向地图中添加缩放控件
			var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
			map.addControl(ctrl_nav);
		        //向地图中添加比例尺控件
			var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
			map.addControl(ctrl_sca);
		    }
	    //创建地标
	    function addMarker(){
	        for(var i=0;i<markerArr.length;i++){
	            var json = markerArr[i];
	            var p0 = json.point.split(",")[0];
	            var p1 = json.point.split(",")[1];
	            var point = new BMap.Point(p0,p1);
				var iconImg = createIcon(json.icon);
	            var marker = new BMap.Marker(point,{icon:iconImg});
				var iw = createInfoWindow(i);
				var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
				marker.setLabel(label);
	            map.addOverlay(marker);
	            label.setStyle({
	                        borderColor:"#808080",
	                        color:"#333",
	                        cursor:"pointer"
	            });
				//地标事件
				(function(){
					var index = i;
					var _iw = createInfoWindow(i);
					var _marker = marker;
					_marker.addEventListener("click",function(){
					    this.openInfoWindow(_iw);
				    });
				    _iw.addEventListener("open",function(){
					    _marker.getLabel().hide();
				    })
				    _iw.addEventListener("close",function(){
					    _marker.getLabel().show();
				    })
					label.addEventListener("click",function(){
					    _marker.openInfoWindow(_iw);
				    })
					if(!!json.isOpen){
						label.hide();
						_marker.openInfoWindow(_iw);
					}
				})()
	        }
	    }
	     //创建备注窗口
		    function createInfoWindow(i){
		        var json = markerArr[i];
		        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
		        return iw;
		    }
		    //创建一个地标图标
		    function createIcon(json){
		        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
		        return icon;
		    }
    	initMap();
    }
});

注：地标位置可通过JSON来封装，封装后只需要略作修改就可以动态操作。

没有想不到，只有做不到。