效果图：
示例中的核心代码：
<!DOCTYPE html>
<html>
<head>
<title>某汽车集团4S店</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html,body,#mapDiv {
height: 100%
}
body {
margin: 0px;
padding: 0px
}
#toolbarDiv {
width: 500px;
border-left: 1px solid #999;
}
.btnDiv {
float: left;
color: #BB7A4A;
background-color: #F4F4ED;
font-weight: bold;
border: 1px solid #999;
border-left: none;
padding: 5px;
}
.brand {
width: 12px;
display: inline-block;
}
#brand_0 .brand {
background-color: red;
}
#brand_1 .brand {
background-color: rgb(237, 202, 45);
}
#brand_2 .brand {
background-color: blue;
}
#brand_3 .brand {
background-color: rgb(176, 45, 237);
}
#brand_4 .brand {
background-color: rgb(237, 45, 211);
}
</style>
<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
<script type="text/javascript">
var demoData = [ {
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 : '朝田村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 : '一汽'
} ], index2name = {
0 : '长安',
1 : '五菱',
2 : '东风小康',
3 : '广汽',
4 : '一汽'
}, brandFlags = {}, markers = {}, defaultZoom = 12, map, infoWin;
function byId(id) {
return document.getElementById(id);
}
function startup() {
// 获取"重庆站"经纬度： http://api.map.baidu.com/geocoder/v2/?ak=您的密钥&callback=renderOption&output=json&address=重庆站&city=重庆市
var initLngLat = new TLngLat(106.55501197071, 29.555575376637);
map = new TMap('mapDiv');
map.centerAndZoom(initLngLat, defaultZoom);
map.enableHandleMouseScroll(); // 允许鼠标滚轮缩放地图
// 创建自定义控件，并添加到地图上
var toolbarElem = byId('toolbarDiv');
var toolbarCtrl = new THtmlElementControl(toolbarElem);
toolbarCtrl.setLeft(10);
toolbarCtrl.setTop(10);
map.addControl(toolbarCtrl);
var prefix = 'checkbox_', len = 5, i;
for (var k in index2name) {
var name = index2name[k];
brandFlags[name] = k === 0; // 默认勾选了第一个
}
for (i = 0; i < len; i++) {
(function(i) {
var elem = byId(prefix + i);
elem.onclick = function() {
var name = index2name[i];
var checked = elem.checked;
brandFlags[name] = checked;
refreshMarkers(index2name[i], checked, i);
// if (window.console) window.console.log(brandFlags);
};
})(i);
}
refreshMarkers(index2name[0], true, 0);
}
function cleanup() {
demoData = brandFlags = markers = map = null;
}
function refreshMarkers(brand, checked, index) {
if (!map) {
return;
}
var points = [];
for ( var i = 0, len = demoData.length; i < len; i++) {
var item = demoData[i];
if (item.brand !== brand) {
continue;
}
if (checked) { // 添加标注
// 创建图片对象
var icon = new TIcon('img/marker_' + index + '.png', new TSize(39, 25), {
anchor : new TPixel(10, 25)
});
// 向地图上添加自定义标注
var marker = new TMarker(new TLngLat(item.lng, item.lat), {
icon : icon
});
map.addOverLay(marker);
// 注册标注的点击事件
var markerclick = (function(marker, item) {
return TEvent.addListener(marker, 'click', function(p) {
var lnglat = new TLngLat(item.lng, item.lat);
map.panTo(lnglat, defaultZoom); // 将地图的中心点变换到指定的地理坐标
if (infoWin) {
map.removeOverLay(infoWin);
infoWin = null;
}
// 创建信息窗口对象
infoWin = new TInfoWindow(lnglat, new TPixel( [ 0, -34 ]));
// 设置信息窗口要显示的标题
infoWin.setTitle('<span title="' + item.name + '">' + item.name + '</span>');
// 设置信息窗口要显示的内容
var buff = [];
buff.push('<table>');
buff.push('<colgroup><col /><col width="70%" /></colgroup>');
buff.push('<tbody>');
buff.push('<tr><td noWrap=true>地址：</td><td>' + item.addr + '</td></tr>');
buff.push('<tr><td noWrap=true>渠道联系人：</td><td>' + (item.contact || '无') + '</td></tr>');
if (item.tel) {
buff.push('<tr><td noWrap=true>电话：</td><td>' + item.tel + '</td></tr>');
}
buff.push('<tr><td noWrap=true>销售预计：</td><td>' + (item.predictSales || '') + '</td></tr>');
buff.push('<tr><td noWrap=true>销售计划：</td><td>' + (item.salesPlanning || '') + '</td></tr>');
buff.push('<tr><td noWrap=true>本年销量：</td><td>' + (item.yearSales || '') + '</td></tr>');
buff.push('<tr><td noWrap=true>本月销量：</td><td>' + (item.monthSales || '') + '</td></tr>');
buff.push('<tr><td noWrap=true>任务完成比例：</td><td>' + (item.salesRate || '') + '</td></tr>');
buff.push('</tbody>');
buff.push('</table>');
infoWin.setLabel(buff.join(''));
// 设置信息浮窗的宽度
infoWin.setWidth(260);
// 向地图上添加信息窗口
map.addOverLay(infoWin);
});
})(marker, item);
var brandMarkers = markers[brand] = markers[brand] || [];
brandMarkers.push( {
marker : marker,
markerclick : markerclick
});
points.push(new TLngLat(item.lng, item.lat));
} else { // 移除标注
var brandMarkers = markers[brand];
if (brandMarkers) {
for (var j = 0, leng = brandMarkers.length; j < leng; j++) {
var markerItem = brandMarkers[j];
TEvent.removeListener(markerItem.markerclick); // 移除标注的点击事件
map.removeOverLay(markerItem.marker);
}
markers[brand] = null;
}
if (infoWin) {
map.removeOverLay(infoWin);
infoWin = null;
}
}
}
if (points.length > 0) {
map.setViewport(points);
}
}
</script>
</head>
<body onload="startup();" onunload="cleanup();">
<div id="mapDiv"></div>
<div id="toolbarDiv">
<div class="btnDiv" id="brand_0"><input id="checkbox_0" type="checkbox" checked="checked"><label
for="checkbox_0">长安</label><span class="brand"> </span></div>
<div class="btnDiv" id="brand_1"><input id="checkbox_1" type="checkbox"><label
for="checkbox_1">五菱</label><span class="brand"> </span></div>
<div class="btnDiv" id="brand_2"><input id="checkbox_2" type="checkbox"><label
for="checkbox_2">东风小康</label><span class="brand"> </span></div>
<div class="btnDiv" id="brand_3"><input id="checkbox_3" type="checkbox"><label
for="checkbox_3">广汽</label><span class="brand"> </span></div>
<div class="btnDiv" id="brand_4"><input id="checkbox_4" type="checkbox"><label
for="checkbox_4">一汽</label><span class="brand"> </span></div>
</div>
</body>
</html> |
将上述代码保存为文件tianditu.html，再在产品中创建“WEB链接”资源以打开该文件，效果如下：
说明：
上述代码中的示例数据为静态数据，在实际应用中可以改为通过“灵活分析”等报表资源获取真实数据。
附录：
插件包工程源码：tianditu_demo.rar
打包好的插件包：tianditu_demo.ext
上述WEB链接资源：migrate-tianditu-demo.xml