- 由 黄平创建, 最终由 徐晓兰修改于 十一月 07, 2018
效果图：
示例中的核心代码(请展开看代码)，代码中的
var initCity = (window.parent && window.parent.cityName) || '重庆'; //smartbi通过宏定义的公共属性，比如城市名参数发生变化的宏事件记录下城市名 initMap(initCity);
展开源码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>某汽车集团4S店</title>
<style type="text/css">
html {
height: 100%
}
body {
height: 100%;
margin: 0px;
padding: 0px
}
#container {
height: 100%
}
.iwTitle {
color: #cc5522;
line-height: 24px;
font-weight: bold;
}
.iwImage {
float: left;
width: 100px;
height: 100px;
margin-top: 15px;
margin-top: 2px !important;
}
.iwContent {
font-size: 12px;
line-height: 160%;
float: left;
}
.moreInfow {
text-decoration: underline;
color: #0000ff
}
.paramsControl {
width: 470px;
background: transparent;
border-left: 1px solid #999;
}
.paramItem {
color: #2076b2;
float: left;
font-weight: bold;
background: url(img/paramscontrol_bg.png) repeat-x;
border: 1px solid #999; border;
padding: 5px;
border-left: none;
}
.paramItemSelected {
background: url(img/paramscontrol_bg_selected.png) repeat-x;
color: #ffffff;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
</head>
<body>
<div id="container"></div>
<script type="text/javascript">
var exampleData = [ {
cityName : '重庆',
name : '重庆万友行健长安轿车4S店',
addr : '嘉陵江滨江路246号',
contact : '王先生',
tel : '(023)63605050',
lng : 106.559914,
lat : 29.572448,
brand : '长安',
yearSales : 100,
monthSales : 18,
predictSales : 200,
salesPlanning : 200,
salesRate : '50%',
img : 'img/changan.jpg'
}, {
cityName : '重庆',
name : '长安汽车重庆丰尚4S店',
addr : '重庆经济技术开发区经开园金渝大道99号附2号',
contact : '朱先生',
lng : 106.581302,
lat : 29.646558,
tel : '(023)67880303, (023)67880202, (023)67883555',
brand : '长安',
yearSales : 200,
monthSales : 25,
predictSales : 300,
salesPlanning : 300,
salesRate : '66%',
img : 'img/changan.jpg'
}, {
cityName : '重庆',
name : '长安铃木汽车瑞隆4S店',
addr : '重庆市渝北区溪街道紫荆路59-73号',
contact : '王先生',
tel : '(023)86063111',
lng : 106.53871,
lat : 29.601499,
brand : '长安',
yearSales : 180,
monthSales : 22,
predictSales : 300,
salesPlanning : 300,
salesRate : '60%',
img : 'img/changan.jpg'
}, {
cityName : '重庆',
name : '广汽本田新亚店',
addr : '谢陈路中段3号',
tel : '(023)68673288',
lng : 106.503162,
lat : 29.529408,
brand : '广汽'
}, {
cityName : '重庆',
name : '广汽长冠店',
addr : '北部新区高新园金开大道15号北部新区汽博中心名车广场B1-2',
tel : '(023)67461881, (023)67681555',
lng : 106.540382,
lat : 29.641927,
brand : '广汽'
}, {
cityName : '重庆',
name : '广汽本田重庆互邦店',
addr : '渝北区新牌坊松牌路519号（新牌坊加油站旁）',
tel : '(023)67525500',
lng : 106.524373,
lat : 29.603555,
brand : '广汽'
}, {
cityName : '重庆',
name : '广汽本田汽车长捷特约销售服务店',
addr : '重庆市渝北区汽博中心C区金童路1号附3号',
tel : '(023)86913809, (023)86099888, (023)86099666',
lng : 106.581492,
lat : 29.650461,
brand : '广汽'
}, {
cityName : '重庆',
name : '广汽丰田长俊北区店',
addr : '近郊北部新区经开区金渝大道88号附4号',
tel : '(023)67469909',
lng : 106.577253,
lat : 29.644902,
brand : '广汽'
}, {
cityName : '涪陵',
name : '长安汽车专营店',
addr : '重庆市涪陵兴华西路',
lng : 107.385073,
lat : 29.709988,
brand : '长安'
}, {
cityName : '涪陵',
name : '长安汽车服务珍溪镇店',
addr : '重庆市涪陵珍溪镇',
tel : '(023)72173344',
lng : 107.4822,
lat : 29.906301,
brand : '长安'
}, {
cityName : '涪陵',
name : '长安福特重庆建洲4S店',
addr : '重庆市涪陵区稻香居委会5组1,2栋(原文化汽修厂)',
lng : 107.376486,
lat : 29.708401,
brand : '长安'
}, {
cityName : '涪陵',
name : '广汽本田强力店涪陵分店 ',
addr : '四环路太极大道70号',
tel : '(023)85690010',
lng : 107.388207,
lat : 29.705796,
brand : '广汽'
}, {
cityName : '广州',
name : '广汽丰田第一店４Ｓ店 ',
addr : '黄埔大道中２４３号',
tel : '(020)85541388, (020)85543222',
lng : 113.377758,
lat : 23.126959,
brand : '广汽'
}, {
cityName : '广州',
name : '广汽本田芳村特约销售服务店',
addr : '广州芳村大道205号',
tel : '400-688-6864',
lng : 113.228406,
lat : 23.11045,
brand : '广汽'
}, {
cityName : '广州',
name : '广汽本田汽车长盛特约销售服务店',
addr : '广州市白云区石井庆槎路801号',
tel : '(020)28803182, (020)28803199',
lng : 113.231453,
lat : 23.20655,
brand : '广汽'
}, {
cityName : '广州',
name : '广汽本田第一店 ',
addr : '广州市黄石东路448号',
tel : '(020)36312957',
lng : 113.280431,
lat : 23.209948,
brand : '广汽'
}, {
cityName : '广州',
name : '长安铃木泰润4S店(华南汽贸店)',
addr : '海珠区广州大道南1601号华南汽贸广场7-8铺(近后滘西大街)',
lng : 113.321084,
lat : 23.079866,
brand : '长安'
}, {
cityName : '广州',
name : '长安汽车4S店广州凯盛南州店 ',
addr : '南洲路48号首层东区',
tel : '(020)84218173',
lng : 113.310916,
lat : 23.069905,
brand : '长安'
}, {
cityName : '广州',
name : '长安福特广州瀚福4S店 ',
addr : '广州市天河区黄埔大道东680号（环城高速东行）',
tel : '(020)82011188',
lng : 113.415116,
lat : 23.112804,
brand : '长安'
}, {
cityName : '广州',
name : '长安汽车广州凯盛(三鹰汽车城店)',
addr : '天河区黄埔大道西668号赛马场汽车城东区A9铺(跑马地花园对面)',
tel : '(020)22223809',
lng : 113.354749,
lat : 23.126209,
brand : '长安'
}, {
cityName : '重庆',
name : '五菱汽车重庆四方汽贸',
addr : '朝田村185号',
tel : '(023)68668919',
lng : 106.498374,
lat : 29.529627,
brand : '五菱'
}, {
cityName : '重庆',
name : '东风小康大兴村专营店',
addr : '建新东路42号近',
tel : '(023)61883388, (023)67740486',
lng : 106.551127,
lat : 29.579006,
brand : '东风小康'
}, {
cityName : '重庆',
name : '东风小康兰花村专营店',
addr : '重庆市九龙坡区',
tel : '(023)61883388',
lng : 106.461895,
lat : 29.526062,
brand : '东风小康'
}, {
cityName : '重庆',
name : '一汽通用维修站',
addr : '白鹤路105号',
tel : '(023)62751107',
lng : 106.567223,
lat : 29.522043,
brand : '一汽'
} ];
var map = null, infoWindow = null, paramsControl = null;
// ===================================================
// 自定义参数begin
// ===================================================
function ParamsControl() {
this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;
this.defaultOffset = new BMap.Size(10, 10);
this.brands = [ "长安", "五菱", "东风小康", "广汽", "一汽" ];
this.iconColors = [ "red", "#edca2d", "blue", "#b02ded", "#ed2dd3" ];
this.idSplit = "_";
}
ParamsControl.prototype = new BMap.Control();
ParamsControl.prototype.initialize = function(map) {
var brands = this.brands;
var div = document.createElement("div");
div.className = "paramsControl";
// 添加DOM元素到地图中
map.getContainer().appendChild(div);
var scope = this;
// 设置选中参数
function setSelectedParam(selectedItem) {
var thisId = selectedItem.id;
var index = thisId.substr(thisId.lastIndexOf(scope.idSplit) + 1) - 0;
var checkbox = null, label = null;
if (thisId.indexOf("checkbox") >= 0) {
checkbox = selectedItem;
} else {
var checkboxId = "checkbox" + scope.idSplit + index;
checkbox = document.getElementById(checkboxId);
checkbox.checked = !checkbox.checked;
}
var selectedC = " paramItemSelected";
var parent = checkbox.parentNode;
if (checkbox.checked) {
add4S(scope.brands[index], scope.cityName, scope.iconColors[index]);
// parent.className += selectedC;
} else {
remove4S(scope.brands[index], scope.cityName);
// parent.className = parent.className.replace(selectedC,"");
}
}
for ( var i in brands) {
var bitem = document.createElement("div");
bitem.className = "paramItem";
bitem.id = "brand" + this.idSplit + i;
var labelId = "label" + this.idSplit + i;
var checkboxId = "checkbox" + this.idSplit + i;
bitem.innerHTML = "<input type='checkbox' id='" + checkboxId + "'/><label id='" + labelId
+ "'>" + brands[i]
+ "</label><span style='display:inline-block; width:8px; background:"
+ (this.iconColors[i] || 'none') + "'>  </span>";
div.appendChild(bitem);
document.getElementById(labelId).onclick = function() {
setSelectedParam(this);
}
document.getElementById(checkboxId).onclick = function() {
setSelectedParam(this);
}
}
setSelectedParam(div.childNodes[0]); // 缺省第一个
// 将DOM元素返回
this.container = div;
return div;
};
ParamsControl.prototype.setCityName = function(cityName) {
this.cityName = cityName;
var brands = this.brands, iconColors = this.iconColors;
map.clearOverlays();
for ( var i = 0, len = brands.length; i < len; i++) {
var checkboxId = "checkbox" + this.idSplit + i;
var checkbox = document.getElementById(checkboxId);
if (checkbox && checkbox.checked) {
add4S(brands[i], this.cityName, iconColors[i]);
}
}
};
// ===================================================
// 自定义参数end
// ===================================================
function initMap(cityName) {
map = new BMap.Map("container");
// var point = new BMap.Point(106.50, 29.55);
// map.centerAndZoom(point, 13);
map.centerAndZoom(cityName, 13);
map.enableScrollWheelZoom();
paramsControl = new ParamsControl();
paramsControl.setCityName(cityName);
map.addControl(paramsControl);
}
// TODO 宏调用设置所需的参数，并且刷新数据,这里直接以exampleData代替
function setParams(cityName) {
map.centerAndZoom(cityName, 13);
paramsControl.setCityName(cityName);
}
// 移除4s店信息
function remove4S(brand, cityName) {
var overLayers = [].concat(map.getOverlays());
for ( var i in overLayers) {
var ly = overLayers[i];
if (ly.data && ly.data.brand == brand && ly.data.cityName == cityName) {
map.removeOverlay(ly);
}
}
}
// 添加4s店信息
function add4S(brand, cityName, iconColor) {
var iconUrl = "img/marker_blue_sprite.png";
if (iconColor) {
iconUrl = "img/marker_" + iconColor.replace("#", "") + "_sprite.png";
}
var myIcon = new BMap.Icon(iconUrl, new BMap.Size(39, 25), {
anchor : new BMap.Size(10, 25)
});
for ( var i in exampleData) {
var di = exampleData[i];
if (di.brand != brand || di.cityName != cityName)
continue;
var pt = new BMap.Point(di.lng, di.lat);
var marker = new BMap.Marker(pt, {
icon : myIcon
});
var clickHandler = function() {
var firstInit = false;
if (infoWindow == null) {
infoWindow = new BMap.InfoWindow();
infoWindow.setWidth(360);
firstInit = true;
}
var di = this.data;
infoWindow.setTitle("<SPAN class='iwTitle' title='" + di.name + "'>" + di.name
+ "</SPAN>");
var content = "<P class='iwContent'>地址：" + di.addr + "<BR>渠道联系人：" + di.contact || '无'
+ (di.tel ? ("<BR>电话：" + di.tel) : '');
content += "<BR>销售预计：" + (di.predictSales ? di.predictSales : '') + "<BR>销售计划："
+ (di.salesPlanning ? di.salesPlanning : '') + "<BR>本年销量："
+ (di.yearSales ? di.yearSales : '') + "<BR>本月销量："
+ (di.monthSales ? di.monthSales : '') + "<BR>任务完成比例："
+ (di.salesRate ? di.salesRate : '');
content += "<BR><span id='testMore' class='moreInfow' onclick='alert(\'todo\');'>查看数据</span></P>";
content = "<img class='iwImage' src = '" + (di.img || 'img/wutu.jpg') + "'/>" + content;
infoWindow.setContent(content);
this.openInfoWindow(infoWindow);
};
marker.data = di;
map.addOverlay(marker);
marker.addEventListener("click", clickHandler);
marker.addEventListener("infowindowopen", function() {
var scope = this;
document.getElementById('testMore').onclick = function() {
// alert(scope.data.name);
if (window.parent && window.parent.showMoreInfo) {
window.parent.showMoreInfo(scope.data);
}
};
});
}
}
var initCity = (window.parent && window.parent.cityName) || '重庆';
initMap(initCity);
</script>
</body>
</html>
将上述代码保存为文件baidumap.html，再在产品中创建“WEB链接”资源以打开该文件，效果如下：
说明：
上述代码中的示例数据为静态数据，在实际应用中可以改为获取真实数据的报表资源。
附录：
插件包工程源码：baidumap_demo.rar
打包好的插件包：baidumap_demo.ext
上述WEB链接资源：migrate-baidumap-demo.xml
评论
徐晓兰 发表：
smartbi与百度地图交互原理（此处说的是iframe层面的集成），如点击smartbi灵活报表的某行记录，地图定位到对应的点并高亮的具体做法是：
1，在百度地图的jsp中定义公共的方法，如：
function highlightPoint(pointData){
//执行定位到对应的点，并变更点图标的逻辑
}
2，在灵活报表中，随意新建一个跳转规则并保存，然后编辑具体的宏，找到百度地图对应的iframe，并执行里面的方法
//客户端宏，对象 simpleReport，宏事件：onRenderTable function main(simpleReport, simpleReportContext) { simpleReport.addColumnLinkByName("c_dwmc", me); //在单位名称上添加跳转 } var menuItem = { alias: "url", callback: function(simpleReport, simpleReportContext) { var reportMap = getReportMap(window); //获取地图jsp上开放公共js对象 if (reportMap) { var currentCell = simpleReport.currentLinkCell; var trObj = currentCell.parentNode; var len = trObj.children.length; if (len >= 10) { var obj = {}; obj.lng = parseFloat(simpleReport.currentLinkCell.parentNode.children[4].innerText); obj.lat = parseFloat(simpleReport.currentLinkCell.parentNode.children[5].innerText); obj.dwmc = simpleReport.currentLinkCell.parentNode.children[0].innerText; obj.dwdz = simpleReport.currentLinkCell.parentNode.children[3].innerText; obj.lx = simpleReport.currentLinkCell.parentNode.children[8].innerText; obj.aqzrr = simpleReport.currentLinkCell.parentNode.children[6].innerText; obj.aqzrrdh = simpleReport.currentLinkCell.parentNode.children[7].innerText; obj.bz = simpleReport.currentLinkCell.parentNode.children[9].innerText; obj.type = "zdcs"; var datas = []; datas.push(obj); reportMap.locate2(datas, "zdcs_select"); //调用地图方法，实现定位 var layer = reportMap.getLayer(reportMap.LAYER_ZONGDCS); layer.showInfoWindow(null, obj); } } } } function getReportMap (win) { var w = getReportMapWin(win); if (w) { return w.getReportMap(); } else { return null; } } function getReportMapWin (win) { while (win && !win.getReportMap && win !== win.parent) { win = win.parent; }