今天帮北京基督教两会做了个地图页面,可以根据地图查询公交,能将地址发送手机,本来是想将所有的北京市教堂都加载上的,发现效果不理想,就让用户点击加载了.
使用百度地图要知道一个工具,百度的拾取坐标系统
http://api.map.baidu.com/lbsapi/getpoint/index.html
效果演示
地图案例
<div id="allmap" style="overflow: hidden; zoom: 1; position: relative;">
<div id="map" style="height: 100%; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;"> </div>
<div id="showPanelBtn" style="position: absolute; font-size: 14px; top: 50%; margin-top: -95px; right: 0px; width: 20px; padding: 10px 10px; color: #999; cursor: pointer; text-align: center; height: 170px; background: rgba(255,255,255,0.9); -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; font-family: '微软雅黑'; font-weight: bold;">显示检索结果面板 <br /><</div>
<div id="panelWrap" style="width: 0px; position: absolute; top: 0px; right: 0px; height: 100%; overflow: auto; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;">
<div style="width: 20px; height: 200px; margin: -100px 0 0 -10px; color: #999; position: absolute; opacity: 0.5; top: 50%; left: 50%;">此处用于展示结果面板</div>
<div id="panel" style="position: absolute;"> </div>
</div>
</div>
<div id="dqlist"><!--
地图使用说明:
1) 默认加载的是北京市两会的地址
2) 手动点击右侧的菜单,可以定位到对应的教堂
添加地址说明:
1)按照<div id="dqlist"><ul><li></li></ul></div>中复制一个li中的内容
2)修改<input type="button" id="lh" onclick="addMaker(this.id)" value="北京市基督教两会"/>中的id和value值为新添加的教会,比如:北京市基督教海淀堂,id可以随便改,只要在页面中唯一即可
<input type="button" id="hd" onclick="addMaker(this.id)" value="北京市基督教海淀堂"/>
坐标,地址和电话,都是该id加上对应的后缀
3)
修改对应的地图坐标,并将id改为hdpoi,坐标的id都是以poi结尾的,xy的坐标是以-符号链接的
<input type="hidden" id="hdpoi" value="116.314237-39.989271"/>
修改对应的地址,并将id改为hdcontent,地址都是以content结尾
<input type="hidden" id="hdcontent" value="北京市海淀区彩和坊路9号"/>
修改对应的电话号码,并将id改为hdtel,电话的id都是以tel结尾的
<input type="hidden" id="hdtel" value="010-62572902"/>
-->
<ul>
<li><input id="lh" type="button" value="北京市基督教两会" /> <input id="lhpoi" type="hidden" value="116.424014-39.920451" /> <input id="lhcontent" type="hidden" value="北京市东城区东单北大街21号" /> <input id="lhtel" type="hidden" value="010-65255086" /></li>
<li><input id="zy" type="button" value="北京市基督教朝阳堂" /> <input id="zypoi" type="hidden" value="116.498286-39.959092" /> <input id="zycontent" type="hidden" value="北京市朝阳区东四环北路东风桥东风南路60号" /> <input id="zytel" type="hidden" value="010-63340655" /></li>
<li><input id="cw" type="button" value="北京基督教崇文堂" /> <input id="cwpoi" type="hidden" value="116.42701-39.909123" /> <input id="cwcontent" type="hidden" value="北京市东城区崇文门内后沟胡同丁2号" /> <input id="cwtel" type="hidden" value="010-65133549" /></li>
<li><input id="hd" type="button" value="北京市基督教海淀堂" /> <input id="hdpoi" type="hidden" value="116.314237-39.989271" /> <input id="hdcontent" type="hidden" value="北京市海淀区彩和坊路9号" /> <input id="hdtel" type="hidden" value="010-62572902" /></li>
</ul>
</div>
