【高德地图API】如何制作自己的旅游地图?

原文:【高德地图API】如何制作自己的旅游地图?

旅行的梦想并不遥远,只要一颗流浪四方的心。”——唐人立

最早认识唐人立的时候,他还是大二的学生。他独自完成了“南京20年规划地图”。几年前,他完成了自己的第一本著作,逃学去旅行《一个人走世界——大学4年200城的旅行》。而现在,他正执行着他的“辞职去旅行”计划。他好心的老板还多给他发了一个月的工资。从南京,到*,从曼谷到斯里兰卡……2个月来,唐人立走过太多地方。是他原创的图片和文字,让我渐渐对自助游产生了兴趣,并决定记录下旅游的每一刻。

于是,我开始着手制作了这个旅行地图。可能它还不够完善,但的确它能给我们带来太多的正能量。希望有越来越多的人,能够用这种方式,去记录自己的旅途。THX。

 

【高德地图API】如何制作自己的旅游地图?

 

代码其实很简单,简单的地图展示,简单的覆盖物,简单的信息窗口。

你要做的,其实只是申请一个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();  
}  

【高德地图API】如何制作自己的旅游地图?

 

第二步、添加覆盖物

覆盖物,就是marker,这里用的默认的覆盖物。蓝色的,挺好看。

//实例化点标记  
function addMarker(){  
    marker=new AMap.Marker({                    
    icon:"http://webapi.amap.com/images/marker_sprite.png",  
    position:new AMap.LngLat(116.405467,39.907761)  
    });  
    marker.setMap(mapObj);  //在地图上添加点  
}  

【高德地图API】如何制作自己的旅游地图?

 

第三步、添加信息窗口

信息窗口用了自定义信息窗口,因为觉得兰蓝色的比较好看。

自定义信息窗口,分为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/images/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/images/sharp.png";  
    bottom.appendChild(sharp);    
    info.appendChild(bottom);  
    return info;  
} 

【高德地图API】如何制作自己的旅游地图?

 

 

第四步、结果面板

结果面板只要是为了鼠标放在上面时,可以打开相应的信息窗口。

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());
}

【高德地图API】如何制作自己的旅游地图?

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

全部源代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>逃学去旅行</title>
<!-- 页面布局样式 -->
<link rel="stylesheet" type="text/css" href="http://api.amap.com/Public/css/demo.Default.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 h1{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">
        <h1>逃学去旅行2</h1>
        <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/images/0.png" //复杂图标       
   }); 
   marker2 = new AMap.Marker({                    
       map:mapObj,                   
       position:new AMap.LngLat(100.546875,13.731381), //位置-曼谷 
       icon:"http://webapi.amap.com/images/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 style="font-size:11px;color:#F00;">采茶人</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 href=‘http://weibo.com/534004234‘>@唐人立逃学去旅行</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 style="font-size:11px;color:#F00;">泰国泼水节</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 href=‘http://weibo.com/534004234‘>@唐人立逃学去旅行</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/images/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/images/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

 

 效果图:

【高德地图API】如何制作自己的旅游地图?

【高德地图API】如何制作自己的旅游地图?

上一篇:Eclipse Error:“ An API baseline has not been set ” 解决办法


下一篇:百度地图API显示多个标注点,解决提示信息问题以及给标注增加地图旁的文字连接提示的另一种解决办法