web实现地图画标识物

第一步先实现画路线：

集成第三方的百度地图：

第一 初始化地图：

initMap : function(gatherList) {
			points = [];
			map = null;
			lushu = null;
			_gatherList = null;
			zoom_jb = null;
			markers = [];
			end_markers = [];
			overlays = null;
			condition = 0;
			zoom = null;
			begin_num = 0;
			tag = 0;
			preGather = null;

			prePoint = null;
			sumDistance = 0;
			center_point = null;
			temp_last_update_time = null;
			map = new BMap.Map("map_warp");
			map.centerAndZoom("中国", 5);
			map.addControl(new BMap.NavigationControl());
			map.addControl(new BMap.ScaleControl());
			map.addControl(new BMap.OverviewMapControl());
			map.enableScrollWheelZoom(true);
			if(null != gatherList && gatherList.length >= 1){
				zjxlMap.loadGatherData(gatherList);
			}
		}

第二步：

加载数据

loadGatherData : function(gatherList) {
			if(null != gatherList && gatherList.length >= 1){
				gatherList.reverse();
				_gatherList = gatherList;
				zjxlMap.loadMapOverlays(gatherList,condition, 10);
			} else {
				map.centerAndZoom("中国", 5);
			}
		}

第三步：

根据数据画标识物：

loadMapOverlays : function(gatherList,condition,zoom,radioControl) {
			if (gatherList == null || gatherList.length <= 0) {
				return;
			}
			points = [];
			markers = [];
			var gatherListLen = gatherList.length;

			var isUseI = 0;
			if(!radioControl){
				isUseI = begin_num;
			}
			for (var i = isUseI; i < gatherListLen; i++) {
				var gather = gatherList[i];
				if (lwzh.isNullOrEmpty(gather.bd_xpoint) || gather.bd_xpoint == "0.0") {
					continue;
				}
				if (lwzh.isNullOrEmpty(gather.bd_ypoint) || gather.bd_ypoint == "0.0") {
					continue;
				}
				//处理速度
				var speed_str = gather.speed;
				gather.speed_str = (speed_str == null || speed_str == "" ? 'N/A' : speed_str + 'km/h');
				gather.gather_time_str = zjxlMap.translateDate(gather.gather_time);
				//处理里程
				var point = new BMap.Point(gather.bd_xpoint,gather.bd_ypoint);
				point.gatherDatas = [ gather ];
				if (i == 0) {
					// 画起点
					var myIcon = new BMap.Icon("/static/images/bdmap/icon_st.png", new BMap.Size(30,36),{
						anchor:new BMap.Size(15,36)
                    });
					var html = template("pointContentTemplate", {
						point : point
					});
					map.centerAndZoom(point, 15);
					var marker = new BMap.Marker(point,{icon:myIcon});
					map.addOverlay(marker);
					zjxlMap.addClickHandler(html,marker);
				}
				if (i == gatherListLen - 1) {
					zjxlMap.hide(end_markers);
					preGather = gather;
					// 画终点
					var myIcon = new BMap.Icon("/static/images/bdmap/icon_en.png", new BMap.Size(30,36),{
						anchor:new BMap.Size(14,36)
                    });
					var marker = new BMap.Marker(point,{icon:myIcon});
					end_markers.push(marker);
					map.addOverlay(marker);
				}
				if (prePoint) {
					// 画箭头
					var html = template("pointContentTemplate", {
						point : point
					});
					var direction_angle = gather.direction_angle;
					var marker = new BMap.Marker(point);
					markers.push(marker);
					map.addOverlay(marker);
					zjxlMap.addClickHandler(html,marker);
					// 画路线
					if (0) {
					} else {
						var polyline = new BMap.Polyline([ prePoint, point ], {
							strokeColor : "blue",
							strokeWeight : 6,
							strokeOpacity : 0.5
						});
						map.addOverlay(polyline);
					}

				}
				prePoint = point;
				points.push(point);
			}

		}

路线画出来后，想在标识物上加上一个点击事件：

代码实现：

addClickHandler : function(content,marker) {
			marker.addEventListener("click",function(e){
				zjxlMap.openInfo(content,e)}
			);
		},
openInfo : function(content,e) {
			var p = e.target;
			var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
			var infoWindow = new BMap.InfoWindow(content);  // 创建信息窗口对象 
			map.openInfoWindow(infoWindow,point); //开启信息窗口
		}

点击事件的出现和隐藏：

hide:function(markers){
			if(markers.length == 0){
				return;
			}
			for (var i = 0; i < markers.length; i++) {
				 var marker = markers[i];
				 marker.hide();
			 }
		},showmarker:function(markers){
			if(markers.length == 0){
				return;
			}
			markers[markers.length-1].show();
		}

到此百度地图的画线和点击事件全部代码集成。