【高德地图API】如何打造十月妈咪品牌地图？

来源：互联网发布：linux 多线程 sleep 编辑：程序博客网时间：2024/04/29 03:08

摘要：品牌地图除了地图，商铺标点外，还有微博关注，路线查询等功能。

-----------------------------------------------------------------

网站视图：

-----------------------------------------------------------------

一、首先获取店铺的信息

一般品牌点会提供地址，店铺名，电话，图片等信息。

这里，我们需要把地址转换成经纬度信息。

有两种办法，一是手工在地图上点，点到合适的位置，保存该点经纬度，保存下来。

第二种办法是，通过地址解析，得到一个经纬度。

这里采用的是第二个办法。

全部代码如下：（请自行展开代码，或点击工具：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>北京翠微大厦&nbsp;<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();">北京翠微大厦&nbsp;<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>&nbsp;</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