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

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

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

网站视图：

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

一、首先获取店铺的信息

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

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

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

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

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

全部代码如下：（请自行展开代码，或点击工具：http://www.ui-love.net/uiweb/octmami/getPoint.htm）

点击展开代码

  1.     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <!--<style>
  6. body{ margin:0; padding:0;font:12px/16px Verdana, Helvetica, Arial, sans-serif;}
  7. </style>-->
  8. <link rel="stylesheet" href="/Public/Css/demo.Default.css" type="text/css" />
  9.     <title>地理解析（地址匹配）</title>
  10.     <script language="javascript" src="http://api.amap.com/webapi/init?v=1.1"></script>
  11.     <script language="javascript">  
  12.  
  13.     var mapObj,toolbar,overview,scale;
  14.     function mapInit()
  15.     {
  16.         var opt = {
  17.           level:13,//设置地图缩放级别
  18.           center:new AMap.LngLat(116.412352,39.953173),//设置地图中心点
  19.           doubleClickZoom:true,//双击放大地图
  20.           scrollWheel:true//鼠标滚轮缩放地图
  21.         }
  22.         mapObj = new AMap.Map("iCenter",opt);
  23.         mapObj.plugin(["AMap.ToolBar","AMap.OverView","AMap.Scale"],function()
  24.         {
  25.           toolbar = new AMap.ToolBar();
  26.         toolbar.autoPosition=false; //加载工具条
  27.           mapObj.addControl(toolbar);
  28.           overview = new AMap.OverView(); //加载鹰眼
  29.           mapObj.addControl(overview);
  30.           scale = new AMap.Scale(); //加载比例尺
  31.           mapObj.addControl(scale);
  32.         });
  33.     }
  34.     function geocodeSearch(){
  35.         var addressName = document.getElementById('address').value;
  36.         if(addressName== ""){
  37.             alert("请输入地址！");
  38.             return;
  39.         }else{
  40.             var GeocoderOption = {
  41.             range:300,//范围
  42.             crossnum:2,//道路交叉口数
  43.             roadnum :3,//路线记录数
  44.             poinum:2//POI点数
  45.             };
  46.         var geo = new AMap.Geocoder(GeocoderOption);
  47.             geo.geocode(addressName,addressToGeoSearch_CallBack);
  48.           }
  49.     }  
  50.  
  51.     function addressToGeoSearch_CallBack(data){
  52.         var resultStr="";
  53.         if(data.status =="E0")
  54.         {
  55.                 for (var i = 0; i < 1; i++) {
  56.                     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>";
  57.                     var windowsArr = new Array();
  58.                     var markerOption = {
  59.                     icon:"http://api.amap.com/webapi/static/Images/"+(i+1)+".png",
  60.                     position:new AMap.LngLat(data.list[i].x,data.list[i].y)
  61.                     };
  62.                     //输出经纬度
  63.                     document.getElementById('myPt').innerHTML += data.list[i].x + ',' + data.list[i].y + '<br />';
  64.                     var mar =new AMap.Marker(markerOption);
  65.                     mar.id=(i+1);
  66.                     var infoWindow = new AMap.InfoWindow
  67.                     ({
  68.                     content:data.list[i].name,
  69.                     size:new AMap.Size(150,0),
  70.                     offset:{x:-25,y:-62}
  71.                     });
  72.                     windowsArr.push(infoWindow);
  73.                     mapObj.addOverlays(mar);
  74.                     var aa=function(e){infoWindow.open(mapObj,mar.getPosition());};
  75.                     mapObj.bind(mar,"click",aa);
  76.                 }
  77.                 mapObj.setFitView();
  78.         }
  79.         else if(data.status =="E1")
  80.         {
  81.              resultStr = "未查找到任何结果!<br />建议：<br />1.请确保所有字词拼写正确。<br />2.尝试不同的关键字。<br />3.尝试更宽泛的关键字。";
  82.         }
  83.         else
  84.         {
  85.              resultStr= "错误信息："+data.state+"请对照API Server v2.0.0 简明提示码对照表查找错误类型";
  86.         }
  87.         document.getElementById("result").innerHTML = resultStr;
  88.     }
  89.     </script>
  90.     </head>
  91.     <body onload="mapInit();">
  92.     <table width="661px"  border="0" cellpadding="0" cellspacing="0">
  93.         <tr>
  94.             <td><div id="iCenter" style="height:300px;width:661px"> </div></td>
  95.             </tr>
  96.         <tr> <td>
  97.             <div>地理解析（地址匹配）<b>地址：</b><input type="text" id="address" name="address" value="北京市海淀区苏州街" /> <input type="button" value="查询" onclick="geocodeSearch()" /></div>
  98.            </td>
  99.        </tr>
  100.        <tr>
  101.        <td>
  102.         <div id="myPt"></div>
  103.        </td>
  104.        </tr>
  105.          <tr><td><div style="padding:0px 0 4px 2px; background-color:#D1EEEE"><b>搜索结果:</b></div></td></tr>
  106.        <tr> <td><div id="result" name="result" style="overflow:auto;margin-top:5px"> </div></td> </tr>
  107.     </table>
  108.     </body>
  109.     </html>

二、在地图上标注店铺，并添加信息窗口。

地图部分没做太复杂，就是地图的展示，和信息窗口的添加并展示。

js部分代码如下：

  1. var mapObj,tool,view,scale;
  2. function mapInit(){
  3.     var opt = {
  4.         level:12,
  5.         center:new AMap.LngLat(116.412352,39.953173)
  6.     }
  7.     mapObj = new AMap.Map("imap",opt);
  8.     mapObj.plugin(["AMap.ToolBar","AMap.OverView,AMap.Scale"],function(){
  9.         //加载工具条，工具条包括方向键盘、缩放标尺和自动定位控制
  10.         tool = new AMap.ToolBar({
  11.             direction:false,
  12.             ruler:false
  13.             //autoPosition:false//禁止自动定位
  14.         });
  15.         mapObj.addControl(tool);
  16.         //加载鹰眼
  17.         view = new AMap.OverView({visible:false});
  18.         mapObj.addControl(view);
  19.         //加载比例尺
  20.         scale = new AMap.Scale();
  21.         mapObj.addControl(scale);
  22.     });
  23.  
  24.     infoWin1 = new AMap.InfoWindow({
  25.         content:"<h4>北京庄胜崇光</h4><p>地址：宣武门外大街10号</p><p>电话：(010)63103388</p>"
  26.     });
  27.     infoWin2 = new AMap.InfoWindow({
  28.         content:"<h4>北京翠微大厦&nbsp;<img src='new.gif' /></h4><p>地址：     海淀区花园路2号翠微大厦牡丹园店1楼(近地铁牡丹园站) </p><p>电话：     (010)62053045, (010)68213897</p>"
  29.     });
  30.     infoWin3 = new AMap.InfoWindow({
  31.         content:"<h4>北京当代商城</h4><p>地址：     海淀区中关村大街40号当代商城(人民大学对面)</p><p>电话：     (010)62696415</p>"
  32.     });
  33.     infoWin4 = new AMap.InfoWindow({
  34.         content:"<h4>北京新世界百货</h4><p>地址：崇文区崇文门外大街3-5号(地铁崇文门站南50米)</p><p>电话：     (010)67080055</p>"
  35.     });
  36.     infoWin5 = new AMap.InfoWindow({
  37.         content:"<h4>安贞门华联</h4><p>地址：     朝阳区安贞里5区4号楼</p><p>电话：     (010)64436880</p>"
  38.     });
  39.     infoWin6 = new AMap.InfoWindow({
  40.         content:"<h4>亚运村华堂店</h4><p>地址：     朝阳区北四环东路108号千鹤家园(北苑家园大牌匾旁) </p><p>电话：     (010)64910099</p>"
  41.     });
  42.     infoWin7 = new AMap.InfoWindow({
  43.         content:"<h4>新街口物美</h4><p>地址：     西城区赵登禹路2号(近新开胡同) </p><p></p>"
  44.     });
  45.     infoWin8 = new AMap.InfoWindow({
  46.         content:"<h4>西单商场十里堡店</h4><p>地址：     朝阳区朝阳路十里堡甲3号</p><p>电话：     (010)65564090</p>"
  47.     });
  48.     infoWin9 = new AMap.InfoWindow({
  49.         content:"<h4>复兴门百盛</h4><p>地址：     复兴门内大街101号</p><p>电话：     (010)66536688</p>"
  50.     });
  51.     infoWin10 = new AMap.InfoWindow({
  52.         content:"<h4>北京金源新燕莎</h4><p>地址：     北京市海淀区远大路1号金源购物广场西南角6层(E21电梯直达) </p><p>电话：     (010)88866663</p>"
  53.     });
  54. }
  55.  
  56. //实体店标注
  57. function openWin1(){
  58.     infoWin1.open(mapObj,new AMap.LngLat(116.375719,39.895653));
  59. }
  60. function openWin2(){
  61.     infoWin2.open(mapObj,new AMap.LngLat(116.366504,39.977461));
  62. }
  63. function openWin3(){
  64.     infoWin3.open(mapObj,new AMap.LngLat(116.321107,39.970540));
  65. }
  66. function openWin4(){
  67.     infoWin4.open(mapObj,new AMap.LngLat(116.417986,39.898618));
  68. }
  69. function openWin5(){
  70.     infoWin5.open(mapObj,new AMap.LngLat(116.405750,39.971530));
  71. }
  72. function openWin6(){
  73.     infoWin6.open(mapObj,new AMap.LngLat(116.419615,39.987982));
  74. }
  75. function openWin7(){
  76.     infoWin7.open(mapObj,new AMap.LngLat(116.368850,39.940376));
  77. }
  78. function openWin8(){
  79.     infoWin8.open(mapObj,new AMap.LngLat(116.501696,39.915053));
  80. }
  81. function openWin9(){
  82.     infoWin9.open(mapObj,new AMap.LngLat(116.358111,39.907966));
  83. }
  84. function openWin10(){
  85.     infoWin10.open(mapObj,new AMap.LngLat(116.288848,39.958694));
  86. }

三、添加微博

添加微博关注的方法，请参考新浪微博开放平台：http://open.weibo.com/widget/followbutton.php

关注按钮代码：

  1. <html xmlns:wb=“http://open.weibo.com/wb”>
  2. <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
  3. <wb:follow-button uid="2187637905" type="gray_1" width="67" height="24" ></wb:follow-button>

四、网站整体框架

左侧大部分是地图，右侧是实体店的列表。

全部html代码：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>十月妈咪北京实体店</title>
  5. <link href="oct.css" rel="stylesheet" type="text/css" />
  6. <script language="javascript" src="http://api.amap.com/webapi/init?v=1.1"></script>
  7. <script language="javascript" type="text/javascript" src="oct.js"></script>
  8. <html xmlns:wb=“http://open.weibo.com/wb”>
  9. <script src="http://tjs.sjs.sinajs.cn/open/api/js/wb.js" type="text/javascript" charset="utf-8"></script>
  10. </head>
  11. <body onload="mapInit();">
  12. <div class="header clearfix"><h1><a href="http://www.octmami.com" target="_blank"><img src="logo.gif" /></a>十月妈咪北京实体店</h1></div>
  13. <div class="container clearfix">
  14.     <div class="wider" id="imap"></div>
  15.     <div class="sider">
  16.         <div class="mainshops">
  17.             <ul>
  18.                 <li>
  19.                     <div class="mainshop clearfix">
  20.                         <img class="shopimg" src="shop1.jpg" />
  21.                         <h4><a href="javascript:void(0);" onmouseover="openWin1();">北京庄胜崇光</a></h4>
  22.                         <p>全场八折</p>
  23.                     </div>
  24.                 </li>
  25.                 <li>
  26.                     <div class="mainshop clearfix">
  27.                         <img class="shopimg" src="shop2.jpg" />
  28.                         <h4><a href="javascript:void(0);" onmouseover="openWin2();">北京翠微大厦&nbsp;<img src="new.gif" /></a></h4>
  29.                         <p>2012.11.14.- 18. 周年店庆 满200减100 85折上折</p>
  30.                     </div>
  31.                 </li>
  32.                 <li>
  33.                     <div class="mainshop clearfix">
  34.                         <img class="shopimg" src="shop3.jpg" />
  35.                         <h4><a href="javascript:void(0);" onmouseover="openWin3();">北京当代商城</a></h4>
  36.                         <p>部分满300减150</p>
  37.                     </div>
  38.                 </li>
  39.                 <li>
  40.                     <div class="mainshop clearfix">
  41.                         <img class="shopimg" src="shop4.jpg" />
  42.                         <h4><a href="javascript:void(0);" onmouseover="openWin4();">北京新世界百货</a></h4>
  43.                         <p>无优惠活动</p>
  44.                     </div>
  45.                 </li>
  46.             </ul>
  47.         </div>
  48.         <div class="othershops">
  49.             <ul>
  50.                 <li>
  51.                     <div class="othershop clearfix">
  52.                         <h4><a href="javascript:void(0);" onmouseover="openWin5();">安贞门华联</a></h4>
  53.                         <p>部分五折起</p>
  54.                     </div>
  55.                 </li>
  56.                 <li>
  57.                     <div class="othershop clearfix">
  58.                         <h4><a href="javascript:void(0);" onmouseover="openWin6();">亚运村华堂店</a></h4>
  59.                         <p>无优惠</p>
  60.                     </div>
  61.                 </li>
  62.                 <li>
  63.                     <div class="othershop clearfix">
  64.                         <h4><a href="javascript:void(0);" onmouseover="openWin7();">新街口物美</a></h4>
  65.                         <p>无优惠</p>
  66.                     </div>
  67.                 </li>
  68.                 <li>
  69.                     <div class="othershop clearfix">
  70.                         <h4><a href="javascript:void(0);" onmouseover="openWin8();">西单商场十里堡店</a></h4>
  71.                         <p>全场九折</p>
  72.                     </div>
  73.                 </li>
  74.                 <li>
  75.                     <div class="othershop clearfix">
  76.                         <h4><a href="javascript:void(0);" onmouseover="openWin9();">复兴门百盛</a></h4>
  77.                         <p>部分五折起</p>
  78.                     </div>
  79.                 </li>
  80.                 <li>
  81.                     <div class="othershop clearfix">
  82.                         <h4><a href="javascript:void(0);" onmouseover="openWin10();">北京金源新燕莎</a></h4>
  83.                         <p>无优惠</p>
  84.                     </div>
  85.                 </li>
  86.             </ul>
  87.         </div>
  88.         <div class="copyright">
  89.             <p>copyright by <a target="_blank" href="http://ui-love.net">UI-LOVE</a></p>
  90.             <p>&nbsp;</p>
  91.             <wb:follow-button uid="2187637905" type="gray_1" width="67" height="24" ></wb:follow-button>
  92.         </div>
  93.     </div>
  94. </div>
  95. </body>
  96. </html>

五、运行示例

示例地址：http://www.ui-love.net/uiweb/octmami/index.htm

最后……

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

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

  1. 【高德地图API】汇润做爱地图技术大揭秘

    原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...

  2. 【百度地图API】如何制作商圈地图？行政地图？

    原文:[百度地图API]如何制作商圈地图?行政地图? 摘要: 想要显示某一个区域,并且鼠标放上去,该区域就会变色.这时,你就需要巧用多边形覆盖物,和它的鼠标事件了! 快来看看去哪儿网的实例吧:http ...

  3. 百度地图API详解之自定义地图类型

    http://blog.csdn.net/sup_heaven/article/details/8461586 今天的文章主要介绍如何利用地图API实现自定义地图. 百度地图API目前默认支持两种地图 ...

  4. android菜鸟学习笔记31----Android使用百度地图API(二)获取地理位置及地图控制器的简单使用

    1.获取当前地理位置: Android中提供了一个LocationManager的类,用于管理地理位置.不能通过构造函数获取该类的实例,而是通过Context的getSystemService(): ...

  5. 通过百度地图API定位--第三方开源--百度地图（一）

    1.把百度地图定位API(下载地址:http://lbsyun.baidu.com/sdk/download?selected=location)里面的libs复制到自己的项目libs里面 2.进行相 ...

  6. 通过百度地图API显示当前位置在地图上（图标显示）--第三方开源--百度地图（二）

    1.下载百度地图的demo,下载地址:http://lbsyun.baidu.com/sdk/download?selected=mapsdk_basicmap,mapsdk_searchfuncti ...

  7. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

  8. 哪个地图API 好用

    之前我们能用的地图软件还寥寥无几,而且一个地图包动辄就上百M,还不支持GPS,没有实时路况,没有卫星图,一年也未必更新一次.现如今的地图功能已经极大丰富了,开发者的项目选择性也很大,地图哪个受众比较多 ...

  9. 百度地图API位置偏移的校准算法

    转自极客人原文 百度地图API位置偏移的校准算法 在开始使用百度地图API进行开发时可能会遇到一件相当奇怪的事情,使用百度定位的经纬度在地图上显示相当不准确,这一问题我在微信开发和安卓开始时都遇到过. ...

随机推荐

  1. ArcSDE SDK For Java二次开发介绍、演示样例

    在一个工作中,遇到了须要java后台来查询ArcGIS 中用到的Oracle数据库空间数据,因为对ArcGIS空间数据首次接触,仅仅知道Oracle能够使用ST_GEOMETRY字段存储,例如以下图 ...

  2. c++内存泄漏处理（积累）

    写c++程序时,常常会出现内存泄漏的问题,这里从网上找了一种非常麻烦的方法:假设想找到每一个cpp文件的内存泄漏,都必须在每一个cpp加上例如以下代码: #include <crtdbg.h&g ...

  3. BigPipe设计原理

    高性能页面加载技术--BigPipe设计原理及Java简单实现 1.技术背景 动态web网站的历史可以追溯到万维网初期,相比于静态网站,动态网站提供了强大的可交互功能．经过几十年的发展,动态网站在互动 ...

  4. Flex入门(三)——微架构之Cairngorm

    大家都知道我们在开发后台的时候,都会使用MVC,三层等分层架构,使后台代码达到职责更为分明单一,高内聚低耦合,比如,Dao层仅仅是进行和数据库打交道,负责处理数据:Service(B层)仅仅是进行逻辑 ...

  5. 阿里2015在线研发project师笔试题（部分）

    今天lz去阿里的在线笔试打了一把酱油,因为lz的水平有限,时间太他么紧张了.以下把记下来的题给大家分享一下.选择题总共20道,前十题截了图,后面感觉太费时就没有再截了,凭记忆记下了两道.附加题都记录下 ...

  6. SQL Server高可用——日志传送（4-1）——概论

    原文:SQL Server高可用--日志传送(4-1)--概论 本文作为学习总结,部分内容出自联机丛书及其他书籍 日志传送是什么? SQLServer 2012之前(2012出现了AlwaysOn), ...

  7. HDU 1176 免费馅饼(DP)

    职务地址:HDU 1176 以时间为横轴.11个点位纵轴构造一个矩阵.然后利用数字三角形的方法从上往下递推下去. 代码例如以下: #include <iostream> #include ...

  8. SQL Server中TempDB管理（版本存储区的一个example）

    原文:SQL Server中TempDB管理(版本存储区的一个example) 原文来自: http://blogs.msdn.com/b/sqlserverstorageengine/archive ...

  9. C代码分析器（一个 公开赛冠军）

    最近心血来潮,我希望能写一个通用的代码分析工具(其实这个词有点太.事实上为C代码).看到这几天我看到代码头晕眼花,尽管Source Insight救命,仍然没有足够的智慧思考很多地方. 如今主要遇到的 ...

  10. socket-详细分析No buffer space available（转）

    新年上班第一天,突然遇到一个socket连接No buffer space available的问题,导致接口大面积调用(webservice,httpclient)失败的问题,重启服务器后又恢复了正 ...