【高德地圖API】如何制作自己的旅游地圖？

發(fā)布時間：2020-07-14 10:07:40 來源：網(wǎng)絡(luò) 閱讀：826 作者：酸奶小妹GIS 欄目：web開發(fā)

“旅行的夢想并不遙遠，只要一顆流浪四方的心?！?/span>——唐人立。

最早認識唐人立的時候，他還是大二的學生。他獨自完成了“南京20年規(guī)劃地圖”。幾年前，他完成了自己的第一本著作，逃學去旅行《一個人走世界——大學4年200城的旅行》。而現(xiàn)在，他正執(zhí)行著他的“辭職去旅行”計劃。他好心的老板還多給他發(fā)了一個月的工資。從南京，到臺灣，從曼谷到斯里蘭卡……2個月來，唐人立走過太多地方。是他原創(chuàng)的圖片和文字，讓我漸漸對自助游產(chǎn)生了興趣，并決定記錄下旅游的每一刻。

于是，我開始著手制作了這個旅行地圖。可能它還不夠完善，但的確它能給我們帶來太多的正能量。希望有越來越多的人，能夠用這種方式，去記錄自己的旅途。THX。

代碼其實很簡單，簡單的地圖展示，簡單的覆蓋物，簡單的信息窗口。

你要做的，其實只是申請一個key：http://yuntu.amap.com/datamanager/index.html

然后將下面的代碼復制到你的網(wǎng)站上，并使用你自己的key。

第一步、地圖展示

中心點坐標可以通過坐標拾取工具來找：http://zhaoziang.com/amap/picpoint.html

地圖級別在國內(nèi)建議12-18，國外建議在4-6.

var mapObj;  
//初始化地圖對象，加載地圖  
function mapInit(){  
    mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(121.498586,31.239637),  
        level:17});   
    addBuildings();  
}

【高德地圖API】如何制作自己的旅游地圖？

第二步、添加覆蓋物

覆蓋物，就是marker，這里用的默認的覆蓋物。藍色的，挺好看。

//實例化點標記  
function addMarker(){  
    marker=new AMap.Marker({                    
    icon:"http://webapi.amap.com/p_w_picpaths/marker_sprite.png",  
    position:new AMap.LngLat(116.405467,39.907761)  
    });  
    marker.setMap(mapObj);  //在地圖上添加點  
}

【高德地圖API】如何制作自己的旅游地圖？

第三步、添加信息窗口

信息窗口用了自定義信息窗口，因為覺得蘭藍色的比較好看。

自定義信息窗口，分為3個部分，頭，中間，尾巴。

關(guān)閉按鈕也可以使用自定義圖片。

//構(gòu)建自定義信息窗體   
function createInfoWindow(title,content){  
    var info = document.createElement("div");  
    info.className = "info";  
    // 定義頂部標題  
    var top = document.createElement("div");  
    top.className = "info-top";  
      var titleD = document.createElement("div");  
      titleD.innerHTML = title;  
      var closeX = document.createElement("img");  
      closeX.src = "http://webapi.amap.com/p_w_picpaths/close2.gif";  
      closeX.onclick = closeInfoWindow;  
        
    top.appendChild(titleD);  
    top.appendChild(closeX);  
    info.appendChild(top);  
    // 定義中部內(nèi)容  
    var middle = document.createElement("div");  
    middle.className = "info-middle";  
    middle.innerHTML = content;  
    info.appendChild(middle);  
      
    // 定義底部內(nèi)容  
    var bottom = document.createElement("div");  
    bottom.className = "info-bottom";  
    var sharp = document.createElement("img");  
    sharp.src = "http://webapi.amap.com/p_w_picpaths/sharp.png";  
    bottom.appendChild(sharp);    
    info.appendChild(bottom);  
    return info;  
}

【高德地圖API】如何制作自己的旅游地圖？

第四步、結(jié)果面板

結(jié)果面板只要是為了鼠標放在上面時，可以打開相應(yīng)的信息窗口。

HTML結(jié)構(gòu)：

<li><a href="javascript:void(0);" onmouseover="myOpen2();">曼谷</a></li><li><a href="javascript:void(0);" onmouseover="myOpen();">斯里蘭卡</a></li>

信息窗口展開代碼：

function myOpen(){
    infoWindow.open(mapObj,marker.getPosition());
}function myOpen2(){
    infoWindow2.open(mapObj,marker2.getPosition());
}

【高德地圖API】如何制作自己的旅游地圖？

--------------------------------------------------------------------------

全部源代碼：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>逃學去旅行</title>
<!-- 頁面布局樣式 -->
<link rel="stylesheet" type="text/css"  /> 
<script language="javascript" src="http://webapi.amap.com/maps?v=1.2&key=【您的key】"></script>
<style>
#iCenter{float:left;width:600px;height:600px;}
.infobox{float:left;width:200px;height:600px;text-align:center;padding:10px 0;background:#efefef;}
.infobox h2{margin:0 0 20px;}
.infobox li a{text-decoration:none;font-size:20px;width:100%;display:block;padding:30px 0;border:1px dashed #ccc;border-width:1px 0;}
.infobox li a:hover{background:#ccc;}
</style>
</head>
<body onLoad="mapInit()"> 
    <div id="iCenter"></div>    
    <div class="infobox">
        <h2>逃學去旅行2</h2>
        <ul>
            <li><a href="javascript:void(0);" onmouseover="myOpen2();">曼谷</a></li>
            <li><a href="javascript:void(0);" onmouseover="myOpen();">斯里蘭卡</a></li>
        </ul>
    </div>
 </div>
</body>
<script language="javascript">
var mapObj,toolBar;
var marker,marker2;
//初始化地圖對象，加載地圖
function mapInit(){
    mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(88.505859,21.371244),level:4});
    //地圖中添加地圖操作ToolBar插件
    mapObj.plugin(["AMap.ToolBar"],function(){      
        toolBar = new AMap.ToolBar(); 
        mapObj.addControl(toolBar);     
    });    
    //地圖初始化時，在地圖上添加一個marker標記,鼠標點擊marker可彈出自定義的信息窗體
    addMarker();    
}
//添加marker標記
function addMarker(){
   mapObj.clearMap();
   marker = new AMap.Marker({                    
       map:mapObj,                   
       position:new AMap.LngLat(79.914551,6.871893), //位置-斯里蘭卡 
       icon:"http://webapi.amap.com/p_w_picpaths/0.png" //復雜圖標       
   }); 
   marker2 = new AMap.Marker({                    
       map:mapObj,                   
       position:new AMap.LngLat(100.546875,13.731381), //位置-曼谷 
       icon:"http://webapi.amap.com/p_w_picpaths/0.png" //復雜圖標       
   }); 
   AMap.event.addListener(marker,'mouseover',function(){ //鼠標點擊marker彈出自定義的信息窗體
         infoWindow.open(mapObj,marker.getPosition());  
   });  
   AMap.event.addListener(marker2,'mouseover',function(){ //鼠標點擊marker彈出自定義的信息窗體
         infoWindow2.open(mapObj,marker2.getPosition());  
   });  
}

//實例化信息窗體
var infoWindow = new AMap.InfoWindow({
        isCustom:true,  //使用自定義窗體
        content:createInfoWindow('斯里蘭卡&nbsp;&nbsp;<span >采茶人</span>',"<img src='taoxue_1.jpg' style='width:92px;float:left;margin:0 5px 5px 0;'><img src='taoxue_2.jpg' style='width:92px;float:left;margin:0 5px 5px 0;'><img src='taoxue_3.jpg' style='width:92px;float:left;margin:0 5px 5px 0;'>盡管斯里蘭卡人民并不富裕，但是他們對生活很滿足。每一個微笑的斯里蘭卡人的臉上，更多的是他們對待生活的熱情。<a ),
        size:new AMap.Size(300, 0),
        offset:new AMap.Pixel(0, -50)//-113, -140
    });
var infoWindow2 = new AMap.InfoWindow({
        isCustom:true,  //使用自定義窗體
        content:createInfoWindow('曼谷&nbsp;&nbsp;<span >泰國潑水節(jié)</span>',"<img src='taoxue_7.jpg' style='width:92px;float:left;margin:0 5px 5px 0;'><img src='taoxue_6.jpg' style='width:92px;float:left;margin:0 5px 5px 0;'><img src='taoxue_5.jpg' style='width:92px;float:left;margin:0 5px 5px 0;'>如果說青春是一場說走就走的旅行，那么泰國的潑水節(jié)才更好地詮釋著什么是青春。一起瘋狂吧！<a ),
        size:new AMap.Size(300, 0),
        offset:new AMap.Pixel(0, -50)//-113, -140
    });

//構(gòu)建自定義信息窗體 
function createInfoWindow(title,content){
    var info = document.createElement("div");
    info.className = "info";
    // 定義頂部標題
    var top = document.createElement("div");
    top.className = "info-top";
      var titleD = document.createElement("div");
      titleD.innerHTML = title;
      var closeX = document.createElement("img");
      closeX.src = "http://webapi.amap.com/p_w_picpaths/close2.gif";
      closeX.onclick = closeInfoWindow;
      
    top.appendChild(titleD);
    top.appendChild(closeX);
    info.appendChild(top);
    // 定義中部內(nèi)容
    var middle = document.createElement("div");
    middle.className = "info-middle";
    middle.innerHTML = content;
    info.appendChild(middle);
    
    // 定義底部內(nèi)容
    var bottom = document.createElement("div");
    bottom.className = "info-bottom";
    var sharp = document.createElement("img");
    sharp.src = "http://webapi.amap.com/p_w_picpaths/sharp.png";
    bottom.appendChild(sharp);  
    info.appendChild(bottom);
    return info;
}  
//關(guān)閉信息窗體
function closeInfoWindow(){
    mapObj.clearInfoWindow();
}
function myOpen(){
    infoWindow.open(mapObj,marker.getPosition());
}
function myOpen2(){
    infoWindow2.open(mapObj,marker2.getPosition());
}
</script>
</html>

頁面地址：http://zhaoziang.com/amap/taoxue.html

效果圖：

【高德地圖API】如何制作自己的旅游地圖？

向AI問一下細節(jié)

【高德地圖API】如何制作自己的旅游地圖？

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽

【高德地圖API】如何制作自己的旅游地圖？