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

效果图：

最新文章

  1. JDBC增加删除修改
  2. 在Java中如何实现“Pless presss any key to continue.”
  3. This version of android studio is incompatible with the gradle version used.Try disabling the instant run解决办法
  4. 通过SecureCRT访问亚马逊Amazon EC2主机
  5. shutter截图工具
  6. java 读取文件的字节数组
  7. PE格式的理解（待补充）
  8. [Hive - Tutorial] Querying and Inserting Data 查询和插入数据
  9. annotatedClasses和component-scan冲突吗
  10. xcode 5与ios 7的屏幕适配问题
  11. 免安装版Tomcat配置内存
  12. thinkphp获取特定字段的两种方法
  13. 值得认真学习的6 个 JavaScript 框架
  14. 阿里云ECS搭建SVN配置外网
  15. python算法&amp;二分查找法
  16. C#基础知识总结(五)
  17. Echarts-图表根据值的不同展示成不同的颜色
  18. Python语言中的按位运算
  19. python---django中form组件（数据添加前使用自定义方法&lt;django预留扩展点3个&gt;进行验证，以及源码分析）
  20. 【转】【Python】装饰器

热门文章

  1. STL之容器适配器queue的实现框架
  2. Bulk Insert具体订单
  3. 玩转Web之servlet（一）---怎样创建一个servlet
  4. JAVA中的super和this关键字的使用
  5. MailTest
  6. Team Services and Team Foundation Server官方资料入口
  7. SQL Server 内存泄露(memory leak)——游标导致的内存问题
  8. C++ Primer 学习笔记_41_STL实践与分析（15）--先来看看算法【下一个】
  9. Android： ADT 23.0.2
  10. Android的相关的源代码的方法