阿哥论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 615|回复: 0

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

[复制链接]

升级  22.67%

IT初级专家

Rank: 3Rank: 3

积分
268
 楼主| 发表于 2013-1-6 06:54:53 | 显示全部楼层 |阅读模式
<div id="cnblogs_post_body">摘要:品牌地图除了地图,商铺标点外,还有微博关注,路线查询等功能。
-----------------------------------------------------------------
网站视图:

-----------------------------------------------------------------
一、首先获取店铺的信息
一般品牌点会提供地址,店铺名,电话,图片等信息。
这里,我们需要把地址转换成经纬度信息。
有两种办法,一是手工在地图上点,点到合适的位置,保存该点经纬度,保存下来。
第二种办法是,通过地址解析,得到一个经纬度。
这里采用的是第二个办法。
全部代码如下:(请自行展开代码,或点击工具:http://www.ui-love.net/uiweb/octmami/getPoint.htm
<div class="cnblogs_code" >点击展开代码<div id="cnblogs_code_open_69c533aa-3f6b-40e4-aaa1-ec34b9ef26f3" class="cnblogs_code_hide">    <!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.x +"','"+ data.list.y +"'));\">"+data.list.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.x,data.list.y)                      };                                //输出经纬度                    document.getElementById('myPt').innerHTML += data.list.x + ',' + data.list.y + '<br />';                    var mar =new AMap.Marker(markerOption);                      mar.id=(i+1);                      var infoWindow = new AMap.InfoWindow                      ({                      content:data.list.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>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表