【高德地图API】如何制作自己的旅游地图？ |
您所在的位置：网站首页 › 旅游地图的定义 › 【高德地图API】如何制作自己的旅游地图？ |
|
“旅行的梦想并不遥远，只要一颗流浪四方的心。”——唐人立。 最早认识唐人立的时候，他还是大二的学生。他独自完成了“南京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/images/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/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; }
第四步、结果面板 结果面板只要是为了鼠标放在上面时，可以打开相应的信息窗口。 HTML结构： 曼谷 斯里兰卡信息窗口展开代码： function myOpen(){ infoWindow.open(mapObj,marker.getPosition()); } function myOpen2(){ infoWindow2.open(mapObj,marker2.getPosition()); }-------------------------------------------------------------------------- 全部源代码： DOCTYPE HTML> 逃学去旅行 #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;} 逃学去旅行2 曼谷 斯里兰卡 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('斯里兰卡;;采茶人',"尽管斯里兰卡人民并不富裕，但是他们对生活很满足。每一个微笑的斯里兰卡人的脸上，更多的是他们对待生活的热情。@唐人立逃学去旅行"), size:new AMap.Size(300, 0), offset:new AMap.Pixel(0, -50)//-113, -140 }); var infoWindow2 = new AMap.InfoWindow({ isCustom:true, //使用自定义窗体 content:createInfoWindow('曼谷;;泰国泼水节',"如果说青春是一场说走就走的旅行，那么泰国的泼水节才更好地诠释着什么是青春。一起疯狂吧！@唐人立逃学去旅行"), 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()); }
页面地址：http://zhaoziang.com/amap/taoxue.html
效果图： |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |