【整合】百度地图自定义标注点
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>修改地图配置</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>
<style>
.lll{color:#000; text-decoration:none;}
.cityList
{
height: 320px;
width: 372px;
overflow-y: auto;
}
.sel_container
{
position: absolute;
top: 0;
font-size: 12px;
}
.map_popup
{
position: absolute;
z-index: 200000;
width: 382px;
height: 344px;
top: 20px;
}
.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-size: 12px;
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;
border: 0 none;
cursor: pointer;
height: 12px;
position: absolute;
right: 4px;
top: 6px;
width: 12px;
}
</style>
</head>
<body>
<div style="width: 1500px; height: 700px; border: 1px solid gray" id="container">
</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>
坐标获取
http://openapi.baidu.com/map/pick/index.html
</body>
</html>
<script type="text/javascript">
// 标注点数组
var BASEDATA = [
{url:"http://www.52taiqiu.com", title: "奥亚酒店", content: "北苑路169号", point: "116.422792|40.009471" },
{ url: "http://www.52taiqiu.com", title: "珀丽酒店", content: "将台西路8号", point: "116.484289|39.97936" },
{ url: "http://www.52taiqiu.com", title: "贵国酒店", content: "左家庄1号", point: "116.454494|39.964011" },
{ url: "http://www.52taiqiu.com", title: "科通酒店", content: "民族园路8号院2号楼", point: "116.394601|39.987925" },
{ url: "http://www.52taiqiu.com", title: "将台酒店", content: "酒仙桥路甲12号", point: "116.496024|39.976864" },
{ url: "http://www.52taiqiu.com", title: "成宏酒店", content: "北四环东路惠新东桥西北侧", point: "116.429445|39.995392" },
{ url: "http://www.52taiqiu.com", title: "华商酒店", content: "延静西里2号", point: "116.488962|39.921939" },
{ url: "http://www.52taiqiu.com", title: "标华酒店", content: "北京市 朝阳区红庙路柴家湾1号", point: "116.489284|39.92104" },
{ url: "http://www.52taiqiu.com", title: "万程酒店", content: "天坛路89号", point: "116.411762|39.89457" },
{ url: "http://www.52taiqiu.com", title: "黎昌酒店", content: "永定门外彭庄乙58号", point: "116.393532|39.876272" },
{ url: "http://www.52taiqiu.com", title: "北京图书馆", content: "北京市海淀区白石桥路39号", point: "116.329593|39.952398" },
{ url: "http://www.52taiqiu.com", title: "海淀图书馆", content: "丹棱街16西门", point: "116.315551|39.984388" },
{ url: "http://www.52taiqiu.com", title: "北京图书馆", content: "北京市西城区文津街附近", point: "116.391713|39.929007" },
{ url: "http://www.52taiqiu.com", title: "首都图书馆", content: "东三环南路88号", point: "116.469899|39.87684" },
{ url: "http://www.52taiqiu.com", title: "国家图书馆", content: "中关村南大街33号", point: "116.331292|39.949031" },
{ url: "http://www.52taiqiu.com", title: "崇文区图书馆", content: "北京市崇文区花市大街113号（乐天玛特超市旁）的敕建火德真君庙内", point: "116.427671|39.903568" },
{ url: "http://www.52taiqiu.com", title: "朝阳区图书馆", content: "北京市朝阳区朝外小庄金台里17号", point: "116.47766|39.922295" },
{ url: "http://www.52taiqiu.com", title: "宣武区图书馆", content: "教子胡同8号", point: "116.374561|39.894302" },
{ url: "http://www.52taiqiu.com", title: "东城区图书馆", content: "交道口东大街85号", point: "116.41927|39.9474" },
{ url: "http://www.52taiqiu.com", title: "西城区图书馆", content: "北京市西城区后广平胡同26号", point: "116.368099|39.942332" }
]
var map = new BMap.Map("container"); // 创建Map实例
for (var i = 0; i < BASEDATA.length; i++) {
var p = BASEDATA[i].point;
var p_x = p.split('|')[0];
var p_y = p.split('|')[1];
if (i == 0) {
var point = new BMap.Point(p_x, p_y); // 创建点坐标
map.centerAndZoom(point, 14); // 初始化地图,设置中心点坐标和地图级别。
}
var label = new BMap.Label("<a target='_blank' class='lll' href='" + BASEDATA[i].url + "'><b>" + BASEDATA[i].title + "</b></a><br/>" + BASEDATA[i].content, { "offset": new BMap.Size(20, -10) }); //设置label
var point1 = new BMap.Point(p_x, p_y);
addMarker(point1, label);
}
map.enableScrollWheelZoom(); // 启用滚轮放大缩小。
map.enableKeyboard(); // 启用键盘操作。
map.addControl(new BMap.NavigationControl()); //增加缩略
// 编写自定义函数,创建标注
function addMarker(p, l) {
var marker = new BMap.Marker(p); // 创建标注
marker.setLabel(l); //添加label
map.addOverlay(marker); // 将标注添加到地图中
l.setStyle({//设置lable样式
borderColor: "#808080",
color: "#333",
cursor: "pointer",
padding:"2px"
});
}
// 创建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>
posted on 2011-11-04 15:14 BarneyZhang 阅读(4524) 评论(0) 编辑 收藏 举报
