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

效果图:

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

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

    原文:[高德地图API]如何获得行政区域?如何制作行政规划图? 什么是行政规划图?如何获得每个行政区域的边界轮廓图?举例:重庆市 江北区.如图: 官方类参考:http://developer.amap ...

  2. 百度地图API和高德地图API资料集锦

    [高德地图API]从零开始学高德JS API(五)路线规划——驾车|公交|步行   [高德地图API]从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自 ...

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

    原文:[高德地图API]汇润做爱地图技术大揭秘 昨日收到了高德地图微信公众号的消息推送,说有[一大波免费情趣用品正在袭来],点进去看了一眼,说一个电商公司(估计是卖情趣用品的)用高德云图制作了一张可以 ...

  4. 【高德地图API】一句话搞定webmap(一)——轻地图组件

    原文:[高德地图API]一句话搞定webmap(一)——轻地图组件 摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript…… 而 ...

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

    原文:[高德地图API]从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物 摘要:覆盖物,是一张地图的灵魂.有覆盖物的地图,才是完整的地图.在 ...

  6. 【高德地图API】从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图

    原文:[高德地图API]从零开始学高德JS API(一)地图展现——仙剑地图,麻点图,街景,室内图 摘要:关于地图的显示,我想大家最关心的就是麻点图,自定义底图的解决方案了吧.在过去,marker大于 ...

  7. 高德地图api实现地址和经纬度的转换(python)

    利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo ...

  8. 高德地图API应用

    高德地图官网:http://api.amap.com/javascript/ 输入关键字,搜索地址功能的网页: 1.引用远程Map Api(js)网址形式(注册后获取) 2.定义个<div> ...

  9. 【高德地图API】如何解决坐标转换,坐标偏移?

    http://bbs.amap.com/thread-18617-1-1.html#rd?sukey=cbbc36a2500a2e6c2b0b19115118ace519002ff3a52731f13 ...

随机推荐

  1. Java中导入、导出Excel

    原文:Java中导入.导出Excel 一.介绍 当前B/S模式已成为应用开发的主流,而在企业办公系统中,常常有客户这样子要求:你要把我们的报表直接用Excel打开(电信系统.银行系统).或者是:我们已 ...

  2. VS2010或2012中,如何设置代码格式化?

    ctrl + E,D菜单在 编辑-->高级 里面 第一个菜单项

  3. iOS 中国排序

    这里分享一个中国某种方便的方法,我们放在一起的人脉资源后,方便的类别,使用自己的包, 此处所使用的方法贴,源代码可以在本文的结尾下载. 要记得加头文件 #import "NSArray+So ...

  4. JAVA中的super和this关键字的使用

    一 this关键字 this关键字可以出现在构造方法和实例方法中,不能出现在静态方法中,这是因为静态方法可以用类名来调用,这时可能还没有任何对象诞生. this主要有两种用法: 1 用在构造方法中,调 ...

  5. android4.0下载问题

    近期在下载android4.0的代码,下列操作 下载Repo $ mkdir ~/bin $ PATH=~/bin:$PATH $ curl https://dl-ssl.google.com/dl/ ...

  6. rest-work-eat-study-rest-work-eat or rest-rest-work-work-eat-eat..

    words are for your heart. tks for my dear family's ok. Listening more  means not more talkive. 版权声明: ...

  7. QlikView一年计算,以最新的销售数据

    总销量的新财年后年初今天是非常需要的学生经常会遇到,有两种思路: 1. 能Load当数据是生成一个称为场YTDFlag.这是本财年的时刻,本场会1,除此以外,0.因此,在报告中可使用非常方便Sum(S ...

  8. UVa - The 3n + 1 problem 解读

    这个问题并计算质数了一下相间隔似的.思想上一致. 注意问题: 1 i 可能 大于或等于j -- 这里上传.小心阅读题意,我没有说这个地方不能保证.需要特殊处理 2 计算过程中可能溢出,的整数大于最大值 ...

  9. [Erlang危机](4.5)第四章练习

    原创文章.转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface 联系邮箱:cto@188.com Exercises 练习 Review Qu ...

  10. 金蝶K3管理软件PDA条码解决方式,盘点机与金蝶K3无缝对接

    申明:以上文字为"武汉汉码科技有限公司"原创,转载时务必注明出处. 技术分享,沟通你我,共同进步!www.hanma-scan.com 原帖:http://www.hanma-sc ...