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

<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" 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

 

 效果图：

时间： 2024-11-03 22:31:43

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

如何使用高德地图API制作东莞酒店地图

今天到深圳参加第二届电博会,果然不像车展或者漫展那样,会有萌妹纸,大家都好素净.晚上去东莞玩一圈,发现订不到酒店啊!各种商业中心关闭啊.于是想,那自己制作一张东莞酒店地图玩玩吧.于是在咖啡厅开始写代码,顺便等别人把酒店定好--啊,我果然是程序猿的命麽?!嗯,回到主题,制作好酒店地图,需要增加功能,就是按照星级,或者行政区进行分类查询检索.而且,还可以在云图上任意增减数据.真是出门在外居家旅行必备佳品,哈哈. 最终效果如下: 第一步,数据准备. 将东莞酒店的数据准备好.酒店数据来源于互联网,数据太

【高德地图API】如何获得行政区域？如何制作行政规划图？

原文:[高德地图API]如何获得行政区域?如何制作行政规划图? 什么是行政规划图?如何获得每个行政区域的边界轮廓图?举例:重庆市 江北区.如图:   官方类参考:http://developer.amap.com/javascript/reference/search#Partition   行政规划代码: function byDistrict(){ var partition = new AMap.Partition(); //创建一个新的行政规划类 partition.byDistrict

【高德地图API】汇润做爱地图技术大揭秘

原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以标记做爱地点与详情的地图.这不就是中国版的I just made love麽? 滑到屏幕底下,看了看阅读量,哇塞,居然有4万3!!!说明实在是有很多人关注做爱地图啊.本着研究地图的心情(绝对不是为了什么价值300的智能情趣用品!),我也就点击了[阅读原文]-- 好吧,为了证明我真的不是为了奖品,我会

【高德地图API】从零开始学高德JS API（一）地图展现——仙剑地图，麻点图，街景，室内图

原文:[高德地图API]从零开始学高德JS API(一)地图展现--仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于500之后,浏览器开始逐渐卡死,大家都开始寻找解决方案,比如聚合marker啊,比如麻点图啊.聚合marker里面还有一些复杂的算法,而麻点图,最让大家头疼的,就是如何生成麻点图,如何切图,如何把图片贴到地图上,还有如何定位图片的位置吧.以前那么复杂的一系列操作,居然让云图的可视化操作一下子解决了.

【高德地图API】从零开始学高德JS API（三）覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物

原文:[高德地图API]从零开始学高德JS API(三)覆盖物--标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在一张地图上,除了底层的底图(瓦片图,矢量图),控件(有功能可操作的工具),最重要最不可缺少的就是覆盖物了.覆盖物有多种,包括,标注.折线.多边形.信息窗口.聚合marker.麻点图和图片覆盖物.本文会详细介绍每一种覆盖物的概念,添加方法,修改方法,移除方法等.最后会提供示例和源代码下载.   示例d

【高德地图API】一句话搞定webmap（一）——轻地图组件

原文:[高德地图API]一句话搞定webmap(一)--轻地图组件 摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript-- 而如今,要制作一张地图真是越来越容易了!竟然只需要一句话,就可以打点,导航,定位,显示交通流量等. 让我们一起来轻松一下吧~     ------------------------------------华丽分割线-----------------------------------------  

【高德地图API】从零开始学高德JS API（六）——坐标转换

原文:[高德地图API]从零开始学高德JS API(六)--坐标转换 摘要:如何从GPS转到谷歌?如何从百度转到高德?这些都是小case.我们还提供,如何将基站cell_id转换为GPS坐标? ----------------------------------------------------------------------------------------- 第一部分 各种坐标系详解 1.大地坐标系统 WGS-84 用来表述地球上点的位置的一种地区坐标系统.它采用一个十分近似于地球自

【高德地图API】从零开始学高德JS API（七）——定位方式大揭秘

原文:[高德地图API]从零开始学高德JS API(七)--定位方式大揭秘 摘要:关于定位,分为GPS定位和网络定位2种.GPS定位,精度较高,可达到10米,但室内不可用,且超级费电.网络定位,分为wifi定位和基站定位,都是通过获取wifi或者基站信息,然后查询对应的wifi或者基站位置数据库,得到的定位地点.定位数据库可以不断完善不断补充,所以,越定位越准确.本文详细描述了,如果使用高德JS API来实现位置定位.城市定位的方法,包含了IP定位,浏览器定位,检索定位等多种网络定位方法.当然,

【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行

原文:[高德地图API]从零开始学高德JS API(五)路线规划--驾车|公交|步行 先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自定义路线规划功能,这是别家没有做到的.导航,指的是为驾车用户提示路口信息,向左向右,进入匝道等信息. 2.我们这里说的步行导航和驾车导航,严格的说,应该是路线规划.从A地到B地,如果是驾车,路线规划会将公路路网做为搜索数据:如果是步行,过街天桥.