松盛号

松盛号

【高德地图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.varmapObj;//初始化地图对象,加载地图functionmapInit(){mapObj=newAMap.Map("iCenter",{center:newAMap.LngLat(121.498586,31.239637),level:17});addBuildings();}

覆盖物,就是marker,这里用的默认的覆盖物。蓝色的,挺好看。//实例化点标记functionaddMarker(){marker=newAMap.Marker({icon:"http://webapi.amap.com/images/marker_sprite.png",position:newAMap.LngLat(116.405467,39.907761)});marker.setMap(mapObj);//在地图上添加点}

信息窗口用了自定义信息窗口,因为觉得兰蓝色的比较好看。

自定义信息窗口,分为3个部分,头,中间,尾巴。

结果面板只要是为了鼠标放在上面时,可以打开相应的信息窗口。

HTML结构:曼谷斯里兰卡

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至lizi9903@foxmail.com举报,一经查实,本站将立刻删除。

上一篇 没有了

下一篇没有了