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

2024-12-28 技术教程

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

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

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

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

你要做的，其实只是申请一个key：http://yuntu.amap.com/datamanager/index.html

然后将下面的代码复制到你的网站上，并使用你自己的key。

第一步、地图展示

中心点坐标可以通过坐标拾取工具来找：http://zhaoziang.com/amap/picpoint.html

地图级别在国内建议12-18，国外建议在4-6.

varmapObj;//初始化地图对象，加载地图functionmapInit(){mapObj=newAMap.Map("iCenter",{center:newAMap.LngLat(121.498586,31.239637),level:17});addBuildings();}

第二步、添加覆盖物

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

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

第三步、添加信息窗口

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

自定义信息窗口，分为3个部分，头，中间，尾巴。

关闭按钮也可以使用自定义图片。

//构建自定义信息窗体functioncreateInfoWindow(title,content){varinfo=document.createElement("div");info.className="info";//定义顶部标题vartop=document.createElement("div");top.className="info-top";vartitleD=document.createElement("div");titleD.innerHTML=title;varcloseX=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);//定义中部内容varmiddle=document.createElement("div");middle.className="info-middle";middle.innerHTML=content;info.appendChild(middle);//定义底部内容varbottom=document.createElement("div");bottom.className="info-bottom";varsharp=document.createElement("img");sharp.src="http://webapi.amap.com/p_w_picpaths/sharp.png";bottom.appendChild(sharp);info.appendChild(bottom);returninfo;}

第四步、结果面板

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

HTML结构：

信息窗口展开代码：

functionmyOpen(){infoWindow.open(mapObj,marker.getPosition());}functionmyOpen2(){infoWindow2.open(mapObj,marker2.getPosition());}

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

全部源代码：

<!DOCTYPEHTML><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><title>逃学去旅行</title><linkrel="stylesheet"type="text/css"href="http://api.amap.com/Public/css/demo.Default.css"/><scriptlanguage="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:10px0;background:#efefef;}.infoboxh2{margin:0020px;}.infoboxlia{text-decoration:none;font-size:20px;width:100%;display:block;padding:30px0;border:1pxdashed#ccc;border-width:1px0;}.infoboxlia:hover{background:#ccc;}</style></head><bodyonLoad="mapInit()"><divid="iCenter"></div><divclass="infobox"><h2>逃学去旅行2</h2><ul><li><ahref="javascript:void(0);"onmouseover="myOpen2();">曼谷</a></li><li><ahref="javascript:void(0);"onmouseover="myOpen();">斯里兰卡</a></li></ul></div></div></body><scriptlanguage="javascript">varmapObj,toolBar;varmarker,marker2;//初始化地图对象，加载地图functionmapInit(){mapObj=newAMap.Map("iCenter",{center:newAMap.LngLat(88.505859,21.371244),level:4});//地图中添加地图操作ToolBar插件mapObj.plugin(["AMap.ToolBar"],function(){toolBar=newAMap.ToolBar();mapObj.addControl(toolBar);});//地图初始化时，在地图上添加一个marker标记,鼠标点击marker可弹出自定义的信息窗体addMarker();}//添加marker标记functionaddMarker(){mapObj.clearMap();marker=newAMap.Marker({map:mapObj,position:newAMap.LngLat(79.914551,6.871893),//位置-斯里兰卡icon:"http://webapi.amap.com/p_w_picpaths/0.png"//复杂图标});marker2=newAMap.Marker({map:mapObj,position:newAMap.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());});}//实例化信息窗体varinfoWindow=newAMap.InfoWindow({isCustom:true,//使用自定义窗体content:createInfoWindow('斯里兰卡  <span>采茶人</span>',"<imgsrc='taoxue_1.jpg'style='width:92px;float:left;margin:05px5px0;'><imgsrc='taoxue_2.jpg'style='width:92px;float:left;margin:05px5px0;'><imgsrc='taoxue_3.jpg'style='width:92px;float:left;margin:05px5px0;'>尽管斯里兰卡人民并不富裕，但是他们对生活很满足。每一个微笑的斯里兰卡人的脸上，更多的是他们对待生活的热情。<ahref='http://weibo.com/534004234'>@唐人立逃学去旅行</a>"),size:newAMap.Size(300,0),offset:newAMap.Pixel(0,-50)//-113,-140});varinfoWindow2=newAMap.InfoWindow({isCustom:true,//使用自定义窗体content:createInfoWindow('曼谷  <span>泰国泼水节</span>',"<imgsrc='taoxue_7.jpg'style='width:92px;float:left;margin:05px5px0;'><imgsrc='taoxue_6.jpg'style='width:92px;float:left;margin:05px5px0;'><imgsrc='taoxue_5.jpg'style='width:92px;float:left;margin:05px5px0;'>如果说青春是一场说走就走的旅行，那么泰国的泼水节才更好地诠释着什么是青春。一起疯狂吧！<ahref='http://weibo.com/534004234'>@唐人立逃学去旅行</a>"),size:newAMap.Size(300,0),offset:newAMap.Pixel(0,-50)//-113,-140});//构建自定义信息窗体functioncreateInfoWindow(title,content){varinfo=document.createElement("div");info.className="info";//定义顶部标题vartop=document.createElement("div");top.className="info-top";vartitleD=document.createElement("div");titleD.innerHTML=title;varcloseX=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);//定义中部内容varmiddle=document.createElement("div");middle.className="info-middle";middle.innerHTML=content;info.appendChild(middle);//定义底部内容varbottom=document.createElement("div");bottom.className="info-bottom";varsharp=document.createElement("img");sharp.src="http://webapi.amap.com/p_w_picpaths/sharp.png";bottom.appendChild(sharp);info.appendChild(bottom);returninfo;}//关闭信息窗体functioncloseInfoWindow(){mapObj.clearInfoWindow();}functionmyOpen(){infoWindow.open(mapObj,marker.getPosition());}functionmyOpen2(){infoWindow2.open(mapObj,marker2.getPosition());}</script></html>

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

效果图：