书店的前端网页
网页内容是西西弗书店
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>书店主题</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
<meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<style type="text/css">
body{ background-color: #B45B3E; }
h2{ color: white; font-family: "黑体","宋体"; }
h3{ color: white; }
h4{ color: white; }
.iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
.iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
.logo{ color: #4b5cc4; font-size: 80px;}
#myCarousel .carousel-inner > .item > img { display: block; width:100%; height:650px; }
.carousel-control.left {
background-image:none;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
left: auto; right: 0;
background-image:none;
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.nav { border: 0; margin-bottom: 0; border-radius: 0; }
.nav li a:hover { background-color: #FF7500; }
.navbar-brand:hover { background-color: #FF7500;}
.navbar li a:visited { background-color: #FFA400; }
.panel-heading { background-color: #FF7500; }
.panel:hover { box-shadow: 5px 0px 40px rgba(0,0,0, .2); }
.panel {
border: 0px solid #f4511e;
border-radius:0;
transition: box-shadow 0.5s;
}
.panel-heading {
color: #fff !important;
background-color: #f4511e !important;
border-bottom: 1px solid transparent;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.panel-footer {
background-color: #fff !important;
}
#vtab { background-color: #FFA631; }
#mytab { background-color: #ff8c31; }
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>
<body>
<!--导航栏-->
<ul class="nav nav-justified" id="daohang" style="border:0px;">
<li class="navbar-brand"><img src="img/shudian.jpg" style="width: 30px;height: 30px;"></img></li>
<li><a href="#shouye"><h3>首页</h3></a></li>
<li><a href="#aboutme"><h3>关于我们</h3></a></li>
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<h3>销售书籍</h3><span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: #FFA400;">
<li><a href="#book"><h4>教育</h4></a></li>
<li><a href="#book"><h4>小说</h4></a></li>
<li><a href="#book"><h4>文艺</h4></a></li>
<li><a href="#book"><h4>动漫</h4></a></li>
<li><a href="#book"><h4>童书</h4></a></li>
<li><a href="#book"><h4>人文社科</h4></a></li>
<li><a href="#book"><h4>自然科学</h4></a></li>
</ul>
</li>
<li><a href="#fazhan"><h3>发展版图</h3></a></li>
<li><a href="#wenhua"><h3>文化沙龙</h3></a></li>
<li><a href="#kaidian"><h3>开店&商务</h3></a></li>
<li><a href="#zhaopin"><h3>招聘</h3></a></li>
<li><a href="#guanzhu"><h3>关注我们</h3></a></li>
</ul>
<!--轮播图-->
<div class="container-fluid text-left" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 730px; position: relative;">
<h2 id="shouye">首页</h2>
<!--轮播区域-->
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="2000">
<!--轮播指标-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" ></li>
<li data-target="#myCarousel" data-slide-to="2" ></li>
<li data-target="#myCarousel" data-slide-to="3" ></li>
</ol>
<!--轮播指标-->
<!--轮播项目-->
<div class="carousel-inner" style="height: 650px;">
<div class="item active" >
<img src="img/00.jpg" alt="First slide" >
<div class="carousel-caption">书店</div>
</div>
<div class="item">
<img src="img/01.jpg" alt="First slide" >
<div class="carousel-caption">书店</div>
</div>
<div class="item">
<img src="img/02.jpg" alt="First slide" >
<div class="carousel-caption">书店</div>
</div>
<div class="item">
<img src="img/03.jpg" alt="First slide" >
<div class="carousel-caption">书店</div>
</div>
</div>
<!--轮播控制器-->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
<!--轮播控制器-->
</div>
</div>
<!--搜索注册栏-->
<div class="container-fluid">
<nav class="navbar-form navbar-center" role="Search">
<div class="col-lg-4"></div> <!--空白区域-->
<div class="col-lg-6">
<div class="input-group" id="sousuo">
<input type="text" class="form-control " placeholder="Search" onkeydown="onKeyDown(event)" style="width: 500px;">
<span class="input-group-addon btn-lg"><a href="#"><i class="glyphicon glyphicon-search"><span>搜索</span></i></a></span>
</div>
</div>
<div class="col-lg-2">
<button type="submit" class="btn-info btn-sm" data-toggle="tooltip" data-placement="left" title="Sign in">登录</button>
<button type="button" class="btn-danger btn-sm" data-toggle="tooltip" data-placement="top" title="Cancellation">注销</button>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-toggle="tooltip" data-placement="right" title="Register">注册</button>
<!--注册的模态框-->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color: black;">注册</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="container">
<label>手机号</label>
<input type="text" class="form-control" placeholder="请输入您的手机号" />
</div><br />
<div class="container">
<label>姓名</label>
<input type="text" class="form-control" placeholder="请输入您的姓名" />
</div><br />
<div class="container">
<label>邮箱</label>
<div class="input-group">
<input class="text" class="form-control" style="width: 100px;" placeholder="请输入您的邮箱" />
<span class="input-group-addon">@qq.com</span>
</div>
</div><br />
<div class="container">
<label>性别</label>
<label class="radio-inline"><input type="radio" />男 </label>
<label class="radio-inline"><input type="radio" />女 </label>
</div><br />
</div>
</div><!--body部分-->
<div class="modal-footer">
<button class="btn btn-primary">提交</button>
<button class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!--注册的模态框-->
</div>
</nav>
<!--搜索注册条-->
</div>
<!--关于我们-->
<div class="container-fluid text-left" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 450px; position: relative;">
<h2 id="aboutme">关于我们</h2>
<p><h3>参与构成本地精神生活，引导推动大众精品阅读。书店至信阅读有益人类，认为未来社会的持续进步与文明的提升，阅读扮演着
不可或缺的角色，因此致力于大众阅读的推广。秉承“参与构成本地精神生活”的价值理念、坚持“引导大众精品阅读”的经营理念，
西西弗书店竭力创造、努力成为城市阅读的推动者，助益人们生活事业的成长。</h3></p>
<!---->
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4" >
<a href="#" class="thumbnail" style="background-color: #B45B3E; border: 0px;"><img src="img/11.jpg" class="img-rounded" style="height: 300px;" /></a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<a href="#" class="thumbnail" style="background-color: #B45B3E; border: 0px;"><img src="img/12.jpg" class="img-rounded" style="height: 300px;" /></a>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<a href="#" class="thumbnail" style="background-color: #B45B3E; border: 0px;"><img src="img/13.jpg" class="img-rounded" style="height: 300px;" /></a>
</div>
</div>
<!---->
</div>
<!--销售书籍-->
<div id="pricing" class="container-fluid" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 450px; position: relative;">
<div class="text-center">
<h2 id="book">销售书籍</h2>
</div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading" style="padding: 20px;">
<h1>书籍种类</h1>
</div>
<div class="panel-body">
<p><strong>教育</strong></p>
<p><strong>小说</strong></p>
<p><strong>文艺</strong></p>
<p><strong>动漫</strong></p>
<p><strong>童书</strong></p>
<p><strong>人文社科</strong></p>
<p><strong>自然科学</strong></p>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default text-center">
<div class="panel-heading" style="padding: 20px;">
<h1>所占百分比</h1>
</div>
<div class="panel-body">
<p><strong>20</strong>%</p>
<p><strong>10</strong>%</p>
<p><strong>10</strong>%</p>
<p><strong>5</strong>%</p>
<p><strong>5</strong>%</p>
<p><strong>10</strong>%</p>
<p><strong>20</strong>%</p>
</div>
</div>
</div>
<div class="col-sm-2"></div>
</div>
</div>
<!--发展版图-->
<div class="container-fluid text-left" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 700px; position: relative;">
<h2 id="fazhan">发展版图</h2>
<p><h3>目前旗下有西西弗书店、矢量咖啡、不二生活文创、七十二阅听课儿童阅读体验空间、推石文化等子品牌。
书店细分出标准线（黑标/绿标/红标）、主题线、定制线三大店型产品线，分别匹配不同城市商业体定位
截至2018年10月，目前已发展为在全国近60个城市拥有160余家图书零售店、160余家意式咖啡馆、超过350万活跃会员的连锁文化企业，
连锁店辐射北京、上海、深圳、重庆、成都、贵阳、南宁、杭州、嘉兴、南京、宁波、南通、苏州、温州、无锡、徐州、郑州、赣州、泸州、
福州、厦门、武汉、长沙、沈阳、哈尔滨、大连、广州、昆明、海口、济南、青岛、日照、威海、淄博、凯里、西安、洛阳、银川、石家庄、
太原、莆田、芜湖、西宁等城市。<strong>下面的百度地图显示需要有网络！！！</strong></h3></p>
<div class="container">
<!--北方门店面板-->
<div class="panel-group col-lg-2">
<div class="panel panel-default col-lg-12" id="leftpanell">
<div class="panel-heading col-lg-12">
<h4 class="panel-title col-lg-12">
<a data-toggle="collapse" data-parent="leftpanell" href="#leftpanelcontent">北方门店</a>
</h4>
</div>
<div id="leftpanelcontent" class="panel-collapse collapse col-lg-12">
<div class="panel-body">北京门店</div>
<div class="panel-body">徐州门店</div>
<div class="panel-body">泸州门店</div>
<div class="panel-body">沈阳门店</div>
<div class="panel-body">西安门店</div>
<div class="panel-body">大连门店</div>
<div class="panel-body">青岛门店</div>
<div class="panel-body">洛阳门店</div>
</div>
</div>
</div>
<!--面板-->
<div class="col-lg-8">
<!--百度地图容器-->
<div style="height:450px;border:#ccc solid 1px;" id="dituContent"></div>
</div>
<!--南方门店面板-->
<div class="panel-group col-lg-2">
<div class="panel panel-default col-lg-12" id="rightpanell">
<div class="panel-heading col-lg-12">
<h4 class="panel-title col-lg-12">
<a data-toggle="collapse" data-parent="rightpanell" href="#rightpanelcontent">南方门店</a>
</h4>
</div>
<div id="rightpanelcontent" class="panel-collapse collapse col-lg-12">
<div class="panel-body">上海门店</div>
<div class="panel-body">深圳门店</div>
<div class="panel-body">成都门店</div>
<div class="panel-body">南宁门店</div>
<div class="panel-body">杭州门店</div>
<div class="panel-body">嘉兴门店</div>
<div class="panel-body">南京门店</div>
<div class="panel-body">宁波门店</div>
</div>
</div>
</div>
<!--面板-->
</div>
</div>
<!--文化沙龙-->
<div class="container-fluid text-left" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="background-color: white; height: 250px; position: relative;">
<h2 id="wenhua" style="color: #FF7500;">文化沙龙</h2>
<div class="row text-center">
<div class="col-lg-4">
<span class="glyphicon glyphicon-headphones logo"></span>
<h2 style="color: black;">音乐</h2>
<h4 style="color: black;">在书海间尽享音乐</h4>
</div>
<div class="col-lg-4">
<span class="glyphicon glyphicon-map-marker logo"></span>
<h2 style="color: black;">爱好</h2>
<h4 style="color: black;">在交流中交换心语</h4>
</div>
<div class="col-lg-4">
<span class="glyphicon glyphicon-fire logo"></span>
<h2 style="color: black;">思想</h2>
<h4 style="color: black;">在谈吐间碰撞思维</h4>
</div>
</div>
</div>
<!--开店&商务-->
<div class="container-fluid text-left" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 350px; position: relative;">
<div class="row"><h2 id="kaidian">开店&商务</h2></div>
<div class="row">
<div class="col-lg-2 text-left">
<a href="#" class="thumbnail" style="background-color: #B45B3E; border: 0px;"><img src="img/10.jpg" class="img-rounded" style="height: 250px;" alt="开店&商务"/></a>
</div><!--图片-->
<div class="col-lg-10 text-center">
<h2 style="font-family: comic sans ms;">Business Presentations</h2>
<h4>文化活动合作：周一至周五 工作时间9:00am—18:00pm 致电（023）6531 5386</h4>
<h4>不二生活创意空间合作：将产品简介、图片和联系方式发送至电子邮箱：bookartlife@126.com，工作时间9:00am—18:00pm 致电（023）65323159</h4>
<h4>大宗团购合作：企业商品采购、广告及文化活动冠名招商服务大宗团购合作</h4>
<h4>周一至周五 工作时间9:00am—18:00pm 致电（023）65316297</h4>
</div>
</div>
</div>
<!--招聘-->
<div class="container-fluid text-left" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 250px; position: relative;">
<h2 id="zhaopin">招聘</h2>
<!--左侧竖式tab选项卡-->
<div class="col-lg-8">
<div style="height: 235px;">
<div class="col-xs-2" style="height: 230px;">
<ul class="nav nav-tab vertical-tab" role="tablist" id="vtab" style="font-size: 15px;">
<li role="presentation" class="active">
<a href="#tab1" aria-controls="home" role="tab" data-toggle="tab" >产品总监</a>
</li>
<li role="presentation">
<a href="#tab2" aria-controls="inbox" role="tab" data-toggle="tab">市场总监</a>
</li>
<li role="presentation">
<a href="#tab3" aria-controls="outbox" role="tab" data-toggle="tab">创意策划总监</a>
</li>
<li role="presentation">
<a href="#tab4" aria-controls="inbox1" role="tab" data-toggle="tab">店长</a>
</li>
<li role="presentation">
<a href="#tab5" aria-controls="outbox1" role="tab" data-toggle="tab">图书专员</a>
</li>
<li role="presentation">
<a href="#tab6" aria-controls="outbox1" role="tab" data-toggle="tab">咖啡师</a>
</li>
</ul>
</div>
<div class="tab-content vertical-tab-content col-xs-10" id="mytab" style="height: 240px;">
<div role="tabpanel" class="tab-pane active" id="tab1">
<h4>1、5年以上相关行业产品管理经验，对文创市场有一定的熟识度及敏感性；</h4>
<h4>2、本科及以上学历，市场营销、工商管理等相关专业；</h4>
<h4>3、具备较强的组织能力、管理能力、计划与执行能力；</h4>
<h4>4、具有较强的责任心、事业心和对公司的忠诚度，具有良好的敬业精神和职业道德操守。</h4>
</div>
<div role="tabpanel" class="tab-pane" id="tab2">
<h4>1、5年市场营销管理工作经验，对文创市场有一定的熟识度及敏感性；</h4>
<h4>2、本科及以上学历，市场营销、工商管理等相关专业；</h4>
<h4>3、具备敏锐的市场眼光，系统的营销思维和品牌理念，熟悉掌握企业文化、营销知识、成本控制、团队管理知识；</h4>
<h4>4、较强的营销创新、策划、计划、组织、执行以及沟通协调能力、团队管理能力和良好的职业操守；</h4>
</div>
<div role="tabpanel" class="tab-pane" id="tab3">
<h4>1.年龄27-35岁； </h4>
<h4>2.有五年以上品牌策划、活动创意经验，三年以上同岗工作经验。</h4>
</div>
<div role="tabpanel" class="tab-pane" id="tab4">
<h4>1、担任零售店面经理，负责店内所有日常事务；</h4>
<h4>2、负责完成店面销售指标，保证财产安全，监控相关数据；</h4>
<h4>3、负责店面团队建设，维持团队良性运作与成长提升；</h4>
<h4>4、负责店面商品、空间、营销活动、公共关系、文化活动等的管理工作。</h4>
</div>
<div role="tabpanel" class="tab-pane" id="tab5">
<h4>1.20-28岁，大专及以上学历；</h4>
<h4>2.吃苦耐劳，能适应零售业倒班工作制；</h4>
<h4>3.热爱图书，服务意识强，有良好的团队精神；</h4>
<h4>4.普通话流利，有较强的学习能力及沟通应变能力。</h4>
</div>
<div role="tabpanel" class="tab-pane" id="tab6">
<h4>1. 20-28岁，大专以上学历，特别优秀者可适当降低要求，可接收应届毕业生；</h4>
<h4>2. 热爱咖啡事业，有志于在咖啡行业及服务行业长期发展，有无咖啡行业经验均可；</h4>
<h4>3. 身体健康，形象良好，开朗乐观，抗压能力强；</h4>
<h4>4. 有较强的主动学习意识、自我提升意识、沟通应变能力及良好的团队协作精神；</h4>
<h4>5. 能适应服务行业倒班制。</h4>
</div>
</div>
</div>
</div>
<!--图片-->
<div class="col-lg-4">
<a href="#" class="thumbnail" style="background-color: #B45B3E; border: 0px;"><img src="img/7.png" class="img-rounded"/></a>
</div>
</div>
<!--关注我们-->
<div class="container-fluid text-left" data-spy="scroll" data-target="#navbar-example" data-offset="0" style="height: 600px; position: relative;">
<h2 id="guanzhu">关注我们</h2>
<div class="row" style="height: 460px;">
<!--二维码，我的微信、支付宝收钱二维码，欢迎打钱！！！-->
<div class="col-lg-4 text-center">
<div class="col-lg-6">
<a href="#guanzhu" class="thumbnail" style="background-color: #FF7500; border: 0px;"><img src="img/weixin.jpg" alt="微信公众号" /><h4>书店微信公众号</h4></a>
</div>
<div class="col-lg-6">
<a href="#guanzhu" class="thumbnail" style="background-color: #FF7500; border: 0px;"><img src="img/alipay.jpg" alt="服务号" /><h4>书店服务号</h4></a>
</div>
</div>
<div class="col-lg-8">
<a href="#guanzhu"><h4>@西西弗书店-华北地区：北京 天津 青岛 济南 石家庄 淄博 威海 日照 太原 烟台</h4></a>
<a href="#guanzhu"><h4>@西西弗书店-西南地区：贵阳 重庆 成都 昆明 遵义 都匀 安顺 凯里 泸州 六盘水</h4></a>
<a href="#guanzhu"><h4>@西西弗书店-华南地区：深圳 广州 南宁 厦门 福州 海口 佛山 莆田 柳州</h4></a>
<a href="#guanzhu"><h4>@西西弗书店-华东地区：杭州 上海 南京 合肥 苏州 无锡 温州 宁波 嘉兴 徐州 南通 扬州 芜湖 常州 常熟 潍坊</h4></a>
<a href="#guanzhu"><h4>@西西弗书店-东北地区：沈阳 哈尔滨 长春 大连</h4></a>
<a href="#guanzhu"><h4>@西西弗书店-华中地区：武汉 长沙 赣州 郑州 南昌 洛阳</h4></a>
<a href="#guanzhu"><h4>@西西弗书店-西北地区：西安 银川 西宁</h4></a>
</div>
</div>
</div>
<!--网页尾部-->
<div class="container-fluid" style="height: 210px; position: relative; background-color: white;">
<div class="col-lg-4 col-sm-4">
<a href="#" class="thumbnail" style="border: 0px;"><img src="img/52.jpg" class="img-rounded" style="height: 200px;" /></a>
</div>
<div class="col-lg-4 col-sm-4 text-center" >
<address>
<strong><h2 style="color:#FF7500">江西师范大学紫阳大道99号</h2></strong><br />
<addr title="Phone"><h3 style="color:#FF7500">P:</addr>201626705110</h3>
</address>
<address>
<h3 style="color:#FF7500"><strong>Wuyou</strong><br />
<a href="1124875789@qq.com">1124875789@qq.com</a></h3>
</address>
</div>
<div class="col-lg-4 col-sm-4">
<a href="#" class="thumbnail" style="border: 0px;"><img src="img/51.jpg" class="img-rounded" style="height: 200px;" /></a>
</div>
</div>
<script type="text/javascript">
$(function(){$("[data-toggle='tooltip']").tooltip(); });
function onKeyDown(event){
var e = event || window.event || arguments.callee.caller.arguments[0];
if(e && e.keyCode==27){ // 按 Esc
//要做的事情
alert("你按下了Esc");
}
if(e && e.keyCode==113){ // 按 F2
//要做的事情
alert("你按下了F2");
}
if(e && e.keyCode==13){ // enter 键
alert("此处回车触发搜索事件");
}
}
$(document).ready(function(){
$("#btn1").click(function(){
$("#myModal").modal();
});
});
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
addMapControl();//向地图添加控件
addMarker();//向地图中添加marker
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
var point = new BMap.Point(121.561546,29.876743);//定义一个中心点坐标
map.centerAndZoom(point,17);//设定地图的中心点和坐标并将地图显示在地图容器中
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent(){
map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
map.enableScrollWheelZoom();//启用地图滚轮放大缩小
map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
map.enableKeyboard();//启用键盘上下左右键移动地图
}
//地图控件添加函数：
function addMapControl(){
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
map.addControl(ctrl_nav);
//向地图中添加缩略图控件
var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
map.addControl(ctrl_ove);
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
map.addControl(ctrl_sca);
}
//标注点数组
var markerArr = [{title:"北京门店",content:"我的备注",point:"116.359565|39.947237",isOpen:0,icon:{w:23,h:25,l:0,t:21,x:9,lb:12}}
,{title:"上海门店",content:"我的备注",point:"121.478789|31.250392",isOpen:0,icon:{w:23,h:25,l:0,t:21,x:9,lb:12}}
,{title:"深圳门店",content:"我的备注",point:"114.060732|22.539625",isOpen:0,icon:{w:23,h:25,l:0,t:21,x:9,lb:12}}
,{title:"成都门店",content:"我的备注",point:"104.083487|30.660192",isOpen:0,icon:{w:23,h:25,l:0,t:21,x:9,lb:12}}
,{title:"贵阳门店",content:"我的备注",point:"106.71559|26.584241",isOpen:0,icon:{w:23,h:25,l:0,t:21,x:9,lb:12}}
,{title:"南宁门店",content:"我的备注",point:"108.398416|22.819126",isOpen:0,icon:{w:23,h:25,l:0,t:21,x:9,lb:12}}
,{title:"杭州门店",content:"我的备注",point:"120.172169|30.249716",isOpen:0,icon:{w:23,h:25,l:0,t:21,x:9,lb:12}}
,{title:"嘉兴门店",content:"我的备注",point:"120.724524|30.758052",isOpen:0,icon:{w:23,h:25,l:0,t:21,x:9,lb:12}}
,{title:"南京门店",content:"我的备注",point:"118.771043|31.985241",isOpen:0,icon:{w:23,h:25,l:0,t:21,x:9,lb:12}}
,{title:"宁波门店",content:"我的备注",point:"121.56089|29.876978",isOpen:0,icon:{w:23,h:25,l:0,t:21,x:9,lb:12}}
];
//创建marker
function addMarker(){
for(var i=0;i<markerArr.length;i++){
var json = markerArr[i];
var p0 = json.point.split("|")[0];
var p1 = json.point.split("|")[1];
var point = new BMap.Point(p0,p1);
var iconImg = createIcon(json.icon);
var marker = new BMap.Marker(point,{icon:iconImg});
var iw = createInfoWindow(i);
var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
marker.setLabel(label);
map.addOverlay(marker);
label.setStyle({
borderColor:"#808080",
color:"#333",
cursor:"pointer"
});
(function(){
var index = i;
var _iw = createInfoWindow(i);
var _marker = marker;
_marker.addEventListener("click",function(){
this.openInfoWindow(_iw);
});
_iw.addEventListener("open",function(){
_marker.getLabel().hide();
})
_iw.addEventListener("close",function(){
_marker.getLabel().show();
})
label.addEventListener("click",function(){
_marker.openInfoWindow(_iw);
})
if(!!json.isOpen){
label.hide();
_marker.openInfoWindow(_iw);
}
})()
}
}
//创建InfoWindow
function createInfoWindow(i){
var json = markerArr[i];
var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
return iw;
}
//创建一个Icon
function createIcon(json){
var icon = new BMap.Icon("http://map.baidu.com/image/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
return icon;
}
initMap();//创建和初始化地图
</script>
</body>
</html>
效果图：
