好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

Google地图

Google地图

  最近由于工作需要研究了下Google地图,网络上也有不少相关文章。同时Google已经提供了很详尽的API及说明。我在使用Google API期间有部分内容还是值得拿出来于园友分享的。

   一、调用Google Map API  无法出现周边生活设施

       当我们使用Google API 提供的方法,将Google Map 加载到自己的html表单中。此时在地图上只能看见目标地点,并不能看见目标地点的周边生活设置,比如周边的银行、学校、超市等。此功能Google未提供在API中直接调用。截图如下:

   二、封装自定义GMapMaker 对象

  上图中的显示效果从用户交互上来说,不是太理想。现在为Google Map 新增周边生活设施,让地图上的元素更加丰富。封装一段js代码。该代码如下:

GMapMark

GMapMark代码很简单,主要使用了Google API 中的 Google Local Search 方法,把Local Search 查询到的周边设施加入到地图中。使用GmapMark后的地图效果截图为:

  三、小结

    本篇中的目标地点“武汉大厦”使用了elabel.js这个javascript 类库,您如果感兴趣可以去这里下载: http://econym.org.uk/gmap/elabel.htm 。相关Google Map API 可以在这里查阅: http://code.google.com/intl/zh-CN/apis/maps/documentation/javascript/v2/controls.html 。

 


作者: RyanDing  
出处: http://www.cnblogs.com/ryanding/  
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。如有疑问,可以通过 ryan.d@qq.com 联系作者本人。

分类:  Javascript

作者: Leo_wl

    

出处: http://www.cnblogs.com/Leo_wl/

    

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

版权信息

查看更多关于Google地图的详细内容...

  阅读:41次