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

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

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

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

网站视图：

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

一、首先获取店铺的信息

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

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

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

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

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

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

最后……

来来来，投个票：http://2012.amap.com/Watch/Detailed/471

【高德地图API】如何打造十月妈咪品牌地图？的更多相关文章

【高德地图API】汇润做爱地图技术大揭秘
原文:[高德地图API]汇润做爱地图技术大揭秘昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...
【百度地图API】如何制作商圈地图？行政地图？
原文:[百度地图API]如何制作商圈地图?行政地图? 摘要: 想要显示某一个区域,并且鼠标放上去,该区域就会变色.这时,你就需要巧用多边形覆盖物,和它的鼠标事件了! 快来看看去哪儿网的实例吧:http ...
百度地图API详解之自定义地图类型
http://blog.csdn.net/sup_heaven/article/details/8461586 今天的文章主要介绍如何利用地图API实现自定义地图. 百度地图API目前默认支持两种地图 ...
android菜鸟学习笔记31----Android使用百度地图API(二)获取地理位置及地图控制器的简单使用
1.获取当前地理位置: Android中提供了一个LocationManager的类,用于管理地理位置.不能通过构造函数获取该类的实例,而是通过Context的getSystemService(): ...
通过百度地图API定位--第三方开源--百度地图（一）
1.把百度地图定位API(下载地址:http://lbsyun.baidu.com/sdk/download?selected=location)里面的libs复制到自己的项目libs里面 2.进行相 ...
通过百度地图API显示当前位置在地图上（图标显示）--第三方开源--百度地图（二）
1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfuncti ...
百度地图API和高德地图API资料集锦
[高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行 [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...
哪个地图API 好用
之前我们能用的地图软件还寥寥无几,而且一个地图包动辄就上百M,还不支持GPS,没有实时路况,没有卫星图,一年也未必更新一次.现如今的地图功能已经极大丰富了,开发者的项目选择性也很大,地图哪个受众比较多 ...
百度地图API位置偏移的校准算法
转自极客人原文百度地图API位置偏移的校准算法在开始使用百度地图API进行开发时可能会遇到一件相当奇怪的事情,使用百度定位的经纬度在地图上显示相当不准确,这一问题我在微信开发和安卓开始时都遇到过. ...

随机推荐

Ehcache 整合Spring 使用页面、对象缓存（转）
Ehcache在很多项目中都出现过,用法也比较简单.一般的加些配置就可以了,而且Ehcache可以对页面.对象.数据进行缓存,同时支持集群/分布式缓存.如果整合Spring.Hibernate也非常的 ...
SQL Server管理员专用连接的使用
原文:SQL Server管理员专用连接的使用作为一名DBA,经常会处理一些比较棘手的服务无响应问题,鉴于事态的严重性,多数DBA可能直接用“重启”大法,以便尽快的恢复生产环境的正常运转,但是多数情 ...
开源：矿Android新闻client，快、小、支持离线阅读、操作简单、内容丰富，形式多样展示、的信息量、全功能等待（离开码邮箱)
分享:矿Android新闻client.快.小.支持离线阅读.操作简单.内容丰富,形式多样展示.的信息量.全功能等待(离开码邮箱) 历时30天我为了开发这个新闻clientAPP,下面简称觅闻 ht ...
python基础课程_学习笔记26：编程的乐趣
编程的乐趣编程柔术当你坐下来,打算如何组织计划要定时,具体程序,然而,无论什么经验.在实现时间的函数的,你会逐渐学会了原来的设计,实用的新知识.我们不应该忽视沿途汲取的教训,相反,它们用于其他设计 ...
ASP.NET跨平台
ASP.NET跨平台最佳实践前言八年的坚持敌不过领导的固执,最终还是不得不阔别已经成为我第二语言的C#,转战Java阵营.有过短暂的失落和迷茫,但技术转型真的没有想象中那么难.回头审视,其实单从语 ...
在内存中建立 MySQL 的临时目录（转）
MySQL 系统会在内存(MEMORY)和磁盘(MyISAM)中建立临时表,如何能知道在磁盘中建立了多少临时表以及在内存中建立多少临时表呢?你可以通过下面命令获知: ? 1 2 3 4 5 6 7 m ...
Android 儿子Activity在启动过程中的流程组件 && 儿子Activity在一个新的进程组件启动过程
1.儿子Activity在启动过程中的流程组件在Android Activity启动过程http://blog.csdn.net/jltxgcy/article/details/35984557一文 ...
了解webpack
学习笔记一步步了解webpack 前言 demo 地址: https://github.com/yy8597/webpack-demos 之前学习了 broswerify,发现确实很好用.虽然没 ...
js 执行一个字符串类型的函数
两种方法,一种是加括号一种是加叹号,new Function()的方法没有成功. var a = "function(args){console.log(args)}" undef ...
DBA工具——DMV——如何知道TSQL语句已运行了多久
原文:DBA工具--DMV--如何知道TSQL语句已运行了多久 DBA通常想知道正在运行的语句已经执行了多久了?可以使用Sqlserver profiler来捕获语句的开始时间,和现有时间比较,但是在 ...

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

【高德地图API】如何打造十月妈咪品牌地图？的更多相关文章

随机推荐

热门专题