原文:【高德地图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. Uncaught TypeError: Cannot read property &#39;call&#39; of undefined jquery.validate.min.js:28

    最近在做表单验证时,,自己写的addMethod 方法总是不起作用.折腾了将近一天. 报告的错误,如下面的 Uncaught TypeError: Cannot read property 'call ...

  2. 浅谈web网站架构演变过程（转）

    前言 我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变.   该系统具备的功能:   用户模块:用户注册和管理 商品模块:商品展示和管理 交易模块:创建交易和管理 阶 ...

  3. SPOJ SUBLEX 7258. Lexicographical Substring Search

    看起来像是普通的SAM+dfs...但SPOJ太慢了......倒腾了一个晚上不是WA 就是RE ..... 最后换SA写了...... Lexicographical Substring Searc ...

  4. Java 信号 Semaphore 简介

    Semaphore当前在多线程环境下被扩放使用.操作系统的信号量是个非常重要的概念,在进程控制方面都有应用. Java 并发库 的Semaphore 能够非常轻松完毕信号量控制,Semaphore能够 ...

  5. 【Leetcode】Partition List (Swap)

    Given a linked list and a value x, partition it such that all nodes less than x come before nodes gr ...

  6. C++11的一些功能

    .断言是将一个须要为真的表达式放在语句中,在debug模式下检查一些逻辑错误的參数.C++中使用assert须要使用<assert.h>或者<cassert>头文件.有函数定义 ...

  7. Design Pattern Command 命令设计模式

    这种设计模式是使用不同类的包裹不同的命令,达到什么样的命令执行什么操作. 有可能进一步利用map您最喜欢的对接命令字. 正在运行的类实际上已经包含了操作的所有需求,例如: class SuperMak ...

  8. Codeforces Round #267 (Div. 2) A

    题目: A. George and Accommodation time limit per test 1 second memory limit per test 256 megabytes inp ...

  9. Java里泛型有什么作用

    1 泛型赋予了类型參数式多态的能力 2 泛型的第一个优点是编译时的严格类型检查,提高了程序的安全性和健壮性,这是集合框架最重要的特点. 3 泛型消除了绝大多数的类型转换.假设没有泛型,当你使用集合框架 ...

  10. 谈话ZooKeeper（一个）分析ZooKeeper的Quorums机制--预防Split-Brain问题

    使用ZooKeeper学生们应该看到一个参数.它是ZooKeeper超过一半的群集必须节点(Majority)可用的.外来人才在整个集群中可用.在大多数情况下,这种说法是正确的. 谈论这篇文章背后的原 ...