【高德地图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

时间： 2024-12-21 19:33:12

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

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

原文:[高德地图API]汇润做爱地图技术大揭秘昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以标记做爱地点与详情的地图.这不就是中国版的I just made love麽? 滑到屏幕底下,看了看阅读量,哇塞,居然有4万3!!!说明实在是有很多人关注做爱地图啊.本着研究地图的心情(绝对不是为了什么价值300的智能情趣用品!),我也就点击了[阅读原文]-- 好吧,为了证明我真的不是为了奖品,我会

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

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

百度地图api调用-c++调用百度地图调试错误如何处理

问题描述 c++调用百度地图调试错误如何处理 vsc++调用百度地图 Api的程序为何调试时没有地图出现只有界面出来解决方案先看看你的百度API返回值什么,是否返回有用的信息解决方案二: 没有返回任何信息只有一个空白界面解决方案三: appkey信息是否正确,检查一下

在Android应用中使用百度地图api

本篇通过一个简单的示例一步步介绍如何在Android应用中使用百度地图api. 1)下载百度地图移动版 API(Android)开发包要在Android应用中使用百度地图API,就需要在工程中引用百度地图API开发包,这个开发包包含两个文件:baidumapapi.jar和libBMapApiEngine.so.下载地址: http://dev.baidu.com/wiki/static/imap/files/BaiduMapApi_Lib_Android_1.0.zip 2)申请API K

百度地图API使用方法详解_php实例

最近做了个项目,其中项目中有个需求需要用到百度地图进行导航,通过查阅相关资料参考百度地图api完成了一个例子. 示例一: API地址:http://developer.baidu.com/map/jsdemo.htm <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &l

高德地图PC版国内首发室内地图

近日,高德地图PC版上线了室内地图功能,以往商场.交通枢纽等在地图上仅显示轮廓的地点,现在也能显示详细的室内信息了.使用此功能,用户不仅能够清晰地看到商场内的平面地图,快速找到各商铺或候车室.登机口的位置,还能够通过楼层选择器,在各楼层之间自由切换. 实际上,室内地图早已经是互联网巨头眼中的下一个风口.从Google 2011年推出室内导航服务,到苹果2013年收购室内导航服务WifiSLAM,再到如今高德全面上线室内地图服务,这种室内地图作为"解决地图导航最后一公里"的超级入口,其商

Android中使用百度地图API：公交换乘方案搜索

这是我写的第3篇介绍调用百度地图API搜索服务的文章,所以对搜索前要做的其它工作不再介绍,再加上代码中的注释也对相关的操作.方法做了尽可能详细的说明,所以直接看示例吧. 1)布局文件 res/layout/main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/andro

Android中使用百度地图API：MyLocationOverlay

本篇文章主要讲解Baidu Map API中MyLocationOverlay的使用.故名思义,MyLocation中文释义为"我的位置",而Overlay则是"图层"或"覆盖物"的意思,MyLocationOverlay的作用正是用于在地图上标注自己所处的位置.它跟使用ItemizedOverlay非常相似,只不过MyLocationOverlay标记的只有一个点. 在地图上标记用户当前所处位置其实是一个GPS定位应用.首先通过GPS定位

C# Web百度地图api定位问题

问题描述 C# Web百度地图api定位问题 5C 在VS2010中开发web,现在已经能成功调用百度地图api显示在网页上,我现在想做读取数据库的经纬度信息,然后定位在地图上(PS:会读数据库,只是不知道怎么把)经度10640.194657,前三位是度,后面都是分:纬度2625.669082,前两位是度,后面都是分. 解决方案百度地图API的定位问题利用百度地图API实现WEB定位解决方案二: 前台取数据,然后addmarker