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

本文轉載自查看原文 2012-10-31 16:35 4836 地圖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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 高德地圖API 十月集訓總結高德地圖JavaScript API開發研究高德地圖 API 顯示跑步路線高德地圖定位JS API 【高德地圖API】如何設置Icon的imageSize？高德地圖API之步行路線高德地圖API之騎行路線高德7java高德開放平台 | 高德地圖API注冊賬號【高德地圖API】如何制作自己的旅游地圖？