百度地图ApI开发脚本
/**
* 基于百度地图的监控应用
* @author cwj
* @version 1.0
*/
;(function() {
// 给页面元素添加事件
function addEvent(element, type, listener) {
if (!element) {
return;
}
type = type.replace(/^on/i, '').toLowerCase();
if (element.addEventListener) {
element.addEventListener(type, listener, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, listener);
}
};
// 给某页面元素删除事件
function removeEvent(element, type, listener) {
if (!element) {
return;
}
type = type.replace(/^on/i, '').toLowerCase();
if (element.removeEventListener) {
element.removeEventListener(type, listener, false);
} else if (element.detachEvent) {
element.detachEvent('on' + type, listener);
}
};
function CreateMap(container,lng,lat,maplevel)
{
var map = new BMap.Map(container);
var point = new BMap.Point(lng, lat);
map.centerAndZoom(point, maplevel);
var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
map.addControl(ctrl_nav);
map.enableScrollWheelZoom(); //启用地图滚轮放大缩小
map.enableDoubleClickZoom(); //启用鼠标双击放大,默认启用(可不写)
map.enableKeyboard(); //启用键盘上下左右键移动地图
}
//设置地图参数
function SetmapPram() {
var labelhtml = $("#mapOptsdiv").html();
$.dialog({
title: "设置地图中心点",
width: '220px',
height: '50px',
content: labelhtml,
resize: false,
drag: true,
ok: function () {
var pointlng = $("#maplng").val();
var pointlat = $("#maplat").val();
var maplevel = $("#maplevel").val();
return true;
},
cancel: function () { }
})
addEvent(map, 'click', SetMapCenter);
}
//设置地图中心点
function SetMapCenter(e) {
var pt = e.point;
var overlayPoint = new BMap.Point(pt.lng, pt.lat);
$("#maplng").val(pt.lng);
$("#maplat").val(pt.lat);
}
function pointChange(t, item, option) {
var monitorElementType = item.id.replace("MainContent_", "");
$("#MonitorType").val(monitorElementType);
}
//添加覆盖物
var polylinePoint;
var pointsArr;
function AddOverLay(overlayType) {
removeEvent(map, 'click', AddMarker);
removeEvent(map, 'click', Addpolyline);
removeEvent(map, 'click', Addpolygon);
removeEvent(map, 'click', AddMaplabel);
removeEvent(map, 'click', AddMapBoundary);
polylinePoint = "";
pointsArr = [];
addEvent(map, 'click', AddMarker);
if (overlayType == "MainContent_polyline") {//添加折线
addEvent(map, 'click', Addpolyline);
}
if (overlayType == "MainContent_polygon") {//添加多边形
addEvent(map, 'click', Addpolygon);
}
if (overlayType == "MainContent_maplabel") {//添加地图标签
addEvent(map, 'click', AddMaplabel);
}
if (overlayType == "MainContent_MapBoundary") {//添加行政区域
addEvent(map, 'click', AddMapBoundary);
}
}
// 加标注
function AddMarker(e) {
var pt = e.point;
var point = new BMap.Point(pt.lng, pt.lat);
var myIcon = new BMap.Icon("/MES/resource/FPP/Desktop/image/icon.png", new BMap.Size(20, 25),
{ imageOffset: new BMap.Size(0, -21) });
var marker = new BMap.Marker(point, { icon: myIcon });
map.addOverlay(marker);
marker.enableDragging()//点可拖拽
}
//加折线
function Addpolyline(e) {
var pt = e.point;
var overlayPoint = new BMap.Point(pt.lng, pt.lat);
polylinePoint += "" + pt.lng + "," + pt.lat + "#";
$("#pointArray").val(polylinePoint);
pointsArr.push(overlayPoint);
var linelay = new BMap.Polyline(pointsArr, { strokeColor: "blue", strokeWeight: 5, strokeOpacity: 0.5 });
map.addOverlay(linelay);
}
//加多边形
function Addpolygon(e) {
var pt = e.point;
var overlayPoint = new BMap.Point(pt.lng, pt.lat);
pointsArr.push(overlayPoint);
var polygonlay = new BMap.Polygon(pointsArr, { strokeColor: "blue", strokeWeight: 5, strokeOpacity: 0.5 });
map.addOverlay(polygonlay);
}
//加地图标签
function AddMaplabel(e) {
var pt = e.point;
var overlayPoint = new BMap.Point(pt.lng, pt.lat);
var labelhtml = $("#maplabeldiv").html();
$.dialog({
width: '250px',
height: '50px',
content: labelhtml,
resize: false,
drag: false,
ok: function () {
var labeltext = $("#maplabtxt").val();
var opts = {
position: overlayPoint, // 指定文本标注所在的地理位置
offset: new BMap.Size(30, -30) //设置文本偏移量
}
var label = new BMap.Label(labeltext, opts); // 创建文本标注对象
label.setStyle({
color: "red",
fontSize: "12px",
height: "20px",
lineHeight: "20px",
fontFamily: "微软雅黑"
});
map.addOverlay(label);
return true;
},
cancel: function () { }
})
}
//加行政区域
function AddMapBoundary(e) {
var pt = e.point;
var overlayPoint = new BMap.Point(pt.lng, pt.lat);
var labelhtml = $("#Boundarydiv").html();
$.dialog({
width: '250px',
height: '50px',
content: labelhtml,
resize: false,
drag: false,
ok: function () {
var boundaryName = $("#boundaryName").val();
getBoundary(boundaryName);
return true;
},
cancel: function () { }
})
}
function getBoundary(boundaryName) {
var bdary = new BMap.Boundary();
bdary.get(boundaryName, function (rs) { //获取行政区域
map.clearOverlays(); //清除地图覆盖物
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
map.setViewport(pointArray); //调整视野
});
}
var SaveOverLay = function () {
alert(pointsArr[0]);
return pointsArr;
}
function DrawPolyline(points) {
var route = new BMap.Polyline(points, { strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5 });
map.addOverlay(route);
}
//在地图上添加标注点
function AddPointMarker(longitude, latitude) {
var point = new BMap.Point(longitude, latitude);
//var myIcon = new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png", new BMap.Size(300, 157));
// var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300, 157));
var myIcon = new BMap.Icon("/MES/resource/FPP/Desktop/image/icon.png", new BMap.Size(20, 25),
{ imageOffset: new BMap.Size(0, -21) });
var marker = new BMap.Marker(point, { icon: myIcon });
// var marker = new BMap.Marker(point);
map.addOverlay(marker); // 将标注添加到地图中
marker.enableDragging()//点可拖拽
}
//加载标注点
function LoadMarkerPoint(data_info) {
map.clearOverlays();
var myIcon = new BMap.Icon("images/icon.png", new BMap.Size(20, 25),
{ imageOffset: new BMap.Size(0, -21) });
var markerPointArr = new Array();
for (var i = 0; i < data_info.length; i++) {
var pointArr = data_info[i].split(',');
if (pointArr[4] == "state:1") {//状态不正常,加红色标注
myIcon = new BMap.Icon("images/icon.png", new BMap.Size(20, 25),
{ imageOffset: new BMap.Size(-46, -21) });
}
else//状态正常,加蓝色标注
myIcon = new BMap.Icon("images/icon.png", new BMap.Size(20, 25),
{ imageOffset: new BMap.Size(0, -21) });
var marker = new BMap.Marker(new BMap.Point(pointArr[0], pointArr[1]), { icon: myIcon }); // 创建标注
if (pointArr[4] == "state:1") {
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
}
//添加鼠标右键事件
marker.addEventListener('rightclick', function (e) {
var menu = new BMap.ContextMenu()
menu.addItem(new BMap.MenuItem('删除', removeMarker.bind(this)));
this.addContextMenu(menu);
});
// 将标注添加到地图中
marker.enableDragging()//点可拖拽
map.addOverlay(marker);
var markpoint = new BMap.Point(marker.point.lng, marker.point.lat);
markerPointArr.push(markpoint);
//信息窗口内容
var content = pointArr[2] + "<br />" + pointArr[3];
addClickHandler(content, marker); //打开信息窗口
markerAddClickHandler(marker);
}
//用直线连接标注点
var markerline = new BMap.Polyline(markerPointArr, { strokeColor: "blue", strokeWeight: 5, strokeOpacity: 0.5 });
map.addOverlay(markerline);
}
//
function loadPolygon()
{
}
//鼠标移到监控点上显示监控信息
function addClickHandler(content, marker) {
marker.addEventListener("mouseover", function (e) {
openInfo(content, e)
}
);
}
})(jQuery);