【高德地图API】如何打造十月妈咪品牌地图?
2012-11-02 16:43
387 查看
摘要:品牌地图除了地图,商铺标点外,还有微博关注,路线查询等功能。
-----------------------------------------------------------------
网站视图:
-----------------------------------------------------------------
一、首先获取店铺的信息
一般品牌点会提供地址,店铺名,电话,图片等信息。
这里,我们需要把地址转换成经纬度信息。
有两种办法,一是手工在地图上点,点到合适的位置,保存该点经纬度,保存下来。
第二种办法是,通过地址解析,得到一个经纬度。
这里采用的是第二个办法。
全部代码如下:(请自行展开代码,或点击工具:http://www.ui-love.net/uiweb/octmami/getPoint.htm)
点击展开代码
二、在地图上标注店铺,并添加信息窗口。
地图部分没做太复杂,就是地图的展示,和信息窗口的添加并展示。
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
相关文章推荐
- 【高德地图API】如何打造十月妈咪品牌地图?
- 【高德地图API】如何打造十月妈咪品牌地图?
- 【高德地图API】如何打造十月妈咪品牌地图?
- 如何打造企业自己的品牌天下?
- 站长如何打造个人品牌
- 程序员的个人品牌,该如何打造?
- 如何打造专属自媒体品牌
- 程序员如何打造个人品牌
- 如何利用百度霸屏技术打造个人品牌
- 【高德地图API】如何制作自己的旅游地图?
- 如何低成本打造品牌Android软件
- 知识地图:打造专业品牌与丰富人文沟通
- 【高德地图API】如何制作自己的旅游地图?
- 如何快速打造强势品牌?
- 喜茶 51% 拷贝指南:如何打造一个流行的品牌?
- 如何低成本打造品牌Android软件?
- 企业如何实现高效打造品牌?
- 【高德地图API】如何制作自己的旅游地图?
- 如何靠网络快速打造品牌
- 如何打造属于自己的个人品牌