个人开发历程知识库

关注C++/Java/C#技术, 致力于安防监控/移动应用/WEB方面开发
------------------------------------ 业精于勤,荒于嬉;行成于思,毁于随
posts - 163, comments - 748, trackbacks - 0, articles - 18
  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

ExtJS 2.x + Google Maps JavaScript API V3

Posted on 2010-12-16 09:15 peterzb 阅读(...) 评论(...) 编辑 收藏

   最近一段时间手头没有啥具体事情需要忙, 就抽空学习下ExtJS, 并把原先采用BCB6开发的一个配置工具上功能迁移集成到现有的Web平台上来; 刚好可以实践巩固下ExtJS, 其中有个区域配置功能打算把以前做的Google Maps也整合进来, 那Google Maps原先采用的是Google Maps JavaScript API V2, 需要注册申请API Key, 用起来不是那么方便; 现Google在2009上半年推出了不需要API Key的Google Maps JavaScript API V3版本, 打算顺便学习下. Google Maps 相关资料可以参考我原先整理的一篇博文Web开发系列 - GIS或者访问其官方网站Maps API 系列. 接下来介绍一下简单ExtJS 2.x + Google Maps JavaScript API V3集成应用 - 区域配置功能(演示地图基本功能、支持相关位置标记、拖动标记改变位置).

 

1、我们先创建一个相关HTML页面gmap.html, 加入ExtJS依赖项,如相关css,js脚本文件

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script language="javascript" src="ext/adapter/ext/ext-base.js"></script>
<script language="javascript" src="ext/ext-all.js"></script>
<script language="javascript" src="ext/ext-lang-zh_CN-min.js"></script>

2、引入Google Maps JavaScript API 脚本文件(因为不是相关GPS应用,我们这里设置其相关参数sensor=false)

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>

3、区域配置窗口相关JavaScript代码


4、最终呈现结果如图下,gmap.html文件下载