【高德地图API】如何制作自己的旅游地图？ - 程序员工具箱

2000万优秀解决方案库，覆盖所有编程及软件开发类，极速查询

今日已更新 2508 篇代码解决方案

首页 > 代码库 > 【高德地图API】如何制作自己的旅游地图？

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

2024-10-28 11:51:39 208人阅读

原文:【高德地图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结构：

<li><a href="javascript:void(0);" onm ouseover="myOpen2();">曼谷</a></li><li><a href="javascript:void(0);" onm ouseover="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" 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);" onm ouseover="myOpen2();">曼谷</a></li>            <li><a href="javascript:void(0);" onm ouseover="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=http://www.mamicode.com/‘taoxue_1.jpg‘ style=‘width:92px;float:left;margin:0 5px 5px 0;‘>尽管斯里兰卡人民并不富裕，但是他们对生活很满足。每一个微笑的斯里兰卡人的脸上，更多的是他们对待生活的热情。@唐人立逃学去旅行"),        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=http://www.mamicode.com/‘taoxue_7.jpg‘ style=‘width:92px;float:left;margin:0 5px 5px 0;‘>如果说青春是一场说走就走的旅行，那么泰国的泼水节才更好地诠释着什么是青春。一起疯狂吧！@唐人立逃学去旅行"),        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】如何制作自己的旅游地图？

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们