摘要：很多商家都有自己的實體店，包括KFC啊，麥當勞啊，姐最愛的眉州小吃啊。那麼，商家就會有這樣一個需求：把實體店地址標註在地圖上，並引導客戶駕車或者坐公交去到指定地地址。可是商家一般都不會地圖開發，這可怎麼辦呢？不用擔心，我把代碼都給大家寫好了，鼠標點一點，實體店地圖立馬呈現！本文以姐最愛的AMF海水農場實體店爲例，告訴大家如何在自己的網站上嵌入一個【全國實體店查詢地圖】。
效果圖：
--------------------------------------------------------------
一、數據準備
從官網獲取地址數據：http://www.amfaqua.com/
粘貼到excel裏，並保存爲csv文件。
name,address,tel,pic 河南鶴壁旗艦店,河南省鶴壁市淇濱區鶴煤大道西段建業森林半島,18810067778, 蘇州鄰瑞店,江蘇省蘇州市工業園區鄰瑞廣場三層,18505121300,http://www.amfaqua.com/uploads/allimg/131230/1-131230152K1504.jpg 臨汾鼓樓店,山西省臨汾市堯都區鼓樓廣場步行街,15388570002,http://www.amfaqua.com/uploads/allimg/130904/1-130Z4002334543.jpg 北京三里屯店,北京朝陽區三里屯SOHO三號樓3115,13146542304,http://www.amfaqua.com/uploads/allimg/130916/1-1309161J929643.jpg 北京朝園店,北京朝陽公園西2門朝園市場1165號,010-57900212,http://www.amfaqua.com/uploads/allimg/130826/1-130R6144K0c8.jpg 北京和平里店,北京東城區和平里中街六區6號樓底商-3,010-84211868,http://www.amfaqua.com/uploads/allimg/130626/1-1306261A359553.jpg 北京方恆店,北京市朝陽區望京方恆購物中心一層入口,010-57116389,http://www.amfaqua.com/uploads/allimg/131008/1-13100QI236409.jpg 北京富力城店,北京朝陽區東三環富力廣場購物中心地下一層,13601233181,http://www.amfaqua.com/uploads/allimg/140217/1-14021F93U0254.jpg 北京藍港店,北京市朝陽區藍色港灣國際商區L-K161（M層）,13264336352|18600937784,http://www.amfaqua.com/uploads/allimg/130826/1-130R6134555105.jpg 北京居然店,北京市海淀區西四環世紀金源北樓居然之家一層,13910152440,http://www.amfaqua.com/uploads/allimg/130829/1-130R9162P02T.jpg 北京藍景店,北京市海淀區北三環藍景麗家一層入口,13910152440,http://www.amfaqua.com/uploads/allimg/130829/1-130R9162U4395.jpg 北京歐美匯店,北京海淀區中關村歐美匯購物中心一層,010-56420518,http://www.amfaqua.com/uploads/130410/1-1304101RTa34.jpg 天津綠遊店,天津市濱海新區泰達綠遊天地購物中心215號,13752669203,http://www.amfaqua.com/uploads/allimg/130626/1-1306261F2424P.jpg 北京朝陽大悅城店,北京朝陽區青年路大悅城購物中心三層必勝客對面,010-57187606,http://www.amfaqua.com/uploads/allimg/140217/1-14021GA534M0.jpg 南通中南城店,江蘇省南通市崇川區中南城購物中心4層,13255247999,http://www.amfaqua.com/uploads/allimg/130626/1-1306261H215P1.jpg
打開雲圖，http://yuntu.amap.com/datamanager/
新建地圖，導入數據，點擊預覽。
這時雲圖已經生成了，查看效果：http://yuntu.amap.com/share/iuQzi2
如圖：
二、地圖展示
獲取一個開發者key：http://developer.amap.com/key/
在你的地圖代碼中引用高德JS:
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=【您的key】"></script>
給出一個地圖容器：
<div id="map"></div>
加載您的地圖：
var mapObj;var cloudDataLayer;var cloudSearch;var pBeijing = new AMap.LngLat(116.388474,39.934486);//初始化地圖對象，加載地圖function mapInit(){
mapObj = new AMap.Map("map",{
center: pBeijing, //地圖中心點
level:11 //地圖顯示的比例尺級別 });
myCloudMap();
myCloudList("北京");
}//雲圖加載地圖function myCloudMap(){ //地圖-雲圖層
mapObj.plugin('AMap.CloudDataLayer', function () { var layerOptions = {
query:{keywords: '北京'},
clickable:true
};
cloudDataLayer = new AMap.CloudDataLayer('53956704e4b04192f1f4e43d', layerOptions); //實例化雲圖層類
cloudDataLayer.setMap(mapObj); //疊加雲圖層到地圖
AMap.event.addListener(cloudDataLayer, 'click', function (result) { var clouddata = result.data; //雲圖麻點
var infoWindow = new AMap.InfoWindow({
content: "<a href='http://mo.amap.com/?q=" + clouddata._location.getLat() + "," + clouddata._location.getLng() + "&name=" + clouddata._name + "'><h3>" + clouddata._name + "</h3></a>" + "<img style=\"width:300px;height:220px;overflow:hidden;\" src='" + clouddata.pic + "' /><p>地址：" + clouddata._address + "</p>" + "<p>電話：" + clouddata.tel + "</p>",
size:new AMap.Size(300, 0),
autoMove:true,
offset:new AMap.Pixel(0,-5)
});
infoWindow.open(mapObj, clouddata._location);
});
});
}
加載列表：
//雲圖加載列表function myCloudList(id){ //列表
mapObj.plugin(["AMap.CloudDataSearch"], function() { //繪製多邊形
var arr = new Array();
arr.push(new AMap.LngLat(75.585938,52.696361));
arr.push(new AMap.LngLat(134.472656,53.956086));
arr.push(new AMap.LngLat(129.726563,16.467695));
arr.push(new AMap.LngLat(81.914063,20.13847));
arr.push(new AMap.LngLat(75.585938,52.696361)); var searchOptions = {
keywords: id,
pageSize:100
};
cloudSearch = new AMap.CloudDataSearch('53956704e4b04192f1f4e43d', searchOptions); //構造雲數據檢索類
AMap.event.addListener(cloudSearch, "complete", cloudSearch_CallBack); //查詢成功時的回調函數
AMap.event.addListener(cloudSearch, "error", errorInfo); //查詢失敗時的回調函數
cloudSearch.searchInPolygon(arr); //多邊形檢索 });
}//回調函數-成功function cloudSearch_CallBack(data) { var resultStr=""; var resultArr = data.datas; var resultNum = resultArr.length; for (var i = 0; i < resultNum; i++) {
resultStr += "<div class=\"item\">";
resultStr += "<a href='http://mo.amap.com/?q=" + resultArr[i]._location.getLat() + "," + resultArr[i]._location.getLng() + "&name=" + resultArr[i]._name + "'><h3>" + (i+1) + "、" + resultArr[i]._name + "</h3></a>";
resultStr += "<p>地址：" + resultArr[i]._address + "</p>";
resultStr += "<p>電話：" + resultArr[i].tel + "</p>";
resultStr += "</div>";
}
document.getElementById("list").innerHTML = resultStr;
}//回調函數-失敗function errorInfo(data) {
resultStr = data.info;
document.getElementById("list").innerHTML = resultStr;
}//清空地圖function clearMap(){
mapObj.clearMap();
document.getElementById("list").innerHTML = '正在讀取數據……';
}
三、城市切換
代碼：
//索引雲圖function getType(iPrivance){ if(iPrivance=="全國"){
mapObj.setZoomAndCenter(4,new AMap.LngLat(114.433594,33.651208));
myCloudList(''); var op={
query:{keywords:""}
};
cloudDataLayer.setOptions(op);
}else{
myCloudList(iPrivance); var op={
query:{keywords:iPrivance}
};
cloudDataLayer.setOptions(op);
placeSearch(iPrivance);
}
}//城市查詢function placeSearch(id) {
var MSearch;
mapObj.plugin(["AMap.PlaceSearch"], function() {
MSearch = new AMap.PlaceSearch({ //構造地點查詢類
pageSize:1,
pageIndex:1,
city:"" //城市 });
AMap.event.addListener(MSearch, "complete", keywordSearch_CallBack);//返回地點查詢結果
MSearch.search(id); //關鍵字查詢 });
}
//城市查詢後定位 function keywordSearch_CallBack(data) {
var iPoint = data.poiList.pois[0].location;
mapObj.setZoomAndCenter(10,iPoint);
}
四、駕車查詢
駕車公交等路線規劃，我們放到高德mobile地圖來做。
只需要一句話，即可連接到高德mobile地圖，來看一個例子：
http://mo.amap.com/?q=31.234527,121.287689&name=海水農場和平里店
來看看類參考：
所以，我們只需要設置一下中心點的經緯度，還有一個顯示的名稱即可。
經緯度的獲取在雲圖檢索的回調函數裏獲得。
resultArr[i]._location.getLat() resultArr[i]._location.getLng()
五、效果圖與源代碼
全部源代碼：
View Code
demo地址：
http://zhaoziang.com/amap/amf_map.html