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

酸奶小妹 · 发表于 2013-1-6 06:54:50

<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" /> <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>

		自动登录	找回密码
密码			立即注册