百度地图-创建标注画线

施阎宝

2023-12-01

/**
 * 将字符串转为js日期类型
 * @param {string} str 格式 2008-08-01 12:12:12
 * @return Date
 */
function getDate(str){
    var strs = str.split(" ");
    var strYmd = strs[0].split("-");
    var strHm = strs[1].split(":");
    return new Date(strYmd[0], parseInt(strYmd[1] - 1), strYmd[2], strHm[0], strHm[1]);
}

/**
 * 创建地图 默认以IP定位获取当前城市初始化地图
 * @param {number} longitude 经度
 * @param {number} latitude 纬度
 * @param {number} level 缩放级别
 * @return BMap
 */
function createBMap(longitude,latitude,level) {
	var map = new BMap.Map("container");
	if (isBlank(longitude) || isBlank(latitude)) {
		// 默认以IP定位获取当前城市初始化地图
		function myFun(result){
		    var cityName = result.name;
		    map.setCenter(cityName);
		}
		var myCity = new BMap.LocalCity();
		myCity.get(myFun);
	}
	map.centerAndZoom(new BMap.Point(longitude, latitude), level);
	map.addControl(new BMap.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP,BMAP_HYBRID_MAP]}));   
//	map.setMapType(new MapType().BMAP_SATELLITE_MAP);
	map.enableScrollWheelZoom();	//启用滚轮放大缩小，默认禁用
	map.enableContinuousZoom();		//启用地图惯性拖拽，默认禁用
	
	map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
//	map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}));  //右上角，仅包含平移和缩放按钮
	map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_PAN}));  //左下角，仅包含平移按钮
	map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));  //右下角，仅包含缩放按钮
	
	map.addControl(new BMap.ScaleControl());	// 添加默认比例尺控件
	map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));	// 左上
//	map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_RIGHT}));	// 右上
	map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT}));	// 左下
	map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));	// 右下
	return map;
}

/**
 * 创建单个标注
 * @param {Object} map BMap
 * @param {number} longitude 经度
 * @param {number} latitude 纬度
 * @param {String} msg 标注信息标题
 */
function createMarker(map, longitude, latitude, msg, icon){
	if (isNotBlank(longitude) && isNotBlank(latitude)) {
		var thePoint = new BMap.Point(longitude, latitude);
		var marker1 = new BMap.Marker(thePoint);  // 创建标注
		if (isNotBlank(icon)) {
			marker1.setIcon(icon);
		}
		var name = msg.split(" 手机号：")[0];
		marker1.setTitle(name);
		map.addOverlay(marker1);            // 将标注添加到地图中
		
		//信息窗口设置
		var opts = {  
			//width : 250,     // 信息窗口宽度  
			//height: 100,     // 信息窗口高度  
			title : isNotBlank(msg) ? msg : ''  // 信息窗口标题 
		}  
		var gc = new BMap.Geocoder();
		gc.getLocation(thePoint, function(rs){
			// rs.address; // 地址
			var addComp = rs.addressComponents;
			var province = isNotBlank(addComp.province) ? addComp.province : "";
			var city = isNotBlank(addComp.city) ? addComp.city : "";;
			var provinceCity = province==city ? city : province+city;
			var theAdr = provinceCity + "" + (isNotBlank(addComp.district) ? addComp.district + " " : "") + (isNotBlank(addComp.street) ? addComp.street + " " : "") + (isNotBlank(addComp.streetNumber) ? addComp.streetNumber : "");
			var adr = "当前位于："+(isNotBlank(theAdr) ? theAdr+"附近" : "未知");
			var infoWindow1 = new BMap.InfoWindow(adr,opts); //创建信息窗口
			marker1.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});
		 });
		return marker1;
	}
}

/**
 * 创建标注点，并画线
 * @param map
 * @param arr
 * @returns
 */
function createMarkersPolyline(map, arr){
	if (isBlank(arr) || arr.length < 1) {
		return null;
	}
	var now = new Date();
	var points = new Array();
	for (var i=0;i<arr.length;i++) {
		if (isBlank(arr[i])) {
			continue;
		}
		var pl = arr[i];
		var thePoint = new BMap.Point(pl.longitudeBaidu, pl.latitudeBaidu);
		points.push(thePoint);
		var marker = new BMap.Marker(thePoint);  // 创建标注
		var icon = i == 0 ? endIconBaidu : (i == arr.length - 1 ? startIconBaidu : null);
		if (isBlank(icon)) {
        	var dn = parseInt((now - getDate(arr[i].keepTime)) / 1000 / 60);     //把相差的毫秒数转换为分钟
        	if (dn>10 && dn<=30) {
        		icon = dull_redBaidu;
        	}
        	else if (dn > 30) {
        		icon = greyIconBaidu; // 标识为灰色
        	}
        }
        if (isNotBlank(icon)) {
			marker.setIcon(icon);
		}
		marker.setTitle(pl.realName);
		var title = pl.realName + " 手机号：" + pl.phone + " 时间：" + pl.keepTime;
		var address = "当前位于："+(isNotBlank(pl.addressBaidu) ? pl.addressBaidu : '未知'); 
		fun_infoWin(marker, title, address);
		map.addOverlay(marker);            // 将标注添加到地图中
	}
	drawPolyline(map, points);
}

/**
 * 画线
 * @param bMap
 * @param points
 */
function drawPolyline(bMap, points) {
	if (points==null || points.length<=1) {
		return;
	}
	bMap.addOverlay(new BMap.Polyline(points, {
		strokeColor : "blue",
		strokeWeight : 3,
		strokeOpacity : 0.5
	})); // 画线
}

/**
 * 设置弹出窗体信息
 * 
 * @param marker
 * @param thePoint
 * @param msg
 */
function fun_infoWin2(marker, thePoint, title) {
	//信息窗口设置
	var opts = {  
		//width : 250,     // 信息窗口宽度  
		//height: 100,     // 信息窗口高度  
		title : isNotBlank(title) ? title : ''  // 信息窗口标题 
	} 
	var gc = new BMap.Geocoder();
	// 根据地理坐标点取得地址解析
	gc.getLocation(thePoint, function(rs){
		var addComp = rs.addressComponents;
		var province = isNotBlank(addComp.province) ? addComp.province : "";
		var city = isNotBlank(addComp.city) ? addComp.city : "";;
		var provinceCity = province==city ? city : province+city;
		var theAdr = provinceCity + "" + (isNotBlank(addComp.district) ? addComp.district + " " : "") + (isNotBlank(addComp.street) ? addComp.street + " " : "") + (isNotBlank(addComp.streetNumber) ? addComp.streetNumber : "");
		var adr = "当前位于："+(isNotBlank(theAdr) ? theAdr+"附近" : "未知");
		var infoWindow1 = new BMap.InfoWindow(adr,opts); //创建信息窗口
		marker.addEventListener("click", function(){this.openInfoWindow(infoWindow1);});
	 });
}

function fun_infoWin(marker, title, content) {
	//信息窗口设置
	var opts = {  
		title : isNotBlank(title) ? title : ''  // 信息窗口标题 
	} 
	marker.addEventListener("click", function(){this.openInfoWindow(new BMap.InfoWindow(content, opts));});
}

/**
 * 创建多个标注
 * @param {Object} map BMap
 * @param {Array} arr 数组
 */
function createMarkersLbl(map, arr){
	if (isBlank(arr) || arr.length < 1) {
		return null;
	}
	map.clearOverlays();
	var points = new Array();
	for (var i=0;i<arr.length;i++) {
		if (isBlank(arr[i])) {
			continue;
		}
		var pl = arr[i];
		var thePoint = new BMap.Point(pl.longitudeBaidu, pl.latitudeBaidu);
		points.push(thePoint);
		var marker = new BMap.Marker(thePoint);  // 创建标注
		marker.setTitle(pl.realName);
		var title = pl.realName + " 手机号：" + pl.phone + " 时间：" + pl.keepTime;
		var address = "当前位于："+(isNotBlank(pl.addressBaidu) ? pl.addressBaidu : '未知'); 
		fun_infoWin(marker, title, address);
		map.addOverlay(marker);            // 将标注添加到地图中
		marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
		// 创建文本标注对象 在图标标注点上方 
		var opts = {
		  position : thePoint,    // 指定文本标注所在的地理位置
		  offset   : new BMap.Size(-20, -58)    //设置文本偏移量(位于标注点上方)
		}
		var label = new BMap.Label(name, opts);  
			label.setStyle({
				"padding": "2px",
				"border": "1px solid #CCCCCC",
				"display": "block",
		        "filter": "alpha(opacity=62)",
				"-moz-opacity": "0.62",
				"opacity": "0.62",
				"fontSize" : "13px",
			 });
		map.addOverlay(label);   
	}
	map.setViewport(points);
}

/**
 * 设置即时定位左则在线人员的刷新时间，单位（秒）
 */
var onlineInterval = 60*3;

/**
 * 设置即时定位查询的等待时长，单位（秒）
 */
var positionTimeOut = 30;

/**
 * 设置即时定位查询的步长，单位（秒）
 */
var positionInterval = 3;

/**
 * 起始标记图片
 */
var startIconBaidu = new BMap.Icon("../images/icons/marker_start.png", new BMap.Size(40,40));

/**
 * 结束标记图片
 */
var endIconBaidu = new BMap.Icon("../images/icons/marker_end.png", new BMap.Size(40,40));

/**
 * 灰色标记图片
 */
var greyIconBaidu = new BMap.Icon("../images/icons/marker_grey.png", new BMap.Size(20,30));

/**
 * 暗红色标记图片 
 */
var dull_redBaidu = new BMap.Icon("../images/icons/marker_dull_red.png", new BMap.Size(20,30));

map.clearOverlays(); // 清楚标注

引用js 1.4 可以不用密钥

百度地图-创建标注画线

相关阅读

相关文章

相关问答

相关文档

百度地图-创建标注 画线

相关阅读

相关文章

相关问答

相关文档

百度地图-创建标注画线