溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
“旅行的夢想并不遙遠，只要一顆流浪四方的心。”——唐人立。
最早認識唐人立的時候，他還是大二的學生。他獨自完成了“南京20年規劃地圖”。幾年前，他完成了自己的第一本著作，逃學去旅行《一個人走世界——大學4年200城的旅行》。而現在，他正執行著他的“辭職去旅行”計劃。他好心的老板還多給他發了一個月的工資。從南京，到臺灣，從曼谷到斯里蘭卡……2個月來，唐人立走過太多地方。是他原創的圖片和文字，讓我漸漸對自助游產生了興趣，并決定記錄下旅游的每一刻。
于是，我開始著手制作了這個旅行地圖。可能它還不夠完善，但的確它能給我們帶來太多的正能量。希望有越來越多的人，能夠用這種方式，去記錄自己的旅途。THX。
代碼其實很簡單，簡單的地圖展示，簡單的覆蓋物，簡單的信息窗口。
你要做的，其實只是申請一個key：http://yuntu.amap.com/datamanager/index.html
然后將下面的代碼復制到你的網站上，并使用你自己的key。
第一步、地圖展示
中心點坐標可以通過坐標拾取工具來找：http://zhaoziang.com/amap/picpoint.html
地圖級別在國內建議12-18，國外建議在4-6.
var mapObj;
//初始化地圖對象，加載地圖
function mapInit(){
mapObj = new AMap.Map("iCenter",{center:new AMap.LngLat(121.498586,31.239637),
level:17});
addBuildings();
}
第二步、添加覆蓋物
覆蓋物，就是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); //在地圖上添加點
}
第三步、添加信息窗口
信息窗口用了自定義信息窗口，因為覺得蘭藍色的比較好看。
自定義信息窗口，分為3個部分，頭，中間，尾巴。
關閉按鈕也可以使用自定義圖片。
//構建自定義信息窗體
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);
// 定義中部內容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.innerHTML = content;
info.appendChild(middle);
// 定義底部內容
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;
}
第四步、結果面板
結果面板只要是為了鼠標放在上面時，可以打開相應的信息窗口。
HTML結構：
<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());
}
--------------------------------------------------------------------------
全部源代碼：
<!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('斯里蘭卡 <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('曼谷 <span >泰國潑水節</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;'>如果說青春是一場說走就走的旅行，那么泰國的潑水節才更好地詮釋著什么是青春。一起瘋狂吧！<a ),
size:new AMap.Size(300, 0),
offset:new AMap.Pixel(0, -50)//-113, -140
});
//構建自定義信息窗體
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);
// 定義中部內容
var middle = document.createElement("div");
middle.className = "info-middle";
middle.innerHTML = content;
info.appendChild(middle);
// 定義底部內容
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;
}
//關閉信息窗體
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
效果圖：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
