摘要:品牌地图除了地图,商铺标点外,还有微博关注,路线查询等功能。
-----------------------------------------------------------------
网站视图:
-----------------------------------------------------------------
一、首先获取店铺的信息
一般品牌点会提供地址,店铺名,电话,图片等信息。
这里,我们需要把地址转换成经纬度信息。
有两种办法,一是手工在地图上点,点到合适的位置,保存该点经纬度,保存下来。
第二种办法是,通过地址解析,得到一个经纬度。
这里采用的是第二个办法。
全部代码如下:(请自行展开代码,或点击工具:http://www.ui-love.net/uiweb/octmami/getPoint.htm)
点击展开代码
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--<style> body{ margin:0; padding:0;font:12px/16px Verdana, Helvetica, Arial, sans-serif;} </style>--> <link rel="stylesheet" href="/Public/Css/demo.Default.css" type="text/css" /> <title>地理解析(地址匹配)</title> <script language="javascript" src="http://api.amap.com/webapi/init?v=1.1"></script> <script language="javascript"> var mapObj,toolbar,overview,scale; function mapInit() { var opt = { level:13,//设置地图缩放级别 center:new AMap.LngLat(116.412352,39.953173),//设置地图中心点 doubleClickZoom:true,//双击放大地图 scrollWheel:true//鼠标滚轮缩放地图 } mapObj = new AMap.Map("iCenter",opt); mapObj.plugin(["AMap.ToolBar","AMap.OverView","AMap.Scale"],function() { toolbar = new AMap.ToolBar(); toolbar.autoPosition=false; //加载工具条 mapObj.addControl(toolbar); overview = new AMap.OverView(); //加载鹰眼 mapObj.addControl(overview); scale = new AMap.Scale(); //加载比例尺 mapObj.addControl(scale); }); } function geocodeSearch(){ var addressName = document.getElementById(‘address‘).value; if(addressName== ""){ alert("请输入地址!"); return; }else{ var GeocoderOption = { range:300,//范围 crossnum:2,//道路交叉口数 roadnum :3,//路线记录数 poinum:2//POI点数 }; var geo = new AMap.Geocoder(GeocoderOption); geo.geocode(addressName,addressToGeoSearch_CallBack); } } function addressToGeoSearch_CallBack(data){ var resultStr=""; if(data.status =="E0") { for (var i = 0; i < 1; i++) { resultStr += "<span class=\"spoi\"><a href=\"javascript:var s=mapObj.setCenter(new AMap.LngLat(‘"+ data.list[i].x +"‘,‘"+ data.list[i].y +"‘));\">"+data.list[i].name+"</a></span>"; var windowsArr = new Array(); var markerOption = { icon:"http://api.amap.com/webapi/static/Images/"+(i+1)+".png", position:new AMap.LngLat(data.list[i].x,data.list[i].y) }; //输出经纬度 document.getElementById(‘myPt‘).innerHTML += data.list[i].x + ‘,‘ + data.list[i].y + ‘<br />‘; var mar =new AMap.Marker(markerOption); mar.id=(i+1); var infoWindow = new AMap.InfoWindow ({ content:data.list[i].name, size:new AMap.Size(150,0), offset:{x:-25,y:-62} }); windowsArr.push(infoWindow); mapObj.addOverlays(mar); var aa=function(e){infoWindow.open(mapObj,mar.getPosition());}; mapObj.bind(mar,"click",aa); } mapObj.setFitView(); } else if(data.status =="E1") { resultStr = "未查找到任何结果!<br />建议:<br />1.请确保所有字词拼写正确。<br />2.尝试不同的关键字。<br />3.尝试更宽泛的关键字。"; } else { resultStr= "错误信息:"+data.state+"请对照API Server v2.0.0 简明提示码对照表查找错误类型"; } document.getElementById("result").innerHTML = resultStr; } </script> </head> <body onload="mapInit();"> <table width="661px" border="0" cellpadding="0" cellspacing="0"> <tr> <td><div id="iCenter" style="height:300px;width:661px"> </div></td> </tr> <tr> <td> <div>地理解析(地址匹配)<b>地址:</b><input type="text" id="address" name="address" value="北京市海淀区苏州街" /> <input type="button" value="查询" onclick="geocodeSearch()" /></div> </td> </tr> <tr> <td> <div id="myPt"></div> </td> </tr> <tr><td><div style="padding:0px 0 4px 2px; background-color:#D1EEEE"><b>搜索结果:</b></div></td></tr> <tr> <td><div id="result" name="result" style="overflow:auto;margin-top:5px"> </div></td> </tr> </table> </body> </html>
二、在地图上标注店铺,并添加信息窗口。
地图部分没做太复杂,就是地图的展示,和信息窗口的添加并展示。
js部分代码如下:
var mapObj,tool,view,scale; function mapInit(){ var opt = { level:12, center:new AMap.LngLat(116.412352,39.953173) } mapObj = new AMap.Map("imap",opt); mapObj.plugin(["AMap.ToolBar","AMap.OverView,AMap.Scale"],function(){ //加载工具条,工具条包括方向键盘、缩放标尺和自动定位控制 tool = new AMap.ToolBar({ direction:false, ruler:false //autoPosition:false//禁止自动定位 }); mapObj.addControl(tool); //加载鹰眼 view = new AMap.OverView({visible:false}); mapObj.addControl(view); //加载比例尺 scale = new AMap.Scale(); mapObj.addControl(scale); }); infoWin1 = new AMap.InfoWindow({ content:"<h4>北京庄胜崇光</h4><p>地址:宣武门外大街10号</p><p>电话:(010)63103388</p>" }); infoWin2 = new AMap.InfoWindow({ content:"<h4>北京翠微大厦 <img src=‘new.gif‘ /></h4><p>地址: 海淀区花园路2号翠微大厦牡丹园店1楼(近地铁牡丹园站) </p><p>电话: (010)62053045, (010)68213897</p>" }); infoWin3 = new AMap.InfoWindow({ content:"<h4>北京当代商城</h4><p>地址: 海淀区中关村大街40号当代商城(人民大学对面)</p><p>电话: (010)62696415</p>" }); infoWin4 = new AMap.InfoWindow({ content:"<h4>北京新世界百货</h4><p>地址:崇文区崇文门外大街3-5号(地铁崇文门站南50米)</p><p>电话: (010)67080055</p>" }); infoWin5 = new AMap.InfoWindow({ content:"<h4>安贞门华联</h4><p>地址: 朝阳区安贞里5区4号楼</p><p>电话: (010)64436880</p>" }); infoWin6 = new AMap.InfoWindow({ content:"<h4>亚运村华堂店</h4><p>地址: 朝阳区北四环东路108号千鹤家园(北苑家园大牌匾旁) </p><p>电话: (010)64910099</p>" }); infoWin7 = new AMap.InfoWindow({ content:"<h4>新街口物美</h4><p>地址: 西城区赵登禹路2号(近新开胡同) </p><p></p>" }); infoWin8 = new AMap.InfoWindow({ content:"<h4>西单商场十里堡店</h4><p>地址: 朝阳区朝阳路十里堡甲3号</p><p>电话: (010)65564090</p>" }); infoWin9 = new AMap.InfoWindow({ content:"<h4>复兴门百盛</h4><p>地址: 复兴门内大街101号</p><p>电话: (010)66536688</p>" }); infoWin10 = new AMap.InfoWindow({ content:"<h4>北京金源新燕莎</h4><p>地址: 北京市海淀区远大路1号金源购物广场西南角6层(E21电梯直达) </p><p>电话: (010)88866663</p>" }); } //实体店标注 function openWin1(){ infoWin1.open(mapObj,new AMap.LngLat(116.375719,39.895653)); } function openWin2(){ infoWin2.open(mapObj,new AMap.LngLat(116.366504,39.977461)); } function openWin3(){ infoWin3.open(mapObj,new AMap.LngLat(116.321107,39.970540)); } function openWin4(){ infoWin4.open(mapObj,new AMap.LngLat(116.417986,39.898618)); } function openWin5(){ infoWin5.open(mapObj,new AMap.LngLat(116.405750,39.971530)); } function openWin6(){ infoWin6.open(mapObj,new AMap.LngLat(116.419615,39.987982)); } function openWin7(){ infoWin7.open(mapObj,new AMap.LngLat(116.368850,39.940376)); } function openWin8(){ infoWin8.open(mapObj,new AMap.LngLat(116.501696,39.915053)); } function openWin9(){ infoWin9.open(mapObj,new AMap.LngLat(116.358111,39.907966)); } function openWin10(){ infoWin10.open(mapObj,new AMap.LngLat(116.288848,39.958694)); }
三、添加微博
添加微博关注的方法,请参考新浪微博开放平台:http://open.weibo.com/widget/followbutton.php
关注按钮代码:
<html xmlns:wb=“http://open.weibo.com/wb”> <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script> <wb:follow-button uid="2187637905" type="gray_1" width="67" height="24" ></wb:follow-button>
四、网站整体框架
左侧大部分是地图,右侧是实体店的列表。
全部html代码:
<!DOCTYPE HTML> <html> <head> <title>十月妈咪北京实体店</title> <link href="oct.css" rel="stylesheet" type="text/css" /> <script language="javascript" src="http://api.amap.com/webapi/init?v=1.1"></script> <script language="javascript" type="text/javascript" src="oct.js"></script> <html xmlns:wb=“http://open.weibo.com/wb”> <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script> </head> <body onload="mapInit();"> <div class="header clearfix"><h1><a href="http://www.octmami.com" target="_blank"><img src="logo.gif" /></a>十月妈咪北京实体店</h1></div> <div class="container clearfix"> <div class="wider" id="imap"></div> <div class="sider"> <div class="mainshops"> <ul> <li> <div class="mainshop clearfix"> <img class="shopimg" src="shop1.jpg" /> <h4><a href="javascript:void(0);" onmouseover="openWin1();">北京庄胜崇光</a></h4> <p>全场八折</p> </div> </li> <li> <div class="mainshop clearfix"> <img class="shopimg" src="shop2.jpg" /> <h4><a href="javascript:void(0);" onmouseover="openWin2();">北京翠微大厦 <img src="new.gif" /></a></h4> <p>2012.11.14.- 18. 周年店庆 满200减100 85折上折</p> </div> </li> <li> <div class="mainshop clearfix"> <img class="shopimg" src="shop3.jpg" /> <h4><a href="javascript:void(0);" onmouseover="openWin3();">北京当代商城</a></h4> <p>部分满300减150</p> </div> </li> <li> <div class="mainshop clearfix"> <img class="shopimg" src="shop4.jpg" /> <h4><a href="javascript:void(0);" onmouseover="openWin4();">北京新世界百货</a></h4> <p>无优惠活动</p> </div> </li> </ul> </div> <div class="othershops"> <ul> <li> <div class="othershop clearfix"> <h4><a href="javascript:void(0);" onmouseover="openWin5();">安贞门华联</a></h4> <p>部分五折起</p> </div> </li> <li> <div class="othershop clearfix"> <h4><a href="javascript:void(0);" onmouseover="openWin6();">亚运村华堂店</a></h4> <p>无优惠</p> </div> </li> <li> <div class="othershop clearfix"> <h4><a href="javascript:void(0);" onmouseover="openWin7();">新街口物美</a></h4> <p>无优惠</p> </div> </li> <li> <div class="othershop clearfix"> <h4><a href="javascript:void(0);" onmouseover="openWin8();">西单商场十里堡店</a></h4> <p>全场九折</p> </div> </li> <li> <div class="othershop clearfix"> <h4><a href="javascript:void(0);" onmouseover="openWin9();">复兴门百盛</a></h4> <p>部分五折起</p> </div> </li> <li> <div class="othershop clearfix"> <h4><a href="javascript:void(0);" onmouseover="openWin10();">北京金源新燕莎</a></h4> <p>无优惠</p> </div> </li> </ul> </div> <div class="copyright"> <p>copyright by <a target="_blank" href="http://ui-love.net">UI-LOVE</a></p> <p> </p> <wb:follow-button uid="2187637905" type="gray_1" width="67" height="24" ></wb:follow-button> </div> </div> </div> </body> </html>
五、运行示例
示例地址:http://www.ui-love.net/uiweb/octmami/index.htm
最后……
来来来,投个票:http://2012.amap.com/Watch/Detailed/471