【整合】百度地图自定义标注点
2011-11-04 15:14
218 查看
<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>
相关文章推荐
- 百度地图使用 自定义标注的图标
- 百度地图的覆盖物自定义(一)--标注物的自定义
- iOS - 百度地图最基本操作(定位,手势添加自定义标注)
- 百度地图的覆盖物自定义(三)--自定义搜索结果+标注+覆盖物
- 使用百度地图LBS创建自定义标注
- 百度地图自定义大头针图片和添加标注
- iOS-百度地图添加标注自定义气泡
- IOS 设置百度地图自定义标注图片,自定义泡泡
- 百度地图SDK2.1.1的自定义图标标注
- 百度地图:自定义结果面板+分页+图层标注
- 百度地图上自定义添加一个标注
- 百度地图使用 自定义标注的图标
- 百度地图 自定义结果面板+分页+图层标注(标注点+搜索)
- 百度地图自定义标注标记
- studio解决百度地图不显示的问题(用自定义的签名文件的时候)
- 百度地图 Android SDK - 标注(Marker)的基本使用
- 百度地图生成器,图标消失,中文乱码和自定义名字undefind
- 点击百度地图添加标注并获取当前地理名称
- spring-boot整合redis作为缓存(3)——自定义key
- 怎样在百度地图上标注上自己公司的名称使别人能在搜索百度地图的同时在地图上能看见本公司地址?