ExtJS 2.x + Google Maps JavaScript API V3

简介:

   最近一段时间手头没有啥具体事情需要忙, 就抽空学习下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文件下载

 

作者:peterzb个人开发历程知识库 - 博客园
出处:http://peterzb.cnblogs.com/
文章版权归本人所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。


本文转自peterzb博客园博客,原文链接:http://www.cnblogs.com/peterzb/archive/2010/12/16/1904983.html,如需转载请自行联系原作者

目录
相关文章
|
28天前
|
人工智能 Java API
Google Gemini API 接口调用方法
Google 最近发布的 Gemini 1.0 AI 模型通过其升级版,Gemini,标志着公司迄今为止最为强大和多功能的人工智能技术的突破。
|
1月前
|
JavaScript 前端开发 API
常用JavaScript 数组 API大全
常用JavaScript 数组 API大全
32 0
|
1月前
|
API
egg.js 24.2写第一个api接口
egg.js 24.2写第一个api接口
71 0
|
2月前
|
JavaScript 前端开发
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
16 1
|
3月前
|
分布式计算 JavaScript 前端开发
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
JS中数组22种常用API总结,slice、splice、map、reduce、shift、filter、indexOf......
|
2月前
|
Web App开发 JavaScript NoSQL
深入浅出:构建基于Node.js的RESTful API
在当今快速发展的互联网时代,RESTful API已成为前后端分离架构中不可或缺的一部分。本文旨在为初学者和中级开发人员提供一个清晰、简洁的指南,详细介绍如何使用Node.js构建一个高效、可维护的RESTful API。通过结合实际案例,本文将从API设计理念出发,深入讲解如何利用Express框架及MongoDB数据库实现API的增删改查功能,同时探讨如何通过JWT进行安全认证,确保数据传输的安全性。此外,文章还将简要介绍如何使用Swagger生成API文档,使得API的测试和维护更加便捷。无论你是希望提升现有项目的API设计,还是想从零开始构建一个新项目,本文都将为你提供一条清晰的道路
|
1月前
|
JavaScript 前端开发 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
JavaScript循环遍历常用的7种方法以及常用的数组 API
34 0
|
1月前
|
Web App开发 JavaScript 前端开发
使用Node.js和Express构建RESTful API
使用Node.js和Express构建RESTful API
16 0
|
2月前
|
JavaScript 前端开发 Java
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。
MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 和 Ext JS 都是 JavaScript 框架,用于开发 Web 应用程序。它们分别提供了不同的功能和特性,以帮助开发者更高效地构建和维护 Web 应用程序。
17 2
|
2月前
|
NoSQL JavaScript 前端开发
深入浅出:使用Node.js和MongoDB构建RESTful API
在当今的软件开发领域,构建高效、可扩展的Web服务已成为开发者的重要任务之一。本文将引导读者通过现代JavaScript环境——Node.js,搭配流行的NoSQL数据库MongoDB,一步步构建一个RESTful API。不同于常规的摘要,我们将采用故事化的方式,通过一个虚构的应用“BookFinder”的开发旅程,带领读者理解API设计、数据库交互及安全性考量等关键知识点。无论你是前端工程师希望深化后端知识,还是后端新手寻求实践机会,本文都将提供你所需的指南和启示。