百度地图-创建标注画线

/**
* 将字符串转为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 可以不用密钥

百度地图-创建标注画线相关推荐

百度地图创建标注marker，最优缩放级别
百度地图创建marker坐标,添加自定义标注: //首先要引入百度api <script type="text/javascript" src="http://ap ...
js百度地图小车html,Web js实现百度地图实时轨迹画线小车车行驶轨迹 | 彬菌
版权声明:转载原创文章请以超链接形式请注明原文章出处,尊重作者,尊重原创! 恰饭广告注意: 1.百度地图ak换成自己在百度地图官网申请 2.建议使用firefox浏览器,google被墙无法调用gp ...
使用百度地图绘制点、线、面 | Javascript
写在前面: 本文为百度地图开发系列文章之一, 前期回顾: webGIS,基于百度地图的HelloWord实现如何使用前端css代码去掉百度地图左下角的图标使用百度地图绘制点.线.面 | Javas ...
基于JDBC从数据库中读取数据，在百度地图批量标注地点
基于JDBC从数据库中读取数据,在百度地图批量标注地点一.相关技术 JSP,JDBC,JSON,JS,百度地图API 二.基于JDBC从数据库读取数据见"JSP基于JDBC操作MSSQL ...
百度地图多标注显示以及自定义图标
** 百度地图多标注显示以及自定义图标 ** 效果图: HTML部分 <style>*{margin:0px;padding:0px} html{font-size: 100%;} bod ...
百度地图自定义标注点
百度地图自定义标注点 //创建点 var point = new BMap.Point(109.49926175379778, 36.60449676862417); //创建自定义标 //参数1:自 ...
使用Echart搭配百度地图创建某一地区热点图的注意点
使用Echart搭配百度地图创建的热点图,为网友免费做的demo,细节没有调整.记录一下写的过程. 效果图: 代码: <!DOCTYPE html> <html style=&quo ...
百度地图，标注不在中心位置问题
百度地图,标注不在中心位置问题今天用百度地图,做一个效果根据后台传输过来的位置坐标,显示并标注.不知道为什么百度地图老是偏离标注位置一个屏幕. 这是点击查看位置时的效果如图: 这个和我想的跑偏了十 ...
百度地图 php,php+js实现百度地图多点标注的方法
本文实例讲述了php+js实现百度地图多点标注的方法.分享给大家供大家参考,具体如下: 1.php创建json数据 $products = $this->product_db->selec ...

百度地图-创建标注画线

百度地图-创建标注画线相关推荐

最新文章

热门文章

百度地图-创建标注 画线

百度地图-创建标注 画线相关推荐

最新文章

热门文章

百度地图-创建标注画线

百度地图-创建标注画线相关推荐