头部:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=84302469552E1fa2d226abf98264cc96"></script>
页面载入地图
// -------------- 载入地图 -----------------
var map = new BMap.Map("lightning-wrapper", {minZoom: 5, mapType: BMAP_SATELLITE_MAP});
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.addControl(new BMap.MapTypeControl());
map.enableScrollWheelZoom();
// 标注行政区
var bdary = new BMap.Boundary();
// 标注行政区
bdary.get(‘${city}‘, function (rs) {
var count = rs.boundaries.length;
for (var c = 0; c < count; c++) {
var ply = new BMap.Polygon(rs.boundaries[c], {strokeWeight: 1, strokeColor: "#FF0000", fillColor: "#FEFEFE", fillOpacity: 0.6});
}
map.addOverlay(ply);
map.setViewport(ply.getPath());
});使用自定义图标
var myIcon = new BMap.Icon("${resource(dir: ‘images‘, file: ‘lightning.png‘)}", new BMap.Size(32, 32));处理数据
$(".searchable").bind("click", function () {
// 先清除所有的active
$(".searchable").removeClass("active");
var active = $(this);
active.addClass("active");
// 请求页面
var begin = active.attr("begin");
var end = active.attr("end");
var reqUrl = dataUrl;
// 替换请求的时间变量
reqUrl = reqUrl.replace(‘begin‘, begin).replace(‘end‘, end);
txt.html("请求数据...");
// 先清除所有的点
for (var i = 0; i < markers.length; i++) {
map.removeOverlay(markers[i]);
}
// 清除容器
markers = [];
// 请求数据
$.ajax({
type: ‘get‘,
url: reqUrl,
dataType: ‘jsonp‘,
jsonp: "callback",
jsonpCallback: "callback1",
success: function (data) {
// 解析数据,加入到地图中
// 输出经纬度
if ("DB_ERROR : query no dataset" == data) {
txt.html("没有数据");
} else {
txt.html("找到 " + data.length + " 条记录");
for (var i = 0; i < data.length; i++) {
var lot = data[i][‘longitude‘];
var lat = data[i][‘latitude‘];
var ist = data[i][‘intensity‘];
if (lot && lat) {
// 加入到地图
var point = new BMap.Point(lot, lat);
markers[i] = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(markers[i]);
}
}
}
}
});
});原文地址:http://xiaosa.blog.51cto.com/665033/1596090