最近由於項目中需要制作一個地圖，用來選擇活動地點，我就花了兩天利用高德地圖的javascriptAPI自制了一個地圖的demo。在這了記錄一下我學習的過程。
一、進入高德地圖官網，再找到高德地圖的開放平台，我是做前端的，所以使用的是javascriptAPI。
地圖的功能很多，使用API可以自己定制自己想要的功能。在使用前需要自己申請一個Key，引入API的時候會用到這個key。
二、詳細看一下左邊的那一列各個里面的內容，看完了基本就知道怎么回事了，它提供的javascriptAPI其實就是一個接口，調用它的相應的接口就可以得到自己需要的數據。至於怎么調用接口，里面都講的很清楚。
三、我覺得最有用，上手最快的位置還是那個實例中心，里面有很多不同的例子。基本能滿足各種簡單需求，我把其中的三個綜合了一下，就實現了我想要的基本功能。下面是完整的代碼頁面，復制下來保存為html就可以看到我的那個效果了。（代碼后面有張截圖，可以看下效果）
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>輸入提示后查詢</title> <style type="text/css"> /************************* Just Reset Browser Default CSS : BEGIN ***************************/ html { background-color: #fff; } body, div, h1, h2, h3, h4, ul, li, form, input, dl, dt, dd, p { margin: 0; padding: 0; font-family: "微軟雅黑"; } h3 { + font-size : 14 px; _font-size: 14px; } img { border: none; } .c { clear: both; } ul, ol, li { list-style: none; } /*清除浮動*/ .clearfix:after { content: "."; visibility: hidden; display: block; height: 0; overflow: hidden; clear: both; } /* no ie mac \*/ * html .clearfix { height: 1%; } /* end */ * + html .clearfix { height: 1%; } body { font: 12px / 1.5em 微軟雅黑, Arial, Verdana, Helvetica, sans-serif; color: #333; } button, input, select, textarea { color: #999; } input[type="button"] { padding: 0 5px; color: #333; } .demo_box { float: left; width: 620px; height: 500px; } /* map style */ #iCenter { float: left; width: 650px; height: 500px; margin-left: 5px; margin-right: 10px; border: 1px solid #F6F6F6; } #r_title { line-height: 28px; padding-left: 5px; background-color: #D1EEEE; font-weight: bold; } #result { overflow: auto; margin-bottom: 5px; /* width:661px; height: 255px;*/ } /* 結果項 */ #result .sub_result { font-size: 12px; cursor: pointer; line-height: 20px; /*padding:0px 0 4px 2px;*/ border-bottom: 1px solid #C1FFC1; } #result .sub_result .detail { } #result .sub_result .detail h3 { color: #00A6AC; } a { color: #067EC0; text-decoration: none; } a:hover { text-decoration: underline; } .note { color: #999; } /*** layerout stylesheet ***/ /* 修改背景URL */ div.change { background-image: url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker-h.png); } div.change div { background-image: url(http://pages.haozu.ajkcdn.com/20110909/img/map/marker-h-l.gif); } /*** copied from demo #39 添加自定義點覆蓋物 ***/ /* 定義自定義點樣式 */ .markerContentStyle { position: relative; } .markerContentStyle span { background-color: #FFFFFF; color: #FF1493; width: 120px; heigth: 80px; border: 2px solid #D8BFD8; FONT-FAMILY: 華文行楷; position: absolute; top: -10px; left: 25px; white-space: nowrap -webkit-border-radius : 5 px; border-radius: 5px; } /*** copied from demo #43 添加自定義信息窗體 ***/ /* 定義自定義信息窗體樣式 */ div.info { position: relative; z-index: 100; border: 1px solid #BCBCBC; box-shadow: 0 0 10px #B7B6B6; border-radius: 8px; background-color: rgba(255, 255, 255, 0.9); transition-duration: 0.25s; } div.info:hover { box-shadow: 0px 0px 15px #0CF; } div.info-top { position: relative; background: none repeat scroll 0 0 #F9F9F9; border-bottom: 1px solid #CCC; border-radius: 5px 5px 0 0; } div.info-top div { display: inline-block; color: #333333; font-size: 14px; font-weight: bold; line-height: 31px; padding: 0 10px; } div.info-top img { position: absolute; top: 10px; right: 10px; transition-duration: 0.25s; } div.info-top img:hover { box-shadow: 0px 0px 5px #000; } div.info-middle { font-size: 12px; padding: 10px; line-height: 21px; } div.info-bottom { height: 0px; width: 100%; clear: both; text-align: center; } div.info-bottom img { position: relative; z-index: 104; } input.inputTextStyle{ width: 400px; height: 24px; font-size: 16px; margin: 5px; padding: 2px; display:inline; } input.btn{ color: #000000; height: 30px; font-size: 16px; margin: 5px; padding: 2px; display:inline; } b.b_text{ font-size: 16px; margin: 5px 0px 5px 10px; _padding-bottom:2px; _margin-left: 20px; _margin-bottom: 10px; *padding-bottom:2px; *margin-bottom: 10px; display:inline; *width:1; width: auto; overflow: auto; *overflow:visible; zoom:1; } /*** -------------------------***/ </style> </head> <body> <div> <b class="b_text">活動地點：</b> <input id="aim" class="inputTextStyle" type="text"/> <input class="btn" type="button" value="在地圖上選擇" onclick="showMap();"/> </div> <div id="mapBg" style="position: absolute;display: none;"> <div id="iCenter"></div> <div class="demo_box"> <div> <b class="b_text">請輸入搜索關鍵字：</b> <input id="keyword" onkeyup="keydown();" class="inputTextStyle" type="text"/> <div id="result1" name="result1" style="overflow: auto; width: 95%; border: 1px solid gray;display: none;"></div> </div> <div id="r_title"><b>查詢結果:</b></div> <div id="result"></div> </div> </div> <script language="javascript" src="http://webapi.amap.com/maps?v=1.3&key=608d75903d29ad471362f8c58c550daf"></script> <script language="javascript"> var mapObj; //地圖對象 var lnglatXY; //當前對象坐標 var aimAddress; //當前對象地址 var geocoderMarker = undefined; //逆編碼跟隨鼠標移動視圖 var searchMarker = []; //搜索結果信息標記 var windowsArr = []; //搜索結果地圖信息 var addressArr = []; //搜索結果地址集合 function showMap(){ //顯示地圖 var self = this; var mapEle = document.getElementById("mapBg"); mapEle.style.display = "block"; self.mapInit(); } function makeSure(){ //點擊確認 var self = this; var aim = document.getElementById("aim"); aim.value = aimAddress || ""; } function mapInit() { //創建地圖並綁定監聽事件 var self = this; mapObj = new AMap.Map("iCenter", { view: new AMap.View2D({ //center:new AMap.LngLat(116.397428,39.90923),//地圖中心點 zoom: 12 //地圖顯示的縮放級別 }) }); var listener = AMap.event.addListener(mapObj, "click", function (e) { mapObj.clearMap(); // 清楚所有覆蓋物 lnglatXY = e.lnglat; var listenMarker = new AMap.Marker({ map: mapObj, position: e.lnglat, icon: "http://webapi.amap.com/images/0.png", offset: new AMap.Pixel(-10, -34) }); mapObj.setCenter(lnglatXY); self.geocoder(); }); } function geocoder() { //通過坐標找到具體地址 var MGeocoder; //加載地理編碼插件 mapObj.plugin(["AMap.Geocoder"], function () { MGeocoder = new AMap.Geocoder({ radius: 1000, extensions: "all" }); //返回地理編碼結果 AMap.event.addListener(MGeocoder, "complete", geocoder_CallBack); //逆地理編碼 MGeocoder.getAddress(lnglatXY); }); //加點 var marker = new AMap.Marker({ map: mapObj, icon: new AMap.Icon({ image: "http://api.amap.com/Public/images/js/mark.png", size: new AMap.Size(58, 30), imageOffset: new AMap.Pixel(-32, -0) }), position: lnglatXY, offset: new AMap.Pixel(-5, -30) }); mapObj.setFitView(); } //鼠標划過顯示相應點 function onMouseOver(e) { var coor = e.split(','); var lnglat = new AMap.LngLat(coor[0], coor[1]); if (!geocoderMarker) { geocoderMarker = new AMap.Marker({ map: mapObj, icon: "http://webapi.amap.com/images/0.png", position: lnglat, offset: new AMap.Pixel(-10, -34) }); } else { geocoderMarker.setPosition(lnglat); } mapObj.setFitView(); } //回調函數 function geocoder_CallBack(data) { geocoderMarker = undefined; var resultStr = ""; var roadinfo = ""; var poiinfo = ""; var address; //返回地址描述 address = data.regeocode.formattedAddress; aimAddress = address; makeSure(); //把當前地址賦值給文本框 //返回周邊道路信息 roadinfo += "<table style='width:600px'>"; for (var i = 0; i < data.regeocode.roads.length; i++) { var color = (i % 2 === 0 ? '#fff' : '#eee'); roadinfo += "<tr style='background-color:" + color + "; margin:0; padding:0;'><td>道路：" + data.regeocode.roads[i].name + "</td><td>方向：" + data.regeocode.roads[i].direction + "</td><td>距離：" + data.regeocode.roads[i].distance + "米</td></tr>"; } roadinfo += "</table>"; //返回周邊興趣點信息 poiinfo += "<table style='width:600px;cursor:pointer;'>"; for (var j = 0; j < data.regeocode.pois.length; j++) { var color = j % 2 === 0 ? '#fff' : '#eee'; poiinfo += "<tr onmouseover='onMouseOver(\"" + data.regeocode.pois[j].location.toString() + "\")' style='background-color:" + color + "; margin:0; padding:0;'><td>興趣點：" + data.regeocode.pois[j].name + "</td><td>類型：" + data.regeocode.pois[j].type + "</td><td>距離：" + data.regeocode.pois[j].distance + "米</td></tr>"; } poiinfo += "</table>"; //返回結果拼接輸出 resultStr = "<div style=\"font-size: 12px;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\">" + "<b>地址</b>：" + address + "<hr/><b>周邊道路信息</b>：<br/>" + roadinfo + "<hr/><b>周邊興趣點信息</b>：<br/>" + poiinfo + "</div>"; document.getElementById("result").innerHTML = resultStr; } //輸入提示 function autoSearch() { var keywords = document.getElementById("keyword").value; var auto; //加載輸入提示插件 mapObj.plugin(["AMap.Autocomplete"], function() { var autoOptions = { city: "" //城市，默認全國 }; auto = new AMap.Autocomplete(autoOptions); //查詢成功時返回查詢結果 if ( keywords.length > 0) { AMap.event.addListener(auto,"complete",autocomplete_CallBack); auto.search(keywords); } else { document.getElementById("result1").style.display = "none"; } }); } //輸出輸入提示結果的回調函數 function autocomplete_CallBack(data) { var resultStr = ""; var tipArr = data.tips; if (tipArr&&tipArr.length>0) { for (var i = 0; i < tipArr.length; i++) { resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1) + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\"" + "data=" + tipArr[i].adcode + ">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>"; } } else { resultStr = " π__π 親,人家找不到結果!<br />要不試試：<br />1.請確保所有字詞拼寫正確<br />2.嘗試不同的關鍵字<br />3.嘗試更寬泛的關鍵字"; } document.getElementById("result1").curSelect = -1; document.getElementById("result1").tipArr = tipArr; document.getElementById("result1").innerHTML = resultStr; document.getElementById("result1").style.display = "block"; } //輸入提示框鼠標滑過時的樣式 function openMarkerTipById(pointid, thiss) { //根據id打開搜索結果點tip thiss.style.background = '#CAE1FF'; } //輸入提示框鼠標移出時的樣式 function onmouseout_MarkerStyle(pointid, thiss) { //鼠標移開后點樣式恢復 thiss.style.background = ""; } //從輸入提示框中選擇關鍵字並查詢 function selectResult(index) { if(index<0){ return; } if (navigator.userAgent.indexOf("MSIE") > 0) { document.getElementById("keyword").onpropertychange = null; document.getElementById("keyword").onfocus = focus_callback; } //截取輸入提示的關鍵字部分 var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g,""); var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data'); document.getElementById("keyword").value = text; document.getElementById("result1").style.display = "none"; //根據選擇的輸入提示關鍵字查詢 mapObj.plugin(["AMap.PlaceSearch"], function() { var msearch = new AMap.PlaceSearch(); //構造地點查詢類 AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查詢成功時的回調函數 msearch.setCity(cityCode); msearch.search(text); //關鍵字查詢查詢 }); } //定位選擇輸入提示關鍵字 function focus_callback() { if (navigator.userAgent.indexOf("MSIE") > 0) { document.getElementById("keyword").onpropertychange = autoSearch; } } //輸出關鍵字查詢結果的回調函數 function placeSearch_CallBack(data) { //清空地圖上的InfoWindow和Marker windowsArr = []; searchMarker = []; addressArr = []; mapObj.clearMap(); var resultStr1 = ""; var poiArr = data.poiList.pois; var resultCount = poiArr.length; for (var i = 0; i < resultCount; i++) { addressArr[i] = poiArr[i].location; resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onclick='autoClickMap(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名稱: " + poiArr[i].name + "</font></h3>"; resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>"; addmarker(i, poiArr[i]); } mapObj.setFitView(); document.getElementById("result").innerHTML = resultStr1; document.getElementById("result").style.display = "block"; } function autoClickMap(pointid, thiss){ mapObj.clearMap(); lnglatXY = addressArr[pointid]; mapObj.setCenter(lnglatXY); geocoder(); } //鼠標滑過查詢結果改變背景樣式，根據id打開信息窗體 function openMarkerTipById1(pointid, thiss) { thiss.style.background = '#CAE1FF'; windowsArr[pointid].open(mapObj, searchMarker[pointid]); } //添加查詢結果的marker&infowindow function addmarker(i, d) { var lngX = d.location.getLng(); var latY = d.location.getLat(); var markerOption = { map:mapObj, icon:"http://webapi.amap.com/images/" + (i + 1) + ".png", position:new AMap.LngLat(lngX, latY) }; var mar = new AMap.Marker(markerOption); searchMarker.push(new AMap.LngLat(lngX, latY)); var infoWindow = new AMap.InfoWindow({ content:"<h3><font color=\"#00a6ac\"> " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel), size:new AMap.Size(300, 0), autoMove:true, offset:new AMap.Pixel(0,-30) }); windowsArr.push(infoWindow); var aa = function (e) {infoWindow.open(mapObj, mar.getPosition());}; AMap.event.addListener(mar, "click", aa); } //infowindow顯示內容 function TipContents(type, address, tel) { //窗體內容 if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") { type = "暫無"; } if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") { address = "暫無"; } if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") { tel = "暫無"; } var str = " 地址：" + address + "<br /> 電話：" + tel + " <br /> 類型：" + type; return str; } function keydown(event){ var key = (event||window.event).keyCode; var result = document.getElementById("result1") var cur = result.curSelect; if(key===40){//down if(cur + 1 < result.childNodes.length){ if(result.childNodes[cur]){ result.childNodes[cur].style.background=''; } result.curSelect=cur+1; result.childNodes[cur+1].style.background='#CAE1FF'; document.getElementById("keyword").value = result.tipArr[cur+1].name; } }else if(key===38){//up if(cur-1>=0){ if(result.childNodes[cur]){ result.childNodes[cur].style.background=''; } result.curSelect=cur-1; result.childNodes[cur-1].style.background='#CAE1FF'; document.getElementById("keyword").value = result.tipArr[cur-1].name; } }else if(key === 13){ var res = document.getElementById("result1"); if(res && res['curSelect'] !== -1){ selectResult(document.getElementById("result1").curSelect); } }else{ autoSearch(); } } </script> </body> </html>
