Google_Maps_API_V3_HTML资源-CSDN文库

共18个文件

js：8个

css：4个

a：1个

Google

Maps

JavaScript

5星 · 超过95%的资源需积分: 6 105 浏览量 2013-06-03 11:08:46 上传评论收藏 365KB RAR 举报

**正文** Google Maps JavaScript API V3 是 Google 提供的一个强大工具，用于在网页上集成交互式的地图服务。作为正式的 JavaScript API 版本，它允许开发者利用 HTML、CSS 和 JavaScript 技术创建丰富的地图应用程序，提供了高度自定义的可能性，包括添加标记、热力图、路径、信息窗口以及与其他 Google 服务（如街景、地理编码和路线规划）的集成。我们来了解一下 API 的核心概念： 1. **地图对象（Map Object）**：这是 Google Maps API 的基础，它表示地图本身。通过创建 Map 对象，并将其附加到网页上的特定 DOM 元素，可以显示地图。Map 对象支持各种配置选项，如中心点、缩放级别和地图类型。 2. **标记（Marker）**：标记用于在地图上指定特定位置。它们可以包含自定义图标，支持拖动，并且可以通过信息窗口展示详细信息。 3. **信息窗口（InfoWindow）**：信息窗口用于向用户显示与地图上的特定位置相关的信息。它可以包含 HTML 内容，如文本、图片或表格。 4. **覆盖物（Overlay）**：覆盖物是一个更广泛的类别，包括标记和信息窗口，还包括折线（Polyline）、多边形（Polygon）和地砖（Ground Overlay）。这些元素可以用于展示路径、区域或自定义图像。 5. **地图类型（Map Types）**：API 支持多种地图样式，如卫星图、地形图和混合图，开发者可以根据需求选择。 6. **事件监听器（Event Listeners）**：通过监听地图、标记和其他对象上的事件，可以响应用户的交互，如点击、拖动等，从而实现动态功能。 7. **地理编码（Geocoding）**：API 提供了地理编码服务，将地址转换为经纬度坐标，反之亦然，便于在地图上定位。 8. **路线规划（Directions）**：结合 DirectionsService 和 DirectionsRenderer，开发者可以构建路线规划功能，显示驾车、步行或公共交通的路径。 9. **地理坐标系统（Geolocation）**：API 可以获取设备的地理位置信息，以便实现基于位置的应用。 10. **服务（Services）**：除了上述功能，Google Maps API 还提供了其他服务，如 ElevationService（海拔服务）、DistanceMatrixService（距离矩阵服务）和 PlacesService（地点服务），帮助开发者获取额外的地理信息。为了更好地利用这些功能，开发者需要熟悉 JavaScript 和异步编程，因为大部分 API 方法都是异步的。同时，了解如何组织和优化代码，以处理大量的数据和复杂的交互，也是必不可少的技能。文件 "Google Maps Javascript API V3 Reference - Google Maps JavaScript API v3 — Google Developers.htm" 应该是官方的 API 参考文档，包含了所有可用的类、方法、属性和事件的详细信息。开发者应仔细阅读这份文档，以了解每个功能的用法和示例。 Google Maps JavaScript API V3 提供了一套强大的工具，使开发者能够创建各种各样的地图应用，从简单的地图嵌入到复杂的位置服务。通过深入学习和实践，你可以利用这个 API 创造出富有创新性的解决方案，满足不同用户的需求。

资源推荐

资源详情

资源评论

收起资源包目录

Google_Maps_API_V3.rar （18个子文件）

Google Maps Javascript API V3 Reference - Google Maps JavaScript API v3 — Google Developers.htm 384KB

Google Maps Javascript API V3 Reference - Google Maps JavaScript API v3 — Google Developers_files

screen.css 287KB

css.css 263B

a.gif 42B

formatzh_CNdefaulttable.js 251KB

jsapi 24KB

script_foot.js 186KB

plusone.js 25KB

conversion.js 7KB

jquery.js 89KB

a_002 2KB

jquery-ui.js 194KB

table.css 3KB

script_head.js 18KB

a 518B

cbgapi.loaded_0 82KB

api.js 592B

css_002.css 1KB

<!DOCTYPE html> <html style="" class="devsite js no-flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-opensans-n4-active wf-active" lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"><script async="" src="Google%20Maps%20Javascript%20API%20V3%20Reference%20-%20Google%20Maps%20JavaScript%20API%20v3%20%E2%80%94%20Google%20Developers_files/cbgapi.loaded_0"></script><script gapi_processed="true" src="Google%20Maps%20Javascript%20API%20V3%20Reference%20-%20Google%20Maps%20JavaScript%20API%20v3%20%E2%80%94%20Google%20Developers_files/plusone.js" async="" type="text/javascript"></script> <meta charset="utf-8"> <script src="Google%20Maps%20Javascript%20API%20V3%20Reference%20-%20Google%20Maps%20JavaScript%20API%20v3%20%E2%80%94%20Google%20Developers_files/script_head.js"></script> <link rel="stylesheet" type="text/css" href="Google%20Maps%20Javascript%20API%20V3%20Reference%20-%20Google%20Maps%20JavaScript%20API%20v3%20%E2%80%94%20Google%20Developers_files/screen.css"> <link rel="shortcut icon" href="https://developers.google.com/_static/images/favicon.ico"> <link rel="apple-touch-icon" href="https://developers.google.com/_static/images/apple-touch-icon.png"> <link href="Google%20Maps%20Javascript%20API%20V3%20Reference%20-%20Google%20Maps%20JavaScript%20API%20v3%20%E2%80%94%20Google%20Developers_files/css_002.css" rel="stylesheet" type="text/css"> <script src="Google%20Maps%20Javascript%20API%20V3%20Reference%20-%20Google%20Maps%20JavaScript%20API%20v3%20%E2%80%94%20Google%20Developers_files/jquery.js"></script> <script id="jqueryui" src="Google%20Maps%20Javascript%20API%20V3%20Reference%20-%20Google%20Maps%20JavaScript%20API%20v3%20%E2%80%94%20Google%20Developers_files/jquery-ui.js"></script> <script src="Google%20Maps%20Javascript%20API%20V3%20Reference%20-%20Google%20Maps%20JavaScript%20API%20v3%20%E2%80%94%20Google%20Developers_files/jsapi"></script> <script type="text/javascript" src="Google%20Maps%20Javascript%20API%20V3%20Reference%20-%20Google%20Maps%20JavaScript%20API%20v3%20%E2%80%94%20Google%20Developers_files/api.js"></script> <script type="text/javascript" src="Google%20Maps%20Javascript%20API%20V3%20Reference%20-%20Google%20Maps%20JavaScript%20API%20v3%20%E2%80%94%20Google%20Developers_files/a_002"></script>  <script type="text/javascript"> var contentTimer = new window.jstiming.Timer(); var ___gcfg = ___gcfg || {}; ___gcfg.lang = 'zh-cn'; </script> <title>Google Maps Javascript API V3 Reference - Google Maps JavaScript API v3 — Google Developers</title> <style>.a-b-c{position:relative;display:-moz-inline-box;display:inline-block}* html .a-b-c,*:first-child+html .a-b-c{display:inline}.a-d-e{margin:2px;border:0;padding:0;font-family:Arial,sans-serif;color:#000;background:#ddd url(//ssl.gstatic.com/editor/button-bg.png) repeat-x top left;text-decoration:none;list-style:none;vertical-align:middle;cursor:default;outline:none}.a-d-e-f-g,.a-d-e-h-g{border-style:solid;border-color:#aaa;vertical-align:top}.a-d-e-f-g{margin:0;border-width:1px 0;padding:0}.a-d-e-h-g{-moz-box-orient:vertical;margin:0 -1px;border-width:0 1px;padding:3px 4px;white-space:nowrap}* html .a-d-e-h-g{left:-1px}* html .a-d-e-i .a-d-e-f-g{left:-1px}* html .a-d-e-i .a-d-e-h-g{right:auto}*:first-child+html .a-d-e-h-g{left:-1px}*:first-child+html .a-d-e-i .a-d-e-h-g{left:1px}::root .a-d-e{line-height:0}::root .a-d-e-f-g{line-height:0}::root .a-d-e-h-g{line-height:normal}.a-d-e-j{background-image:none!important;opacity:.3;-moz-opacity:.3;filter:alpha(opacity=30)}.a-d-e-j .a-d-e-f-g,.a-d-e-j .a-d-e-h-g{color:#333!important;border-color:#999!important}* html .a-d-e-j,*:first-child+html .a-d-e-j{margin:2px 1px!important;padding:0 1px!important}.a-d-e-k .a-d-e-f-g,.a-d-e-k .a-d-e-h-g{border-color:#9cf #69e #69e #7af!important}.a-d-e-l,.a-d-e-m{background-color:#bbb;background-position:bottom left}.a-d-e-n .a-d-e-f-g,.a-d-e-n .a-d-e-h-g{border-color:orange}.a-d-e-o-p,.a-d-e-o-p .a-d-e-f-g,.a-d-e-o-p .a-d-e-h-g{margin-right:0}.a-d-e-o-q,.a-d-e-o-q .a-d-e-f-g{margin-left:0}.a-d-e-o-q .a-d-e-h-g{margin-left:0;border-left:1px solid #fff}.a-d-e-o-q.a-d-e-m .a-d-e-h-g{border-left:1px solid #ddd}* html .a-d-e-o-q .a-d-e-h-g,*:first-child+html .a-d-e-o-q .a-d-e-h-g{left:0}.a-r-e{position:relative;margin:2px;border:1px solid #000;padding:2px 6px;font:normal 13px "Trebuchet MS",Tahoma,Arial,sans-serif;color:#fff;background-color:#8c2425;cursor:pointer;outline:none}.a-r-e-j{border-color:#888;color:#888;background-color:#ccc;cursor:default}.a-r-e-k{border-color:#8c2425;color:#8c2425;background-color:#eaa4a5}.a-r-e-l,.a-r-e-s,.a-r-e-m{border-color:#5b4169;color:#5b4169;background-color:#d1a8ea}.a-r-e-n{border-color:#5b4169}.a-r-e-o-p{margin-right:0}.a-r-e-o-q{margin-left:0;border-left:none}.a-e{color:#036;border-color:#036;background-color:#69c}.a-e-j{border-color:#333;color:#333;background-color:#999}.a-e-k{color:#369;border-color:#369;background-color:#9cf}.a-e-l{color:#69c;border-color:#69c}</style><link href="Google%20Maps%20Javascript%20API%20V3%20Reference%20-%20Google%20Maps%20JavaScript%20API%20v3%20%E2%80%94%20Google%20Developers_files/css.css" rel="stylesheet"><link type="text/css" rel="stylesheet" href="Google%20Maps%20Javascript%20API%20V3%20Reference%20-%20Google%20Maps%20JavaScript%20API%20v3%20%E2%80%94%20Google%20Developers_files/table.css"><style type="text/css" charset="utf-8">/* See license.txt for terms of usage */ /** reset styling **/ .firebugResetStyles { z-index: 2147483646 !important; top: 0 !important; left: 0 !important; display: block !important; border: 0 none !important; margin: 0 !important; padding: 0 !important; outline: 0 !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; max-height: none !important; position: fixed !important; transform: rotate(0deg) !important; transform-origin: 50% 50% !important; border-radius: 0 !important; box-shadow: none !important; background: transparent none !important; pointer-events: none !important; white-space: normal !important; } .firebugBlockBackgroundColor { background-color: transparent !important; } .firebugResetStyles:before, .firebugResetStyles:after { content: "" !important; } /**actual styling to be modified by firebug theme**/ .firebugCanvas { display: none !important; } /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */ .firebugLayoutBox { width: auto !important; position: static !important; } .firebugLayoutBoxOffset { opacity: 0.8 !important; position: fixed !important; } .firebugLayoutLine { opacity: 0.4 !important; background-color: #000000 !important; } .firebugLayoutLineLeft, .firebugLayoutLineRight { width: 1px !important; height: 100% !important; } .firebugLayoutLineTop, .firebugLayoutLineBottom { width: 100% !important; height: 1px !important; } .firebugLayoutLineTop { margin-top: -1px !important; border-top: 1px solid #999999 !important; } .firebugLayoutLineRight { border-right: 1px solid #999999 !important; } .firebugLayoutLineBottom { border-b

评论收藏

内容反馈