公司有用到地圖部分，記錄下，以后可能會用到：
<!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 北京新東方學(xué)校" />
<title>雅思網(wǎng)-北京新東方</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 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>海淀區(qū)</dt>
<dd>
<ul>
<li cid="1" class="map_dl02 fix" title="總部北樓" address="北京市海淀區(qū)海淀中街6號" telephone="010-82611818" worktime="周一至周日：08:00-18:30
<br/>獎學(xué)金登記及領(lǐng)取、開具學(xué)時證明業(yè)務(wù)營業(yè)時間：9:30-18:30" code="null" x="116.318593" y="39.986786" schoolId="2649427d-efe3-47b2-9dd4-f046d77b7297">
<a class="" target="_blank" title="查看校區(qū)信息">總部北樓（僅咨詢）</a>
</li>
<li cid="1" class="map_dl02 fix" title="水清木華校區(qū)" address="北京市海淀區(qū)中關(guān)村北二街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="查看校區(qū)信息">水清木華校區(qū)</a>
</li>
<li cid="1" class="map_dl02 fix" title="公主墳天行健校區(qū)" address="北京市海淀區(qū)復(fù)興路47號天行健商務(wù)大廈" 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="查看校區(qū)信息">公主墳天行健校區(qū)</a>
</li>
<li cid="1" class="map_dl02 fix" title="遠大路校區(qū)" address="北京市海淀區(qū)遠大路十九號南樓（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="查看校區(qū)信息">遠大路校區(qū)</a>
</li>
<li cid="1" class="map_dl02 fix" title="魏公村韋伯時代校區(qū)" address="北京市海淀區(qū)中關(guān)村南大街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="查看校區(qū)信息">魏公村韋伯時代校區(qū)</a>
</li>
<li cid="1" class="map_dl02 fix" title="大鐘寺校區(qū)" address="北京市海淀區(qū)北三環(huán)西路甲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="查看校區(qū)信息">大鐘寺校區(qū)</a>
</li>
<li cid="1" class="map_dl02 fix" title="育新大廈校區(qū)" address="北京市海淀區(qū)海淀大街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="查看校區(qū)信息">育新大廈校區(qū)</a>
</li>
</ul>
</dd>
</dl>
<dl class="clearfix">
<dt>朝陽區(qū)</dt>
<dd>
<ul>
<li cid="1" class="map_dl02 fix" title="望京華彩校區(qū)" address="北京市朝陽區(qū)望京廣順北大街華彩商業(yè)大廈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="查看校區(qū)信息">望京華彩校區(qū)</a>
</li>
<li cid="1" class="map_dl02 fix" title="國貿(mào)瑞賽校區(qū)" address="北京市朝陽區(qū)建外郎家園19號樓瑞賽商務(wù)樓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="查看校區(qū)信息">國貿(mào)瑞賽校區(qū)</a>
</li>
<li cid="1" class="map_dl02 fix" title="建外SOHO校區(qū)" address="北京市朝陽區(qū)東三環(huán)中路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="查看校區(qū)信息">建外SOHO校區(qū)</a>
</li>
<li cid="1" class="map_dl02 fix" title="三元橋校區(qū)" address="北京市朝陽區(qū)曙光西里甲1號第三置業(yè)大廈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="查看校區(qū)信息">三元橋校區(qū)</a>
</li>
<li cid="1" class="map_dl02 fix" title="洛克時代校區(qū)" address="北京市朝陽區(qū)慧忠里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="查看校區(qū)信息">洛克時代校區(qū)</a>
</li>
</ul>
</dd>
</dl>
<dl class="clearfix">
<dt>西城區(qū)</dt>
<dd>
<ul>
<li cid="1" title="新外大街校區(qū)" address="北京市西城區(qū)新街口外大街甲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="查看校區(qū)信息">新外大街校區(qū)</a>
</li>
</ul>
</dd>
</dl>
<dl class="clearfix">
<dt>東城區(qū)</dt>
<dd>
<ul>
<li cid="1" class="map_dl02 fix" title="東四校區(qū)" address="北京市東城區(qū)東四南大街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="查看校區(qū)信息">東四校區(qū)</a>
</li>
<li cid="1" class="map_dl02 fix" title="北新橋校區(qū)" address="北京市東城區(qū)雍和宮大街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="查看校區(qū)信息">北新橋校區(qū)</a>
</li>
<li cid="1" class="map_dl02 fix" title="崇文門校區(qū)" address="北京市東城區(qū)崇文門外大街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="查看校區(qū)信息">崇文門校區(qū)</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); //隨機函數(shù)名
var xyUrl = "http://api.map.baidu.com/ag/coord/convert?from="+ type + "&to=4&x=" + point.lng + "&y=" + point.lat + "&callback=BMap.Convertor." + callbackName;
//動態(tài)創(chuàng)建script標(biāo)簽
load_script(xyUrl);
BMap.Convertor[callbackName] = function(xyResult){
delete BMap.Convertor[callbackName]; //調(diào)用完需要刪除改函數(shù)
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="查看校區(qū)詳情">查看校區(qū)詳情</a>' +
'<a + 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), {
// 指定定位位置。
// 當(dāng)標(biāo)注顯示在地圖上時，其所指向的地理位置距離圖標(biāo)左上
// 角各偏移10像素和25像素。您可以看到在本例中該位置即是
// 圖標(biāo)中央下端的尖角位置。
offset: new BMap.Size(0, 0),
// 設(shè)置圖片偏移。
// 當(dāng)您需要從一幅較大的圖片中截取某部分作為標(biāo)注圖標(biāo)時，您
// 需要指定大圖的偏移位置，此做法與css sprites技術(shù)類似。
imageOffset: new BMap.Size(0, 0) // 設(shè)置圖片偏移
}
);
window.icon = icon;
window.opts = opts;
function initialize2(point) {
//alert(point.lng + "," + point.lat);
map = new BMap.Map("map"); // 創(chuàng)建Map實例
window.map = map;
// // 初始化地圖,設(shè)置中心點坐標(biāo)和地圖級別。
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(); //啟用滾輪放大縮小，默認(rèn)禁用
map.enableContinuousZoom(); //啟用地圖慣性拖拽，默認(rèn)禁用
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);
}
}
//坐標(biāo)轉(zhuǎn)換完之后的回調(diào)函數(shù)
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();
}
//去除標(biāo)志物
if (window.markers !== undefined) {
for(var i = 0; i < window.markers.length; i++) {
var marker = window.markers[i];
marker.remove();
}
}
window.markers = [];
//循環(huán)加上目前點擊區(qū)域的marker
//定位到當(dāng)前區(qū)域
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);
}
}
//給當(dāng)前點擊的對象添加marker
if (window.map.centerAndZoom) {
//循環(huán)加上dian
for (var i = 0; i < showschool.length; i++) {
// 給marker加點擊事件監(jiān)聽
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);
}
}
}
