公司有用到地图部分，记录下，以后可能会用到：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="x-rim-auto-match" content="none">
<meta name="Copyright" content="Copyright (c) 2017 by 北京新东方学校" />
<title>雅思网-北京新东方</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<!-- 引入 js -->
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 引入 css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/bxslider/4.2.12/jquery.bxslider.min.css" rel="stylesheet">
<link href="css/index.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--ys-map-->
<div class="container-fluid ys-map ys-sm-hide">
<div class="row">
<div class="col-md-9 padding-none">
<div id="map"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=D64e01c94b9b7d749573e74b245435de"></script>
<script type="text/javascript" src="js/convertor.js"></script>
<script src="js/index_ditu.js"></script>
</div>
<div class="col-md-3 padding-none">
<div class="school-right" id="choicea" id="schoollist" id="arealist">
<dl class="clearfix">
<dt>海淀区</dt>
<dd>
<ul>
<li cid="1" class="map_dl02 fix" title="总部北楼" address="北京市海淀区海淀中街6号" telephone="010-82611818" worktime="周一至周日：08:00-18:30
<br/>奖学金登记及领取、开具学时证明业务营业时间：9:30-18:30" code="null" x="116.318593" y="39.986786" schoolId="2649427d-efe3-47b2-9dd4-f046d77b7297">
<a class="" target="_blank" title="查看校区信息">总部北楼（仅咨询）</a>
</li>
<li cid="1" class="map_dl02 fix" title="水清木华校区" address="北京市海淀区中关村北二街4号水清木华园8号楼" telephone="010-82611818" worktime="周一至周日09:00-18:00"
code="ARBJ02" x="116.334077" y="39.996494" schoolId="a33485e4-d16c-42e5-ac40-d53dcf9d3f53">
<a class="" target="_blank" title="查看校区信息">水清木华校区</a>
</li>
<li cid="1" class="map_dl02 fix" title="公主坟天行健校区" address="北京市海淀区复兴路47号天行健商务大厦" telephone="010-82611818" worktime="<strong>春秋季</strong>（3月至6月及9月至12月）
<br/>周二至周日09:00-18:00
<br/><strong>寒暑假</strong>（1月至2月及7月至8月）
<br/>周一至周日09:00-18:00" code="ARBJ38" x="116.307216" y="39.914729" schoolId="650cb7cb-ff87-4479-8206-bf1589187fd6">
<a class="" target="_blank" title="查看校区信息">公主坟天行健校区</a>
</li>
<li cid="1" class="map_dl02 fix" title="远大路校区" address="北京市海淀区远大路十九号南楼（A座）" telephone="010-82611818" worktime="<strong>春秋季</strong>（3月至6月及9月至12月）
<br/>周二至周日09:00-18:00
<br/><strong>寒暑假</strong>（1月至2月及7月至8月）
<br/>周一至周日09:00-18:00" code="ARBJ55" x="116.288732" y="39.963764" schoolId="5af812cb-abe1-45b5-b55b-331f34bb0182">
<a class="" target="_blank" title="查看校区信息">远大路校区</a>
</li>
<li cid="1" class="map_dl02 fix" title="魏公村韦伯时代校区" address="北京市海淀区中关村南大街17号3号楼2层、3层" telephone="010-82611818" worktime="周一至周日09:00-18:00"
code="ARBJ54" x="116.328103" y="39.959644" schoolId="45117690-d9ee-47da-a3b7-c76c4e415b6d">
<a class="" target="_blank" title="查看校区信息">魏公村韦伯时代校区</a>
</li>
<li cid="1" class="map_dl02 fix" title="大钟寺校区" address="北京市海淀区北三环西路甲18号中坤广场D座4层" telephone="010-82611818" worktime="<strong>春秋季</strong>（3月至6月及9月至12月）
<br/>周二至周日09:00-18:00
<br/><strong>寒暑假</strong>（1月至2月及7月至8月）
<br/>周一至周日09:00-18:00" code="ARBJ73" x="116.349253" y="39.972546" schoolId="92de1d84-e8ce-4c03-8f2e-7791bdd918e7">
<a class="" target="_blank" title="查看校区信息">大钟寺校区</a>
</li>
<li cid="1" class="map_dl02 fix" title="育新大厦校区" address="北京市海淀区海淀大街42号" telephone="010-82611818" worktime="<strong>春秋季</strong>（3月至6月及9月至12月）
<br/>周二至周日09:00-18:00
<br/><strong>寒暑假</strong>（1月至2月及7月至8月）
<br/>周一至周日09:00-18:00" code="ARBJ88" x="116.311859" y="39.98968" schoolId="83290db3-e429-40ec-a1ad-ee29d7adf8b5">
<a class="" target="_blank" title="查看校区信息">育新大厦校区</a>
</li>
</ul>
</dd>
</dl>
<dl class="clearfix">
<dt>朝阳区</dt>
<dd>
<ul>
<li cid="1" class="map_dl02 fix" title="望京华彩校区" address="北京市朝阳区望京广顺北大街华彩商业大厦5层" telephone="010-82611818" worktime="<strong>春秋季</strong>（3月至6月及9月至12月）
<br/>周二至周日09:00-18:00
<br/><strong>寒暑假</strong>（1月至2月及7月至8月）
<br/>周一至周日09:00-18:00" code="ARBJ85" x="116.475584" y="40.014955" schoolId="99c44e71-567e-47c8-99c1-521c49bcc9f6">
<a class="" target="_blank" title="查看校区信息">望京华彩校区</a>
</li>
<li cid="1" class="map_dl02 fix" title="国贸瑞赛校区" address="北京市朝阳区建外郎家园19号楼瑞赛商务楼2-4层、6层" telephone="010-82611818" worktime="周一至周日09:00-18:00"
code="null" x="116.471641" y="39.911977" schoolId="296499fa-fc99-4420-9997-bca2a9d5776b">
<a class="" target="_blank" title="查看校区信息">国贸瑞赛校区</a>
</li>
<li cid="1" class="map_dl02 fix" title="建外SOHO校区" address="北京市朝阳区东三环中路39号建外SOHO A座2501室" telephone="010-82611818" worktime="<strong>春秋季</strong>（3月至6月及9月至12月）
<br/>周二至周日09:00-18:00
<br/><strong>寒暑假</strong>（1月至2月及7月至8月）
<br/>周一至周日09:00-18:00" code="null" x="116.467415" y="39.911722" schoolId="d2d75c19-b236-40d3-b12c-154cafc40f21">
<a class="" target="_blank" title="查看校区信息">建外SOHO校区</a>
</li>
<li cid="1" class="map_dl02 fix" title="三元桥校区" address="北京市朝阳区曙光西里甲1号第三置业大厦A座1102室" telephone="010-82611818" worktime="<strong>春秋季</strong>（3月至6月及9月至12月）
<br/>周二至周日09:00-18:00
<br/><strong>寒暑假</strong>（1月至2月及7月至8月）
<br/>周一至周日09:00-18:00" code="ARBJ64" x="116.457875" y="39.966407" schoolId="a26aeea6-54db-4760-8799-c90fd5aa92a5">
<a class="" target="_blank" title="查看校区信息">三元桥校区</a>
</li>
<li cid="1" class="map_dl02 fix" title="洛克时代校区" address="北京市朝阳区慧忠里103号洛克时代中心B座4层" telephone="010-82611818" worktime="<strong>春秋季</strong>（3月至6月及9月至12月）
<br/>周二至周日09:00-18:00
<br/><strong>寒暑假</strong>（1月至2月及7月至8月）
<br/>周一至周日09:00-18:00" code="ARBJ69" x="116.413724" y="40.008609" schoolId="4ff8ebbe-323b-4966-a439-2382a78052f7">
<a class="" target="_blank" title="查看校区信息">洛克时代校区</a>
</li>
</ul>
</dd>
</dl>
<dl class="clearfix">
<dt>西城区</dt>
<dd>
<ul>
<li cid="1" title="新外大街校区" address="北京市西城区新街口外大街甲12号" telephone="010-82611818" worktime="<strong>春秋季</strong>（3月至6月及9月至12月）
<br/>周二至周日09:00-18:00
<br/><strong>寒暑假</strong>（1月至2月及7月至8月）
<br/>周一至周日09:00-18:00" code="ARBJ67" x="116.378059" y="39.966794" schoolid="17556025-f420-4918-9489-ba542298879d">
<a class="" target="_blank" title="查看校区信息">新外大街校区</a>
</li>
</ul>
</dd>
</dl>
<dl class="clearfix">
<dt>东城区</dt>
<dd>
<ul>
<li cid="1" class="map_dl02 fix" title="东四校区" address="北京市东城区东四南大街36号（三友商场对面）" telephone="010-82611818" worktime="<strong>春秋季</strong>（3月至6月及9月至12月）
<br/>周二至周日09:00-18:00
<br/><strong>寒暑假</strong>（1月至2月及7月至8月）
<br/>周一至周日09:00-18:00" code="ARBJ57" x="116.42414" y="39.929423" schoolId="6134e79a-0b7e-4947-ba31-42de73470e6d">
<a class="" target="_blank" title="查看校区信息">东四校区</a>
</li>
<li cid="1" class="map_dl02 fix" title="北新桥校区" address="北京市东城区雍和宫大街94号" telephone="010-82611818" worktime="<strong>春秋季</strong>（3月至6月及9月至12月）
<br/>周二至周日09:00-18:00
<br/><strong>寒暑假</strong>（1月至2月及7月至8月）
<br/>周一至周日09:00-18:00" code="ARBJ58" x="116.423289" y="39.948276" schoolId="f33b63c8-f0d8-45b8-8b31-9a6d082bb8ab">
<a class="" target="_blank" title="查看校区信息">北新桥校区</a>
</li>
<li cid="1" class="map_dl02 fix" title="崇文门校区" address="北京市东城区崇文门外大街16号国瑞大厦写字楼7层、12层" telephone="010-82611818" worktime="周一至周日09:00-18:00"
code="ARBJ39" x="116.425557" y="39.904989" schoolId="41d98d26-b592-408b-b21b-460531ad5059">
<a class="" target="_blank" title="查看校区信息">崇文门校区</a>
</li>
</ul>
</dd>
</dl>
<dl class="clearfix">
<dt></dt>
<dd>
<ul>
<li value="17">
<a></a>
</li>
</ul>
</dd>
</dl>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="js/convertor.js"></script>
//2011-7-25
(function(){ //闭包
function load_script(xyUrl, callback){
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = xyUrl;
//借鉴了jQuery的script跨域方法
script.onload = script.onreadystatechange = function(){
if((!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){
callback && callback();
// Handle memory leak in IE
script.onload = script.onreadystatechange = null;
if ( head && script.parentNode ) {
head.removeChild( script );
}
}
};
// Use insertBefore instead of appendChild to circumvent an IE6 bug.
head.insertBefore( script, head.firstChild );
}
function translate(point,type,callback){
var callbackName = 'cbk_' + Math.round(Math.random() * 10000); //随机函数名
var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from="+ type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName;
//动态创建script标签
load_script(xyUrl);
BMap.Convertor[callbackName] = function(xyResult){
delete BMap.Convertor[callbackName]; //调用完需要删除改函数
var point = new BMap.Point(xyResult.x, xyResult.y);
callback && callback(point);
}
}
window.BMap = window.BMap || {};
BMap.Convertor = {};
BMap.Convertor.translate = translate;
})();
<script src="js/index_ditu.js"></script>
// JavaScript Document
GetMapContent = function (name, address, telephone, workTime, code, cid, schoolId,tiaozhuan) {
return '<div class="school-title" id="2">' +
'<h3>' + name + '</h3>' +
'<p class="p1">' + address + '</p>' +
'<p class="p2"><strong>工作时间:</strong>' + workTime + '</p>' +
'<p class="p2"><strong>咨询电话:</strong>' + telephone + '</p>' +
'<p class="p3">' +
// '<a href="schoolDetail_' + schoolId + '" target="_blank" title="查看校区详情">查看校区详情</a>' +
'<a href="http://souke.xdf.cn/Search?cid=' + cid + '&acode=' + encodeURIComponent(code) + '&areaname=' + encodeURIComponent(name) + '&ccc=414" target="_blank" title="了解课程详情">了解课程详情</a>' +
'</p>' +
'</div>';
};
$(function () {
window.markers = [];
var oadr = document.getElementById('arealist');
//var ad = oadr.getElementsByTagName('dt');
var o_child = document.getElementById('schoollist');
//var ad_child = o_child.getElementsByTagName('li');
var o_list = $('#choicea');
var a_list = o_list.find('li');
var x = 116.417856;
var y = 39.981264;
var ggPoint = new BMap.Point(x, y);
var opts = {
offset: new BMap.Size(0, -10)
};
var map = null;
var icon = new BMap.Icon("images/map_icon.png",
new BMap.Size(58, 68), {
// 指定定位位置。
// 当标注显示在地图上时，其所指向的地理位置距离图标左上
// 角各偏移10像素和25像素。您可以看到在本例中该位置即是
// 图标中央下端的尖角位置。
offset: new BMap.Size(0, 0),
// 设置图片偏移。
// 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
// 需要指定大图的偏移位置，此做法与css sprites技术类似。
imageOffset: new BMap.Size(0, 0) // 设置图片偏移
}
);
window.icon = icon;
window.opts = opts;
function initialize2(point) {
//alert(point.lng + "," + point.lat);
map = new BMap.Map("map"); // 创建Map实例
window.map = map;
// // 初始化地图,设置中心点坐标和地图级别。
if (a_list.length > 0) {
map.centerAndZoom(new BMap.Point(a_list.eq(0).attr("x"), a_list.eq(0).attr("y")), 12);
} else {
map.centerAndZoom(point, 14);
}
map.enableScrollWheelZoom(); //启用滚轮放大缩小
map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
map.setCurrentCity("北京");
for (var i = 0; i < a_list.length; i++) {
var p = new BMap.Point(a_list.eq(i).attr("x"), a_list.eq(i).attr("y"));
addMarker(p, i, icon);
}
}
//坐标转换完之后的回调函数
translateCallback = function (point) {
initialize2(point);
};
BMap.Convertor.translate(ggPoint, 2, translateCallback);
function addMarker(p, i, icon) {
marker = new BMap.Marker(p, {
icon: icon
});
window.markers.push(marker);
map.addOverlay(marker);
marker.addEventListener("click", function () {
a_list.eq(i).click();
});
}
for (var i = 0; i < a_list.length; i++) {
a_list[i].onmouseover = function () {
//odta.style.display = 'block';
};
a_list[i].onclick = function () {
for (var i = 0; i < a_list.length; i++) {
a_list[i].className = '';
}
this.className = 'active';
if ($(this).attr("x") != "" && $(this).attr("y") != "") {
content = GetMapContent($(this).attr("title"), $(this).attr("address"), $(this).attr("telephone"), $(this).attr("worktime"), $(this).attr("code"), $(this).attr("cid"), $(this).attr("schoolId"));
var clickpoint = new BMap.Point($(this).attr("x"), $(this).attr("y"),15);
addMarker(clickpoint, i, icon);
map.openInfoWindow(new BMap.InfoWindow(content, opts), clickpoint);
map.panTo(clickpoint);
window.map.centerAndZoom(new BMap.Point($(this).attr("x"), $(this).attr("y")),19);
//map.setCenter(clickpoint);
// map.centerAndZoom(clickpoint,12);
}
};
}
})
window.rePaintMarkers = function (xiaoqutype, liuxue, areaid,dangqiandom,xx,yy) {
var showschool = $("#"+dangqiandom).find("li");
if (window.map && window.map !== undefined && window.map.closeInfoWindow) {
window.map.closeInfoWindow();
}
//去除标志物
if (window.markers !== undefined) {
for(var i = 0; i < window.markers.length; i++) {
var marker = window.markers[i];
marker.remove();
}
}
window.markers = [];
//循环加上目前点击区域的marker
//定位到当前区域
console.log(dangqiandom);
if (showschool.length > 0 && window.map.centerAndZoom) {
if(dangqiandom=='caoyang'){
window.map.centerAndZoom(new BMap.Point(showschool.eq(0).attr("x"),showschool.eq(0).attr("y")),12);
}else if(dangqiandom=='haidian'){
window.map.centerAndZoom(new BMap.Point(showschool.eq(5).attr("x"),showschool.eq(5).attr("y")),13);
}else if(dangqiandom=='changping'){
window.map.centerAndZoom(new BMap.Point(showschool.eq(0).attr("x"),showschool.eq(0).attr("y")),11);
}else{
window.map.centerAndZoom(new BMap.Point(showschool.eq(0).attr("x"),showschool.eq(0).attr("y")),13);
}
}
//给当前点击的对象添加marker
if (window.map.centerAndZoom) {
//循环加上dian
for (var i = 0; i < showschool.length; i++) {
// 给marker加点击事件监听
var point = new BMap.Point(showschool.eq(i).attr("x"), showschool.eq(i).attr("y"));
var marker = new BMap.Marker(point, {icon: window.icon});
window.markers.push(marker);
window.map.addOverlay(marker);
var content = GetMapContent($(showschool[i]).attr("title"), $(showschool[i]).attr("address"), $(showschool[i]).attr("telephone"), $(showschool[i]).attr("worktime"), $(showschool[i]).attr("code"), $(showschool[i]).attr("cid"),$(showschool[i]).attr("schoolId"));
var i = i;
(function(point, content,i) {
marker.addEventListener("click", function (e) {
showschool.eq(i).click();
});
})(point, content,i);
}
}
}
