本位属转载，作者：再见西瓜虫
简介
Google Maps JavaScript API方便用户将Google Map嵌入到他们的网页中，在iPhone中若要调用JavaScript API, 需要创建UIWebView并将HTML页面嵌入到UIWebView中。
源码：
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5: <title>Google 地图 JavaScript API 示例</title>
6: <script src="http://ditu.google.com/maps?file=api&v=2" type="text/javascript"></script>
7: <script type="text/javascript">
8: var map = null;// GMap2对象
9: var directions = null;// GDirections对象
10: var isFirstClick = true; // 用于判断地图上是否已有路线
11: var firstPin = null;// 清除地图上所有的控件后，第一次点击生成的GMarker对象
12: var secondPin = null;// 第二次点击的GMarker对象
13: var polyline = null;// 路线
14:
15: var zoomLevel = null;// 缩放等级
16: var center = null;// 地图中心
17:
18: var defaultPin = 'file:\\E:/Pin2.png';// 默认大头针图片
19: var movedPin = 'file:\\E:/PinFloating.png';// 移动时的大头针图片
20:
21: function load() {
22: if (GBrowserIsCompatible()) {
23: map = new GMap2(document.getElementById("map"));
24: map.setCenter(new GLatLng(31.877557643340015, 117.24609375), 13);
25: map.disableDoubleClickZoom();
26: directions = new GDirections(map);
27:
28: //自定义GMarker.
29: var pinIcon = new GIcon(G_DEFAULT_ICON);
30: pinIcon.image = defaultPin;
31: pinIcon.iconSize = new GSize(29, 32);
32: pinIcon.iconAnchor = new GPoint(5, 27);
33: pinIcon.shadow = null;
34: markOptions = { draggable: true, icon: pinIcon };// 这这里我们设置GMarker可以拖动.
35:
36: // 对firstPin和secondPin进行初始化.
37: firstPin = new GMarker(new GLatLng(31.877557643340015, 117.24609375), markOptions);
38: secondPin = new GMarker(new GLatLng(31.877557643340015, 117.24609375), markOptions);
39:
40: // 添加监听.
41: addMapClickListener();
42: addDraggingListener();
43: addDirectionsListener();
44: }
45:
46: // 监听地图的点击事件.
47: function addMapClickListener() {
48: if (map != null) {
49: GEvent.addListener(map, "click", function (marker, point) {
50: if (marker) {
51: map.removeOverlay(marker);
52: }
53: else {
54: if (isFirstClick == true) {
55: // 因为我们只想地图上只有一条路线，所以
56: // 在每次添加起点大头针时，清除地图上所有的控件.
57: map.clearOverlays();
58: polyline = null;
59: isFirstClick = false;
60:
61: firstPin.setLatLng(point);
62: map.addOverlay(firstPin);
63: }
64: else {
65: isFirstClick = true;
66: secondPin.setLatLng(point);
67: map.addOverlay(secondPin);
68:
69: // 获取最短路径.
70: loadDirections(firstPin.getLatLng(), secondPin.getLatLng(), null);
71: }
72: }
73: });
74: }
75: }
76:
77: // 监听大头针的拖动事件.
78: function addDraggingListener() {
79: if (firstPin != null && secondPin != null) {
80:
81: // 当开始拖动大头针时，我们需要将大头针的图片(Pin2.png)修改成拖动时的图片(PinFloating.png).
82: GEvent.addListener(firstPin, 'dragstart', function (latlng) {
83: firstPin.setImage(movedPin);
84: });
85:
86: GEvent.addListener(secondPin, 'dragstart', function (latlng) {
87: secondPin.setImage(movedPin);
88: });
89:
90: // 当结束拖动时，需要将大头针的图片改回拖动前，并重新获取最短路线.
91: GEvent.addListener(firstPin, 'dragend', function (latlng) {
92: firstPin.setImage(defaultPin);
93:
94: if (latlng != null && polyline != null) {
95:
96: window.setTimeout(function () {
97: loadDirections(latlng, secondPin.getLatLng());
98: }, 300);
99: }
100: });
101:
102: GEvent.addListener(secondPin, 'dragend', function (latlng) {
103: secondPin.setImage(defaultPin);
104:
105: if (latlng != null && polyline != null) {
106:
107: window.setTimeout(function () {
108: loadDirections(firstPin.getLatLng(), latlng);
109: }, 350);
110: }
111: });
112: }
113: }
114:
115: // 获取最短路径.
116: function loadDirections(startLatLng, endLatLng, travelModel) {
117:
118: if (startLatLng == null || endLatLng == null) {
119: return;
120: }
121:
122: // 获取缩放级别和中心点的经纬度.
123: // 由于在GDirections.load得到经纬度之后，地图会自动缩放并平移，
124: // 所以需要在这里获取到load之前的值，在load结束后重新修改缩放级别
125: // 和中心点.
126: zoomLevel = map.getZoom();
127: center = map.getCenter();
128:
129: if (travelModel == null) {
130: directions.loadFromWaypoints(new Array(startLatLng, endLatLng));
131: }
132: else {
133: directions.loadFromWaypoints(new Array(startLatLng, endLatLng),
134: { travelMode: travelModel });
135: }
136: }
137:
138: // 监听GDirection的'addOverly'事件.
139: function addDirectionsListener() {
140:
141: // 由于地图会在GDirection.load事件后自动添加起点和终点的GMarker控件，
142: // 这是在页面上会出现2个起点和2个终点，我们需要将自动添加的GMarker删除,
143: // 并重新添加|firstPin|和|secondPin|。同时clearOverlays方法也会将地图
144: // 上的路线删除，所以我们在添加Garker的同时，也需要将路线重新添加到Map.
145: GEvent.addListener(directions, 'addoverlay', function () {
146: if (directions != null) {
147: map.clearOverlays();
148:
149: var startMarker = directions.getMarker(0);
150: var endMarker = directions.getMarker(1);
151: polyline = directions.getPolyline();
152:
153: firstPin.setLatLng(startMarker.getLatLng());
154: secondPin.setLatLng(endMarker.getLatLng());
155:
156: map.addOverlay(firstPin);
157: map.addOverlay(secondPin);
158: map.addOverlay(polyline);
159:
160: map.setZoom(zoomLevel);
161: map.setCenter(center);
162: }
163: });
164: }
165: }
166:
167: </script>
168: </head>
169: <body onload="load()" onunload="GUnload()" style="margin: 0px 0px 0px 0px;">
170: <div id="map" style="width: 320px; height: 480px;">
171: </div>
172: </body>
173: </html>
分享到：
相关推荐
大连东软信息学院校园地图是一款基于Google Maps API二次开发的应用程序，它是在Google Maps的基础上，以学校的相关地理信息为基准，将地理信息添加在Google Maps上。 为广大的用户提供了电子地图的缩放，拖动操作...
WEBGIS课程时得一个作业， 是我们学校的电子地图， 基本实现， 浏览地图， 查询地标， 路线查询等的GIS功能
①地图基本功能：地图缩放控件、地图类型控件（地图、卫星、地形、地球、夜景）、缩略图控件、比例尺控件、地图搜索控件 ②地图辅助功能：地图状态显示、信息浮窗（标注展示地域视频和文本信息）、放大镜功能、右键...
地图应用程序是一种常见的应用，它可以使用地图API来显示地理位置数据、路线、标记等信息。在这个实战博客中，我们将创建一个简单的Java地图应用程序，演示如何使用地图API来显示地图和标记。我们将使用Java编程语言...
折线Polyline 是一种在Google Maps API 中解码和编码折线的工具。 如果您想在查询 Google API 以获取路线时绕过 25 个 WayPoints 的限制，它会很有用。 通过解码用于在地图上绘制路径的折线，您可以获得更多坐标。 ...
:evergreen_tree: :palm_tree: :sun: :evergreen_tree: :palm_tree: :sun: :evergreen_tree: :palm_tree: :sun: 一个使用Google Maps JavaScript API设计地图的项目，该地图显示了一些我认为在旧金山很有趣的地方。...
Google maps在智能线路巡检系统中的开发应用研究，刘翠，袁超伟，本文分析比较了几种地图应用开发技术，通过调用Google maps的API函数，使用JavaScript开发语言，将Google maps应用于线路
Quasar GoogleMaps Cypress 带有 Google Maps 和 Cypress 自动化测试的 Quasar 应用示例 技术： 类星体 v1 谷歌地图 API 谷歌地图地方 API 谷歌地图路线 API 柏 客观的 您将学习如何使用 Google Maps API 在 ...
围绕Google Maps API的Elixir包装器 服务 -多个地点之间的路线。 -多个目的地的旅行时间和距离。 （由@bnns提供） -世界上任何一点的海拔数据。 -在地址和地理坐标之间转换。 -允许您使用应用程序中的数据来...
优化路线使用Google Maps API在最多25个航路点之间创建优化路线的网站。如何使用： 转到 在“航路点”搜索框中输入起始位置在“输入航点”框中以任意顺序输入最多25个航点位置（ ） 在“设置结束位置”框中输入结束...
它利用几种不同的Google Maps API服务来绘制地图上的艺术位置，并生成和呈现步行路线。在尝试直播站点。 | 在查看数据库架构和功能列表。科技栈Artizen使用以下工具，框架和关键软件包： （使用 ） react-google-...
r requirements.txt用法修改run.py变量：file_folder = os.path.dirname（os.path.abspath（__ file__））+'/ static / img / map-my-experience'file_ext ='.JPG'修改map.html API KEY以包括Google Maps API：
•其他web服务:同理搜索、必应地图海拔API,必应地图位置API,在路由API,开放路线服务方向,开放路线地理编码服务,公开街道地图Nominatim,公开街道地图天桥API,QQ搜索,三个字; [backcolor=rgb(241, 240, 175) !...
谷歌地图的api基本功能的使用 包含【marker标记点、定位、路线绘制、信息弹窗、画圆、地理位置标记、放大缩小、自定义图标、监听地图事件、固定范围选择】
问题在于，对于每个路线请求，Google Map API 仅允许最多 8 个航点（对于 Google Maps API for Work 客户而言为 23 个）。 个人开发者创建超过 8 个航点的路线是相当麻烦的。 此 JavaScript 函数将航点（包括起点...
googlemaps-api-project 点击时间实习生挑战题2 使用谷歌地图 javascript api (v-3) 的简单应用程序，提供从当前位置前往 clicktime 办公室的建议路线，并沿途享用咖啡和甜甜圈。 运行说明： 下载该文件夹并将其...
QlikView扩展程序可将所有主要Google Maps API v3功能集成在一处 包括的功能有： 基于经纬度坐标 可能包含您的API密钥 支持主要地图类型 路线图卫星| 地形| 混合动力| 45º影像| 街景 显示标记 具有自定义多个标记...
谷歌地图方向 使用 Google Maps API 查找路线
RouteDirectionMap 一个在两点之间绘制可能的Google地图路线的android应用程序。 我们将在应用程序中使用Google Maps Directions API。结果 如果分发该项目的副本或创建该项目的分支，则必须将此项目视为来源。 该...
使用Google Maps API的Java和JavaScript中的ADS-B和AIS的简单软件定义无线电接收机。 该项目取决于： Salvatore Sanfilippo的'dump1090'： : 托马斯·博格·萨林（Thomas Borg Salling）的``aismessages''： : ...