<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/CSS">
body, html {
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
font-size: 14px;
}
.anchorBL {
display: none;
}
#l-map {
width: 100%;
height: 630px;
overflow: hidden;
}
#result {
width: 100%;
}
li {
line-height: 28px;
}
.cityList {
height: 320px;
width: 372px;
overflow-y: auto;
}
.sel_container {
z-index: 9999;
font-size: 12px;
position: absolute;
right: 0px;
top: 0px;
width: 140px;
background: rgba(255,255,255,0.8);
height: 30px;
line-height: 30px;
padding: 5px;
}
.map_popup {
position: absolute;
z-index: 200000;
width: 382px;
height: 344px;
right: 0px;
top: 40px;
}
.map_popup .popup_main {
background: #fff;
border: 1px solid #8BA4D8;
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
z-index: 2;
}
.map_popup .title {
background: url("http://map.baidu.com/img/popup_title.gif") repeat scroll 0 0 transparent;
color: #6688CC;
font-weight: bold;
height: 24px;
line-height: 25px;
padding-left: 7px;
}
.map_popup button {
background: url("http://map.baidu.com/img/popup_close.gif") no-repeat scroll 0 0 transparent;
cursor: pointer;
height: 12px;
position: absolute;
right: 4px;
top: 6px;
width: 12px;
}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8xoEYkEG7Qexkb5d2ehu0OypBeLbk4SU"></script>
<!-- 加载城市列表 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
<title>中国五级以上地震-ATtuing</title>
</head>
<body>
<div id="l-map"></div>
<div id="result">
<button id="open">打开</button><button id="close">关闭</button>
</div>
<!--城市列表-->
<div class="sel_container"><strong id="curCity">北京市</strong> [<a id="curCityText" href="javascript:void(0)">更换城市</a>]</div>
<div class="map_popup" id="cityList" style="display:none;">
<div class="popup_main">
<div class="title">城市列表</div>
<div class="cityList" id="citylist_container"></div>
<button id="popup_close"></button>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("l-map"); // 创建地图实例
var point = new BMap.Point(102.14004, 32.427558); // 创建点坐标
map.centerAndZoom(point, 6); // 初始化地图,设置中心点坐标和地图级别
map.enableScrollWheelZoom();
map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
var customLayer;
function addCustomLayer(keyword) {
if (customLayer) {
map.removeTileLayer(customLayer);
}
customLayer = new BMap.CustomLayer({
geotableId: 173917,
q: ‘‘, //检索关键字
tags: ‘‘, //空格分隔的多字符串
filter: ‘‘ //过滤条件,参考http://lbsyun.baidu.com/lbs-geosearch.htm#.search.nearby
});
map.addTileLayer(customLayer);
customLayer.addEventListener(‘hotspotclick‘, callback);
}
function callback(e)//单击热点图层
{
var customPoi = e.customPoi;//poi的默认字段
var contentPoi = e.content;//poi的自定义字段
var opts = {
width: 290, //宽度
height: 120, //高度
title: "中国历史地震", // 信息窗口标题
}
var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
var content = ‘‘;
if (contentPoi.depth == "0") {
contentPoi.depth = "无数据";
}
var infoWindow = new BMap.InfoWindow("地址:" + contentPoi.address + "<br />时间:" + contentPoi.datetime
+ "<br />深度:" + contentPoi.depth + "<br />震级:" + contentPoi.magnitude, opts);
map.openInfoWindow(infoWindow, point);
}
document.getElementById("open").onclick = function () {
addCustomLayer();
};
document.getElementById("open").click();
document.getElementById("close").onclick = function () {
if (customLayer) {
map.removeTileLayer(customLayer);
}
};
// 创建CityList对象,并放在citylist_container节点内
var myCl = new BMapLib.CityList({ container: "citylist_container", map: map });
// 给城市点击时,添加相关操作
myCl.addEventListener("cityclick", function (e) {
// 修改当前城市显示
document.getElementById("curCity").innerHTML = e.name;
// 点击后隐藏城市列表
document.getElementById("cityList").style.display = "none";
});
// 给“更换城市”链接添加点击操作
document.getElementById("curCityText").onclick = function () {
var cl = document.getElementById("cityList");
if (cl.style.display == "none") {
cl.style.display = "";
} else {
cl.style.display = "none";
}
};
// 给城市列表上的关闭按钮添加点击操作
document.getElementById("popup_close").onclick = function () {
var cl = document.getElementById("cityList");
if (cl.style.display == "none") {
cl.style.display = "";
} else {
cl.style.display = "none";
}
};
</script>
来源: http://www.bubuko.com/infodetail-2253515.html